Accordion And Tabs Blocks

Use Accordion and Tabs blocks when customers need structured information without a long uninterrupted text area.

Included Blocks

Block	Use
Accordion	Stacks expandable rows for FAQ, policies, care, fit, shipping, or technical details.
Tabs	Switches between panels when the content groups are peers, such as Description, Details, and Shipping.

Choose the patternUse Accordion for independent questions or expandable details. Use Tabs for a small set of equally important content groups.
Add rows or panelsAdd accordion rows or tab panels with clear titles and concise content.
Tune behaviorFor accordions, choose caret or plus icons and whether opening one row automatically closes the others.
Review mobileConfirm titles wrap cleanly and content remains readable on small screens.

Setting	Description
Icon	Choose caret or plus row indicators.
Automatically close other rows	Keeps only one row open at a time.
Dividers	Adds row separation.
Place icon at end	Moves the icon to the right edge.
Typography	Controls row title style, custom font, size, line height, and letter spacing.
Colors and borders	Override global colors, background, text, border, radius, and padding.

Setting	Description
Tab panels	Child panels that hold each tab’s title and content.
Typography	Controls tab label style and optional uppercase transform.
Colors and borders	Override global colors, border, radius, and padding.

Situation	Better choice
Many independent questions	Accordion
Long policy or care entries	Accordion
Three or fewer peer categories	Tabs
Customers need to compare all headings quickly	Accordion
Content must stay compact above the fold	Tabs or short accordion

State	What to confirm
Keyboard	Rows or tabs can be reached and activated from the keyboard.
Long titles	Titles wrap without covering icons.
Auto-close	The accordion open behavior matches the information type.
Empty panels	No blank row or tab appears in published content.
Mobile	Content does not push purchase or CTA blocks too far away when expanded.