Accordion
Typically used to display a set of content areas that can be expanded and collapsed individually, with other areas remaining closed when one area is expanded.
Anatomy
This is an accordion panel title
This section contains the folded or unfolded content of each folding panel, which can be customized and filled according to different business or user needs. It can be in the form of plain text, graphics, sub lists, and other content formats.
1
2
3
1:Title
Required, text used to describe the title
2: Content Text
Required, text used to describe the content
3: Expand mobile arrow
Required, used for collapsing, expanding, or hiding content
Variant/Type
Collapse:
md-16
This is an accordion panel title
lg-20
This is an accordion panel title
Expand:
md-16
This is an accordion panel title
This section contains the folded or unfolded content of each folding panel, which can be customized and filled according to different business or user needs. It can be in the form of plain text, graphics, sub lists, and other content formats.
lg-20
This is an accordion panel title
This section contains the folded or unfolded content of each folding panel, which can be customized and filled according to different business or user needs. It can be in the form of plain text, graphics, sub lists, and other content formats.
Usage scenario
This is an accordion panel title
This is an accordion panel title
This section contains the folded or unfolded content of each folding panel, which can be customized and filled according to different business or user needs. It can be in the form of plain text, graphics, sub lists, and other content formats.
Interaction
Collapse
This is an accordion panel title
Expand
This is an accordion panel title
This section contains the folded or unfolded content of each folding panel, which can be customized and filled according to different business or user needs. It can be in the form of plain text, graphics, sub lists, and other content formats.
Label
md-16
lg-20
This is an accordion panel title
This is an accordion panel title
This is an accordion panel title
This section contains the folded or unfolded content of each folding panel, which can be customized and filled according to different business or user needs.
This is an accordion panel title
This section contains the folded or unfolded content of each folding panel, which can be customized and filled according to different business or user needs.
56
16
16
92
32
32
12
12
164
12
32
32
148
12
16
16
12
12
RTL
This is an accordion panel title
This section contains the folded or unfolded content of each folding panel, which can be customized and filled according to different business or user needs.
LTR
This is the title of the accordion panel
This section contains the collapsed or expanded content of each accordion panel, which can be customized and filled according to different business or user needs.
RTL
Usage
Do
Don't
Keep the expand and collapse icons to prevent users from confusing the collapsed and expanded states of the panel.