Block
Faq
Common questions with answers that open and close, in a ca-accordion.
2 layoutsOne structure; add one layout modifier to pick the arrangement.
Stacked layout
ca-faq--stacked: Header above the questions. For a column of text.
Driving school
The questions are a ca-accordion; items with the same name open one at a time.
Common questions
Something else? Send us a message and we answer the same day.
Can I move a lesson?
Yes, free of charge up to 24 hours before it starts.
Which car do I learn in?
A manual or an automatic, whichever you choose when you book.
How many lessons do I need?
Most students need between 30 and 40; your instructor tells you after the trial lesson.
<section class="ca-faq ca-faq--stacked w-full" aria-labelledby="faq-stacked-title">
<div class="ca-faq__header">
<h2 class="ca-faq__title" id="faq-stacked-title">Common questions</h2>
<p class="ca-faq__lead">Something else? Send us a message and we answer the same day.</p>
</div>
<div class="ca-faq__questions ca-accordion">
<details class="ca-accordion__item" name="faq-stacked">
<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" name="faq-stacked">
<summary class="ca-accordion__trigger">Which car do I learn in?</summary>
<div class="ca-accordion__content"><p>A manual or an automatic, whichever you choose when you book.</p></div>
</details>
<details class="ca-accordion__item" name="faq-stacked">
<summary class="ca-accordion__trigger">How many lessons do I need?</summary>
<div class="ca-accordion__content"><p>Most students need between 30 and 40; your instructor tells you after the trial lesson.</p></div>
</details>
</div>
</section>Split layout
ca-faq--split: Header at the start, questions at the end; one column when narrow. For a wide page.
Driving school, split
The same markup; only the layout class differs.
Common questions
Something else? Send us a message and we answer the same day.
Can I move a lesson?
Yes, free of charge up to 24 hours before it starts.
Which car do I learn in?
A manual or an automatic, whichever you choose when you book.
How many lessons do I need?
Most students need between 30 and 40; your instructor tells you after the trial lesson.
<section class="ca-faq ca-faq--split w-full" aria-labelledby="faq-split-title">
<div class="ca-faq__header">
<h2 class="ca-faq__title" id="faq-split-title">Common questions</h2>
<p class="ca-faq__lead">Something else? Send us a message and we answer the same day.</p>
</div>
<div class="ca-faq__questions ca-accordion">
<details class="ca-accordion__item" name="faq-split">
<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" name="faq-split">
<summary class="ca-accordion__trigger">Which car do I learn in?</summary>
<div class="ca-accordion__content"><p>A manual or an automatic, whichever you choose when you book.</p></div>
</details>
<details class="ca-accordion__item" name="faq-split">
<summary class="ca-accordion__trigger">How many lessons do I need?</summary>
<div class="ca-accordion__content"><p>Most students need between 30 and 40; your instructor tells you after the trial lesson.</p></div>
</details>
</div>
</section>Guidance and accessibility
When to use
- Use an FAQ for questions people really ask, in their words.
- Say where to go when the answer is not there.
Accessibility
- The questions are native
<details>(see the accordion component), so the keyboard, screen readers and find in page work without a script. - Label the section with its title through
aria-labelledby.
Classes
Generated from the block contract. Layouts are part of the core, so every skin gets all of them.
| Class | Kind | Use it for |
|---|---|---|
ca-faq | Block | Section with the header and the questions. Add one layout. |
ca-faq__header | Part | Title and lead. |
ca-faq__title | Part | Heading of the block. |
ca-faq__lead | Part | Where to go when the answer is not here. |
ca-faq__questions | Part | Wrapper for the questions; give it ca-accordion too. |
ca-faq--stacked | Layout | Header above the questions. |
ca-faq--split | Layout | Header and questions side by side. |
Skins
The same markup, dressed by each skin. The arrangement stays; spacing, type and color change.
Base skin
Neutral grayscale starting point; product skins extend it and change what differs.
Common questions
Something else? Send us a message and we answer the same day.
Can I move a lesson?
Yes, free of charge up to 24 hours before it starts.
Which car do I learn in?
A manual or an automatic, whichever you choose when you book.
How many lessons do I need?
Most students need between 30 and 40; your instructor tells you after the trial lesson.
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
Common questions
Something else? Send us a message and we answer the same day.
Can I move a lesson?
Yes, free of charge up to 24 hours before it starts.
Which car do I learn in?
A manual or an automatic, whichever you choose when you book.
How many lessons do I need?
Most students need between 30 and 40; your instructor tells you after the trial lesson.
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
Common questions
Something else? Send us a message and we answer the same day.
Can I move a lesson?
Yes, free of charge up to 24 hours before it starts.
Which car do I learn in?
A manual or an automatic, whichever you choose when you book.
How many lessons do I need?
Most students need between 30 and 40; your instructor tells you after the trial lesson.
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
Common questions
Something else? Send us a message and we answer the same day.
Can I move a lesson?
Yes, free of charge up to 24 hours before it starts.
Which car do I learn in?
A manual or an automatic, whichever you choose when you book.
How many lessons do I need?
Most students need between 30 and 40; your instructor tells you after the trial lesson.
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>