Reusable components

The campaign website is built using reusable Vue components. This helps us create a consistent look and feel across the website.

All components are styled using Tailwind CSS and DaisyUI, which allows for easy customization and theming: just change the Tailwind CSS variables to change the look and feel of the entire website (colors, fonts, design elements).

TIP

Try out all our components using our Storybook playground.

Available components on pages: In Directus, you can add the following components to the content of a page:

• Formatted text (headings, bold, italic, links, ordened/unordened lists, blockquotes)
• Image
• Video (YouTube)
• Buttons
• Testimonials
• Countdown
• Steps
• Accordion
• Cards (one/two/three columns)
  • Custom cards
  • Event
  • Group
  • Campaign
• Event map
• Event list
• Group map
• Group list

Components that are used on all pages:

• Navigation
• Hero (with image or video, and optional form or button)
• Footer