This is where most components will find their place. The compounds folder is subdevided into 5 sub-categories. Components must be prefixed with the name of the sub-category (e.g. LayoutSection, ContentImage).

Directory Structure

/components/
    /compounds/
        /accessibility/
        /content/
        /layout/
        /site/
        /ui/

Accessibility Components

Components that improve accessibility of the site.

Naming Convention

Use prefix "Accessibility" on all components inside this folder.

• AccessibilityFlyingFocus - Flying focus highlighter.
• AccessibilitySkiplinks - Keyboard navigatable links to jump to important parts of the site. (e.g. Navigation, Main Content, Sitemap, etc.)

Content Components

Content components are containers for content. Each component is also in Storyblok. Prefix: "Content".

Naming Convention

Use prefix "Content" on all components inside this folder.

• ContentBreadcrumbs (BACKLOG) - Breadcrumbs based on the router.
• ContentEmbed - Iframes, with iframe-resizer. (Also for YouTube and Vimeo)
• ContentImage - Responsive Image
• ContentKeyValueList - Key Value List (Definition List)
• ContentLinkList - List with links
• ContentPageLead - Lead text for any page.
• ContentPageTitle - Page title for any page.
• ContentQuote - Quote with caption.
• ContentRichtext - Richtext, renders Storyblok richtext and markdown.
• ContentSlider (BACKLOG) - A basic multi-purpose slider based on swiper.js.
• ContentTable - A basic table, renders Storyblok component (plugin).
• ContentTeaser - A simple multi-purpose teaser with image, title, content and link.
• ContentVideo - Video component for self-hosted videos.

Layout Components

Layout components are containers used for either visualy structuring (LayoutGrid), semantic structuring (LayoutSection) or represent entry types from Storyblok (LayoutPage). Each component is also in Storyblok. Prefix: "Layout".

Naming Convention

Use prefix "Layout" on all components inside this folder.

• LayoutGrid - Simple grid with 2-4 columns and predefined wrapping points.
• LayoutPage - LayoutPage component for Storyblok LayoutPage component.
• LayoutSection - Semantic section with hideable headline.
• LayoutSubSection - Semantic section with hideable headline.

Site Components

Site components are components that you can find on almost every page, they are mostly used inside the nuxt layout components (nuxt-starter/layouts/). The content for these can be defined in the Settings component of Storyblok and are avaiable through the global store. Prefix: "Site".

Naming Convention

Use prefix "Site" on all components inside this folder.

• SiteFooter - Footer with copyright, navigation and social links.
• SiteHeader - Header with SiteLogo and SiteNavigation.
• SiteLogo - Logo with link to homepage.
• SiteNavigation - Basic Navigation for inside the SiteHeader component.
• SiteSearch (BACKLOG) - Search field with preview.
• SiteSocialLinks - Social links with icons.

Ui Components

Components the user has to interact with. Prefix: "Ui".

Naming Convention

Use prefix "Ui" (not UI) on all components inside this folder.

Case Sensitivity

Please make sure you don't use uppercase "UI" for the prefix. This would result in the DOM template element being <u-i-notification> instead of the correct <ui-notification>.

• UiAccordion - Single accordion, used inside UiAccordionGroup.
• UiAccordionGroup - Group of UiAccordions, configure if only one accordion can be open at a time.
• UiAutocomplete (BACKLOG) - Autocomplete input field, with suggestions.
• UiCookieConsent - Cookie consent, gets saved to localstorage and store. State should disable trackers.
• UiFlyout - Flyout
• UiFlyoutTrigger - Flyout trigger
• UiLanguageSwitch - Switch for languages.
• UiLoadMore - Load next page of content into a container.
• UiNotification - Multi-purpose fixed notification to show important information to the user. Can be closed and save close.
• UiPagination - Pagination
• UiScrollToTop - Fixed button for scrolling to the top of the page.
• UiTabs (BACKLOG) - Tabs
• UiTooltip (BACKLOG) - Show additional information to the user on focus and hover.

---