Accordion block

Accordion Block

An accordion block helps organize and present information in a structured and space-efficient manner. It is particularly useful when you have a lot of content or categories to display, but you want to avoid overwhelming the user with too much information at once.

Contents:

    • Block customization options
    • Block examples:
      • Accordion block without background color
      • Accordion block with light blue background color
      • Accordion block without background color and footer link
      • Accordion block with light blue background color and footer link

Block customization options: 

ELEMENT REQUIRED OPTIONS AVAILABLE
Background color N
  • Light blue
  • None 
Eyebrow N
  • Heading text
  • Heading element
Header N
  • Heading text
  • Heading element
Accordion Items N
  • Uses Accordion item blocks
  • Open First Accordion Panel
Footer Links N

Accordion block without background color

Eyebrow - Lorem ipsum dolor sit amet

Heading Text - Duis aute irure dolor in reprehenderit

Block above has these settings:

Element Option selected
Background color Not selected
Eyebrow Yes
Header Yes
Accordion Items Yes
Footer Links No

Accordion block with light blue background color

Eyebrow - Lorem ipsum dolor sit amet

Heading Text - Duis aute irure dolor in reprehenderit

Block above has these settings:

Element Option selected
Background color Yes
Eyebrow Yes
Header Yes
Accordion Items Yes
Footer Links No

Accordion block without background color and footer link

Heading Text - Duis aute irure dolor in reprehenderit

Block above has these settings:

Element Option selected
Background color No
Eyebrow No
Header Yes
Accordion Items Yes
Footer Links Yes



Accordion block with background color and footer link

Heading Text - Duis aute irure dolor in reprehenderit

Block above has these settings:

Element Option selected
Background color Yes
Eyebrow No
Header Yes
Accordion Items Yes
Footer Links Yes