Skip to main content

Components Library

Welcome to the Components Library your central hub for reusable UI elements that ensure consistency, accessibility, and efficiency across our digital experiences.

Each component is built with scalability in mind and follows our design principles. Whether you're designing or developing, you’ll find the tools you need to create cohesive, user-friendly interfaces.

Header 2

Header 3

Header 4

Header 5
Header 6
  • List
  • List 2
  • List 3
  • List 4

Bold Text 

Italic Text 

Underline 

Link

Button Primary

Button Secondary

 

NumberTitleContentAttach
1Title 1Content 1Attach 1
2Title 2Content 2Attach 2
3 Title 3Content 3Attach 3

Body Component

The Body field is the primary text area used to add the main content of a node (such as a page, article, or custom content type). It supports rich formatting and media embedding, making it ideal for long-form content, introductions, descriptions, or narratives.

Image Component

Image Header

Accordion Component

No, the Nebraska Liquor Control Commission is only collecting overarching product names. IE Bob’s Lager, Bob’s Ale. Not Bob’s Lager – 10 Ounce, Bob’s Lager – 16 Ounce, Bob’s Lager – Keg

Yes, all manufacturers, Nebraska craft breweries, microdistilleries, and farm wineries must register their brands

Carousel Component

The Body field is the primary text area used to add the main content of a node (such as a page, article, or custom content type). It supports rich formatting and media embedding, making it ideal for long-form content, introductions, descriptions, or narratives.

Key Features:

  • Rich Text Editor: Use the built-in WYSIWYG editor (such as CKEditor) to format text with headings, links, lists, and more.
  • Media Embedding: Easily insert images, videos, or files using the Media Library integration.
  • HTML Support: Switch to source mode for advanced HTML customization if enabled.
  • Token Support (if configured): Use dynamic placeholders for personalized or automated content.

Best Practices:

  • Use semantic headings (H2, H3, etc.) to improve readability and accessibility.
  • Keep paragraphs concise for better user experience.
  • Avoid using inline styles; rely on the site's theme for visual consistency.
  • Use media responsibly — ensure alternative text is provided for images.

Carousel Components

What are Components?

Components are modular pieces of content or interface design — such as buttons, cards, alerts, headers, and image galleries — that can be reused across different parts of your site. In Drupal, these may be implemented using:

  • Paragraphs or Custom Blocks
  • Twig templates for frontend theming
  • Layout Builder components
  • Design tokens and global styles from the site’s theme

Why Use Them?

  • Consistency: Enforce brand and UI standards across all pages and content types.
  • Efficiency: Reuse pre-built blocks without needing to reinvent structure or styling.
  • Accessibility: Built with semantic HTML and WAI-ARIA attributes where needed.
  • Flexibility: Easily adapt components for different contexts using view modes, fields, or theme settings.

Modal Component

Tab Component

Body Header

The Body field is the primary text area used to add the main content of a node (such as a page, article, or custom content type). It supports rich formatting and media embedding, making it ideal for long-form content, introductions, descriptions, or narratives.

Key Features:

  • Rich Text Editor: Use the built-in WYSIWYG editor (such as CKEditor) to format text with headings, links, lists, and more.
  • Media Embedding: Easily insert images, videos, or files using the Media Library integration.
  • HTML Support: Switch to source mode for advanced HTML customization if enabled.
  • Token Support (if configured): Use dynamic placeholders for personalized or automated content.

Best Practices:

  • Use semantic headings (H2, H3, etc.) to improve readability and accessibility.
  • Keep paragraphs concise for better user experience.
  • Avoid using inline styles; rely on the site's theme for visual consistency.
  • Use media responsibly — ensure alternative text is provided for images.

Body Header

Most components can be added through the Layout Builder or selected within Paragraph bundles. Developers can also access them via Twig templates and preprocess functions. Refer to each component’s documentation for:

Two Column

Test

Call Out

Bruce Bailey is Founder and Partner of Design Associates, Architectural & Engineering firm, doing work throughout the United States. 

 

Button

Two Uneven Column

Test

Call Out

Bruce Bailey is Founder and Partner of Design Associates, Architectural & Engineering firm, doing work throughout the United States. 

Button

 

Three Columns Components

Test
Test
Test

Three Uneven Columns Components

Test
Test
Test