Accordion component

The title field is where to add the accordion component’s title or headline. The title here can be styled, but the text will be bolded by default. Keep in the heading hierarchy of the page to determine if heading 2 or heading 3 would be needed.

The description block is where supporting text can be added to the accordion component. Usually, this would include a sentence or two describing the accordion’s content.

The accordion background is a drop-down menu with two options:

• Standard: Creates the accordion with a plain white background
• Decorative: Add a hexagon pattern to the background for extra visual interest

The “accordion style” option refers to three different display options for the accordion rows.

• Standard: This is the default option and simply displays just the row title.
• Icons: This option allows icons to be included at the beginning of the row title. If this option is selected, an additional option called “icon choice” will appear in the Row options. This is a search bar to search for and select an icon from the icon library.
• Numbered: As expected, this option automatically numbers each row of the accordion.

The “expand/collapse all” option creates a button in the top right of the accordion that will allow users to expand or collapse all the accordion rows with one click. To enable this button simply choose “yes.” This option is completely preference and can be omitted by choosing “no” which is selected by default.

The main content is added in the “accordion rows” section. Clicking the “add” button will present two options for the type of content we would like to add: Row or label.

• Row title: The title of the accordion row should be added to the row title field.
• Icon choice: This field only appears if the accordion style “icons” was previously selected. A search bar will appear to find and select an icon to be displayed at the beginning of the row.
• Row content: The main content of the accordion row should be added to the row content field.
• Row anchor: An optional field at the end adds an anchor to a specific row. This works exactly like other anchors. To find more information on anchors, visit the Block anchor ID page.

The other option presented when “add” is selected is called “label.” This allows for the creation of a breakpoint in the accordion with the option of adding text, which can help group an accordion into segments.

• Subheading: Choosing “label” will present only one field called “subheading.” Add the text to the “subheading” field to label the area. Leaving this field blank will create a dotted line break.