layout
Accordion
A list of sections that open and close, such as answers to common questions.
Native behaviorUses built-in HTML behavior, so you write no script.
Usage
Each item is a native <details> with a <summary>. Add open to show an item when the page loads.
How long is a lesson?
A lesson takes 60 minutes. Exam training and highway lessons take 90.
Can I move a lesson?
Yes, free of charge up to 24 hours before it starts.
Where does the lesson start?
At your home, school or work address. Pick one when you book.
<div class="ca-accordion w-full max-w-lg">
<details class="ca-accordion__item" open>
<summary class="ca-accordion__trigger">How long is a lesson?</summary>
<div class="ca-accordion__content">
<p>A lesson takes 60 minutes. Exam training and highway lessons take 90.</p>
</div>
</details>
<details class="ca-accordion__item">
<summary class="ca-accordion__trigger">Can I move a lesson?</summary>
<div class="ca-accordion__content">
<p>Yes, free of charge up to 24 hours before it starts.</p>
</div>
</details>
<details class="ca-accordion__item">
<summary class="ca-accordion__trigger">Where does the lesson start?</summary>
<div class="ca-accordion__content">
<p>At your home, school or work address. Pick one when you book.</p>
</div>
</details>
</div>Examples
One open at a time
Give items the same name, and opening one closes the others.
Pay per lesson
You get an invoice after each lesson and pay within 14 days.
Buy a package
Ten lessons at once, paid up front, with one lesson free.
<div class="ca-accordion w-full max-w-lg">
<details class="ca-accordion__item" name="payment" open>
<summary class="ca-accordion__trigger">Pay per lesson</summary>
<div class="ca-accordion__content">
<p>You get an invoice after each lesson and pay within 14 days.</p>
</div>
</details>
<details class="ca-accordion__item" name="payment">
<summary class="ca-accordion__trigger">Buy a package</summary>
<div class="ca-accordion__content">
<p>Ten lessons at once, paid up front, with one lesson free.</p>
</div>
</details>
</div>Guidance and accessibility
When to use
- Use an accordion for content people read selectively, such as answers to common questions or optional details.
- Do not hide what everyone needs. Content that is closed is easy to miss.
- Write each trigger as the question or topic people look for.
Accessibility
- It is native
<details>: Tab reaches each trigger, Enter and Space open and close it, and screen readers announce whether it is expanded. - Find in page also searches closed items, and opens the one with the match in browsers that support it.
- A trigger contains only text. Put links and buttons in the content, not in
the
<summary>. - Without support for
name(older browsers), items open independently. Nothing breaks.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-accordion | Component | Wrapper that stacks the items. |
ca-accordion__item | Part | A <details> element. |
ca-accordion__trigger | Part | The <summary>: the visible question, with a chevron that turns when open. |
ca-accordion__content | Part | The answer below the trigger. |
Skins
The same markup, dressed by each skin. Structure and behavior stay the same; only the look changes.
Base skin
Neutral grayscale starting point; product skins extend it and change what differs.
How long is a lesson?
A lesson takes 60 minutes. Exam training and highway lessons take 90.
Can I move a lesson?
Yes, free of charge up to 24 hours before it starts.
Where does the lesson start?
At your home, school or work address. Pick one when you book.
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
How long is a lesson?
A lesson takes 60 minutes. Exam training and highway lessons take 90.
Can I move a lesson?
Yes, free of charge up to 24 hours before it starts.
Where does the lesson start?
At your home, school or work address. Pick one when you book.
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
How long is a lesson?
A lesson takes 60 minutes. Exam training and highway lessons take 90.
Can I move a lesson?
Yes, free of charge up to 24 hours before it starts.
Where does the lesson start?
At your home, school or work address. Pick one when you book.
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
How long is a lesson?
A lesson takes 60 minutes. Exam training and highway lessons take 90.
Can I move a lesson?
Yes, free of charge up to 24 hours before it starts.
Where does the lesson start?
At your home, school or work address. Pick one when you book.
Framework notes
Link the prebuilt stylesheet of your skin next to your brand theme. No build step.
<link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" href="ca-base.css" />In Astro, Vite and other Tailwind projects, import Calaca after Tailwind and your theme in your main stylesheet.
@import "tailwindcss";
@import "./theme.css";
@import "@calaca/ui/core.css";
@import "@calaca/ui/skins/base.css";Same stylesheet as above; write the classes in className.
<button className="ca-button ca-button--primary ca-button--md" type="button">Save changes</button>