Components

Accordion

An accordion is a stack of expandable panels that lets users show or hide sections of content. It uses native <details> and <summary> elements, which provide built-in disclosure semantics and work without JavaScript.

Usage

Wrap each panel in <details>.
Use <summary> as the interactive label.
Put content immediately after <summary>.

What is Minium CSS?

Minium CSS is a semantic-first CSS library with modern defaults and composable layout primitives.

Does this need JavaScript?

No. It uses the browser's native details/summary behavior.

Group accordion panels

Wrap multiple <details> in a container with role="group" to make them look like a connected set.

Design tokens

Minium exposes color, spacing, and typography tokens as custom properties.

Layout primitives

Flow, cluster, grid, switcher, and other layout primitives are available in @layer layout.

Components

Semantic HTML provides the baseline; component styles add capability when needed.

Style a summary as a button

Add role="button" to <summary> to apply button styling. Button variant and size classes, such as .secondary, .accent, and .small, also apply.

Account details

Review the account owner and contact information.

Notification settings

Choose which notifications you receive.

Display options

Configure optional display settings.

Modify an accordion

Use the following modifiers to change an accordion's presentation and initial state:

Use .border-none on <details> to remove its border and shadow.
Add open to <details> to expand the panel initially.
Give related <details> elements the same name to allow only one panel to remain open.

Borderless accordion

This panel keeps native accordion behavior without the default border and shadow frame.

Accessibility notes

Give every <summary> a visible, non-empty label so the control has an accessible name.