Expandable Section

An expandable section gives a hierarchy to a page.

Overview
The Expandable Section component, also known as an Accordion, allows the user to hide or show content within a section of the interface. It typically consists of a title or header and a content area that is initially hidden and can be revealed by clicking on the title. When the content is revealed, it expands to display the contained information and can be hidden again by clicking on the title.
The Expandable Section component is often used to organize and present information in a concise and easy-to-navigate manner. It can be particularly useful in scenarios where the user needs to view or access a large amount of information, as it allows them to reveal only the information they need selectively.
It may also include formatting options for the title and content areas, such as font size and color. 
Changing the properties
Making the Expandable section Closed and/or Collapsible
By making it Collapsible, a chevron button icon will be added to expand the section content.
The Closed attribute makes the expandable section closed by default. The user will need to click on the section's title to open and view the content.
Choosing a variant
The variant attribute is defining the appearance of the expandable section header. However, the section header styling can be overridden by customizing styling settings from the Style panel.
Adding Content
Title and Content attributes can be filled manually or by selecting any your flow resources available. 
Adding Interactions
No interactions are available.
Styling the Expandable Section
From the Styles panel, you can customize styling attributes for the Expandable Section component: 
Base: to customize styling settings for the base variant.
Shaded: to customize styling settings for the Shaded variant.
Examples
Specifications
Attributes
Name
Type
Description
Title
String
The title can include text, and is displayed in the header.
Closed
Boolean
If present, close the section.
Collapsible
Boolean
If present, the section is collapsible.
Content
String
Main rich text content for a section.
Variant
String
Variant of the section. Valid values include base and shaded.
Styling Hooks
For the Base and Shaded variant
Name
Description
Block Start
Defines the logical block start margin of the title element
Block End
Defines the logical block end margin of the title element
Background Color
To define a background color on the title section.
Header Font Color
To define a header font color on the title section.
Header Font Size
To define a header font size on the title section.
Header Font weight
To define a header font weight on the title section.
Icon Color
To define an icon color if an icon is present.
Icon Color Focus
To define an icon color focus if an icon is present.
Icon Color Hover
To define an icon color hover if an icon is present.

Name	Type	Description
Title	String	The title can include text, and is displayed in the header.
Closed	Boolean	If present, close the section.
Collapsible	Boolean	If present, the section is collapsible.
Content	String	Main rich text content for a section.
Variant	String	Variant of the section. Valid values include `base` and `shaded`.

Name	Description
Block Start	Defines the logical block start margin of the title element
Block End	Defines the logical block end margin of the title element
Background Color	To define a background color on the title section.
Header Font Color	To define a header font color on the title section.
Header Font Size	To define a header font size on the title section.
Header Font weight	To define a header font weight on the title section.
Icon Color	To define an icon color if an icon is present.
Icon Color Focus	To define an icon color focus if an icon is present.
Icon Color Hover	To define an icon color hover if an icon is present.

Screen Components - Previous

Dual Listbox

Next - Screen Components

Formatted Address

Last modified 9mo ago