Application Launcher

Site Studio

UIKit accordion components

Site Studio

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.

Important

The style for the accordion navigation would typically be applied to each Accordion item. For the UIKit, the style has been applied to the 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 custom style category and are: , , and .

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.

Important

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.

Did not find what you were looking for?

If this content did not answer your questions, try searching or contacting our support team for further assistance.

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.

Important

Accordion container

Accordion tabs keyline light text

Accordion tabs keyline dark text

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.

Did not find what you were looking for?

If this content did not answer your questions, try searching or contacting our support team for further assistance.