Skip to content

role disclosure

Accordion draft v0.1.0

A stack of sections whose content shows and hides under a header people activate.

An accordion stacks sections of content, each behind a header: activating the header shows the section, activating it again hides it. It saves vertical space when people need only one or two sections at a time (settings groups, frequently asked questions, order details). Several sections may be open at once; the component never closes one when another opens. One section alone is the same thing with a single item.

States matrix

Every option of each styling property against every declared state, per part when states belong to parts. Properties whose options combine in one component token path are crossed: one table per combination of the others. States are forced with data-state, so what you see is exactly what the CSS defines, independent of the pointer. A column header names the inputs or platforms a state belongs to; states without a web rendering are listed under the table.

Part item

One section: its trigger and its panel (a details element on the web). Takes the states of its trigger and the expanded state.

By size

Size defaulthoverpointeractivefocus-visiblekeyboardexpanded
small
Shipping and returns

Orders ship within two business days. Returns are free within 30 days.
Shipping and returns

Orders ship within two business days. Returns are free within 30 days.
Shipping and returns

Orders ship within two business days. Returns are free within 30 days.
Shipping and returns

Orders ship within two business days. Returns are free within 30 days.
Shipping and returns

Orders ship within two business days. Returns are free within 30 days.
medium
Shipping and returns

Orders ship within two business days. Returns are free within 30 days.
Shipping and returns

Orders ship within two business days. Returns are free within 30 days.
Shipping and returns

Orders ship within two business days. Returns are free within 30 days.
Shipping and returns

Orders ship within two business days. Returns are free within 30 days.
Shipping and returns

Orders ship within two business days. Returns are free within 30 days.