Accordion
Disclosure rows for FAQs and settings groups, built on native <details>.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
Can I change my plan later?
Yes. You can upgrade or downgrade at any time from Settings → Billing.
Is there a free trial?
Pixels Audit is free while we are in early access.
Do you support RTL?
Every component mirrors with dir="rtl" and the Locale tokens switch to Arabic type.
<div class="px-accordion" data-px-accordion="single" style="width:100%;max-width:560px">
<details class="px-accordion__item" open><summary class="px-accordion__trigger">Can I change my plan later?<svg class="px-icon" aria-hidden="true">…</svg></summary><div class="px-accordion__panel">Yes. You can upgrade or downgrade at any time from Settings → Billing.</div></details>
<details class="px-accordion__item"><summary class="px-accordion__trigger">Is there a free trial?<svg class="px-icon" aria-hidden="true">…</svg></summary><div class="px-accordion__panel">Pixels Audit is free while we are in early access.</div></details>
<details class="px-accordion__item"><summary class="px-accordion__trigger">Do you support RTL?<svg class="px-icon" aria-hidden="true">…</svg></summary><div class="px-accordion__panel">Every component mirrors with dir="rtl" and the Locale tokens switch to Arabic type.</div></details>
</div>Usage
- Keep titles as questions or clear nouns.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-accordion | class | Container. data-px-accordion="single" keeps one open. |
px-accordion__item | class | <details> element. |
px-accordion__trigger · __panel | class | <summary> and content. |
Figma properties
Accordion item12 variants · page “Data display”Open
Disclosure row for FAQs and settings groups. Header is a <button aria-expanded> controlling the panel; stack items to make an Accordion.
| Property | Type | Values |
|---|---|---|
| Title | Text | “Can I change my plan later?” |
| Content | Text | “Yes. You can upgrade or downgrade at any time from Settings → Billing. Changes take effect at the start of your next billing cycle.” |
| Expanded | Variant | False True |
| State | Variant | Active Hover Focused |
| Direction | Variant | LTR RTL |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-accordion-background-hover | color-background-neutral-default | #f2f4f7 |
--px-accordion-padding-x | spacing-20 | 20px |
--px-accordion-padding-y | spacing-16 | 16px |
--px-accordion-gap | spacing-16 | 16px |
Accessibility
- Native details/summary is keyboard and screen-reader ready.