UIKit accordion components
Accordion components are used for adding accordions to a layout. There are two accordion components included with the UIKit, each of which is documented below.
Accordion container component
The accordion container component provides the container for each Accordion item. Important information to understand about the component is listed below.
Layout canvas elements
- Container - The container is required to optionally add a margin below the accordion or to add a background color to the accordion.
- Accordion container - The Accordion container provides the functionality for the accordion and the style for the accordion navigation.
The style for the accordion navigation would typically be applied to each Accordion item. For the UIKit, the style has been applied to the Accordion container to make it more convenient for content authors to apply the style in one place. This has been achieved using Custom styles that target the accordion navigation elements. These styles are within the Generic custom style category and are: Accordion tabs keyline light text, Accordion tabs keyline dark text, and Accordion tabs solid.
Component form fields
- Navigation style - Sets the style of the accordion navigation links.
- Background color - Sets a background color on the accordion container.
- Add space below - Adds a space (margin) below the accordion. This is required if a space is desirable when adding this component above another component within the same parent layout component.
Accordion item component
The Accordion item provides each accordion navigation bar.
Layout canvas fields
- Accordion tabs item - Provides the navigation bar.
- Container - Provides a wrapping div to the content to optionally apply padding around the content.
Component form fields
- Navigation label - Provides the text for the accordion navigation.
- Padding around content - Adds padding around the content within the Accordion item.
