The Individual Accordion Dropdown is designed for organizing content into expandable sections. Each accordion allows for a customizable title, while the body content is managed separately and not editable within the component itself. Spacing adjustments can be made above and below the accordion. Other visual settings such as background color and width are controlled by the Gloss Section in which the component is placed.

Example

  • Lorem ipsum odor amet, consectetuer adipiscing elit. Anam felis consequat malesuada tortor rutrum sem luctus.

  • Torquent vestibulum at nisl convallis nascetur pharetra. Gravida commodo euismod ut augue risus porttitor aptent. Nisl dapibus est nulla facilisi quam fusce gravida.

  • Fermentum placerat vulputate ante hac ut velit facilisi.

Content Options

The only editable part of this component is the Accordion Section Title, which is the clickable text that toggles the visibility of the hidden content. The content revealed upon clicking is managed through the “Component drop zone,” where additional components can be placed. This allows for flexible combinations of content to be displayed within the accordion. Below are examples of component combinations that can be used.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • chair

Layout and Styling Options

The Individual Accordion Dropdown component offers limited layout and styling options on its own. However, it can be paired with the Gloss Section component to achieve various layout configurations and meet different design objectives.

Gloss Section + Individual Accordion Dropdown

Background Colors

  • Lorem ipsum odor amet, consectetuer adipiscing elit. Anam felis consequat malesuada tortor rutrum sem luctus.

  • Lorem ipsum odor amet, consectetuer adipiscing elit. Anam felis consequat malesuada tortor rutrum sem luctus.

  • Lorem ipsum odor amet, consectetuer adipiscing elit. Anam felis consequat malesuada tortor rutrum sem luctus.

  • Lorem ipsum odor amet, consectetuer adipiscing elit. Anam felis consequat malesuada tortor rutrum sem luctus.

  • Lorem ipsum odor amet, consectetuer adipiscing elit. Anam felis consequat malesuada tortor rutrum sem luctus.

  • Lorem ipsum odor amet, consectetuer adipiscing elit. Anam felis consequat malesuada tortor rutrum sem luctus.

  • Lorem ipsum odor amet, consectetuer adipiscing elit. Anam felis consequat malesuada tortor rutrum sem luctus.

  • Lorem ipsum odor amet, consectetuer adipiscing elit. Anam felis consequat malesuada tortor rutrum sem luctus.

Gloss Section + Individual Accordion Dropdown

Widths

  • Lorem ipsum odor amet, consectetuer adipiscing elit. Anam felis consequat malesuada tortor rutrum sem luctus.

  • Lorem ipsum odor amet, consectetuer adipiscing elit. Anam felis consequat malesuada tortor rutrum sem luctus.

  • Lorem ipsum odor amet, consectetuer adipiscing elit. Anam felis consequat malesuada tortor rutrum sem luctus.

  • Lorem ipsum odor amet, consectetuer adipiscing elit. Anam felis consequat malesuada tortor rutrum sem luctus.

  • Lorem ipsum odor amet, consectetuer adipiscing elit. Anam felis consequat malesuada tortor rutrum sem luctus.

Margin Bottom

  • Lorem ipsum odor amet, consectetuer adipiscing elit. Anam felis consequat malesuada tortor rutrum sem luctus.

  • Lorem ipsum odor amet, consectetuer adipiscing elit. Anam felis consequat malesuada tortor rutrum sem luctus.

  • Lorem ipsum odor amet, consectetuer adipiscing elit. Anam felis consequat malesuada tortor rutrum sem luctus.

  • Lorem ipsum odor amet, consectetuer adipiscing elit. Anam felis consequat malesuada tortor rutrum sem luctus.

  • Lorem ipsum odor amet, consectetuer adipiscing elit. Anam felis consequat malesuada tortor rutrum sem luctus.

  • Lorem ipsum odor amet, consectetuer adipiscing elit. Anam felis consequat malesuada tortor rutrum sem luctus.

the end

Margin Top

  • Lorem ipsum odor amet, consectetuer adipiscing elit. Anam felis consequat malesuada tortor rutrum sem luctus.

  • Lorem ipsum odor amet, consectetuer adipiscing elit. Anam felis consequat malesuada tortor rutrum sem luctus.

  • Lorem ipsum odor amet, consectetuer adipiscing elit. Anam felis consequat malesuada tortor rutrum sem luctus.

  • Lorem ipsum odor amet, consectetuer adipiscing elit. Anam felis consequat malesuada tortor rutrum sem luctus.

  • Lorem ipsum odor amet, consectetuer adipiscing elit. Anam felis consequat malesuada tortor rutrum sem luctus.

  • Lorem ipsum odor amet, consectetuer adipiscing elit. Anam felis consequat malesuada tortor rutrum sem luctus.

the end

Usage

Do

  • Ensure the Accordion Section Title clearly reflects the content it will reveal.
  • Keep titles short and to the point to maintain readability.
  • Use the component to organize related content into sections, improving the user experience.
  • Consider using multiple accordions to break up lengthy information for easier navigation.
  • Test the accordion on different screen sizes to ensure it works well across devices.

Don't

  • Don’t overload the accordion with too much content, as it can overwhelm users.
  • Don’t stack too many accordions on one page, as it can make navigation confusing.
  • Avoid placing essential information only in the hidden sections, as some users may not expand the accordion.
  • Don’t rely on the accordion as the sole method for organizing critical content; ensure it's part of a broader design strategy.
  • Avoid using the accordion just for the sake of it; make sure it adds value to the layout or content structure.