Accordion

A header that opens to show a section of content. It comes in three sets: the Normal Accordion in five types, a pill that opens into a card, and a quiet row with a red rail down its panel.

Insert the accordion description here. It would look better as two lines of text.

import { Accordion } from '@orvain/react';
 
<Accordion header="What is included in the free plan?" type="01" iconStyle="chevron">
  The free plan includes buttons, inputs, tables and more.
</Accordion>
 
<Accordion header="Can I cancel anytime?" defaultOpen>
  Yes, you can cancel from your account settings.
</Accordion>
 
// Controlled
<Accordion header="Shipping" open={open} onOpenChange={setOpen}>
  Orders ship within two business days.
</Accordion>

Add a closed Orvain Accordion (1.0, type 01) titled “Insert your accordion title here”, with an info icon and a plus toggle.

Orvain MCPIncluded with the library

When to use#

For FAQs, settings groups and long forms, where most people need only one or two sections.
When the headers give enough information to choose which one to open.
In narrow spaces, such as a sidebar or phone, where tabs do not fit side by side.

When not to use

Show content everyone needs directly on the page. Hiding it adds a click.
Use a Tab Menu Horizontal to switch between peer views of one thing.

Anatomy#

1Header

Satoshi Medium 16 (18 in the 2.0 and 3.0 sets), with an optional info glyph or a count before it.

2Toggle

Plus and minus, or a chevron that points down then up; 20px, or 24px in types [03] and [04].

3Card

[01] and [02]: 440 wide, 16px in, radius 12. [03] to [05]: 626 wide. [05] adds a badge and a 32px pill for the toggle.

4Panel

Text, or in [05] a paragraph and a link field with a copy button; it opens with a short height animation.

5Accordion 2.0 and 3.0

2.0: a 60px pill (grey or brand) that opens into a card with a description, a link and a 48px close button. 3.0: the panel sits behind a 2px red rail.

States#

Default

Closed; the toggle in #8f8f8f.

Hover

The card takes an 8% wash (12% in [02]); the toggle darkens.

Focused

The focus ring around the card, on keyboard focus only.

Active

Open: the panel shows and the toggle turns to minus or points up.

Disabled

The header can't be toggled; the card turns #fcfcfc.

Read-Only

2.0 and 3.0: shown open, with no toggle.

Brand and Fancy Style

2.0: a blue pill, and a soft lift with a highlight.

Source#

Preview – final code pending

The Accordion is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published

Used in these blocks

accordion