Why
Why Inter?
One face. Weight and size do the work a second typeface would try to do.
Why 204?
A 184 column and a 20 gutter. The page is the module.
Accordion
Native <details> rows on hairlines. The name attribute keeps one item open at a time; no JavaScript.
What is Raster?
A monochrome, CSS-first design system.
Is it dependency-free?
Yes. Native elements do the work.
Install
npx @noordvc/raster-cli add accordion
Markup
<div class="rs-acc"><details class="rs-acc-item" name="faq" open><summary>What is Raster?<svg class="rs-acc-chevron" viewBox="0 0 16 16" width="16" height="16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></summary><div class="rs-acc-body">A monochrome, CSS-first design system.</div></details><details class="rs-acc-item" name="faq"><summary>Is it dependency-free?<svg class="rs-acc-chevron" viewBox="0 0 16 16" width="16" height="16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></summary><div class="rs-acc-body">Yes. Native elements do the work.</div></details></div>
React
import { Accordion, AccordionItem } from "@/components/raster/accordion";
<Accordion exclusive>
<AccordionItem title="What is Raster?" defaultOpen>
A monochrome, CSS-first design system.
</AccordionItem>
<AccordionItem title="Is it dependency-free?">
Yes. Native elements do the work.
</AccordionItem>
</Accordion>Classes
.rs-acc.rs-acc-item.rs-acc-chevron.rs-acc-body