Lessons per week grew every year, from 40 in the first year to 4,000 now

# Calaca UI > One skeleton, many skins. Calaca UI is a set of CSS component classes built with Tailwind CSS 4, for plain HTML, Astro, Next.js and React. The core gives each component its structure, behavior and accessibility; a skin dresses it. Markup is the API: there are no framework components. Rules for writing markup: - Class names follow BEM: `ca-`, `ca-__`, `ca---` (variant, size or layout). - Use only the classes listed below; anything else starting with `ca-` does not exist. - A button needs the component class, one variant and one size, plus `type="button"` unless it submits a form. - Dialogs are native `` elements opened with `commandfor` and `command="show-modal"`; load `ca-commands.js` for older browsers. - A block (such as `ca-hero`) needs exactly one layout modifier; parts other than its content wrapper and title are optional. - Dropdowns are a button with `popovertarget` and a `[popover]` menu; actions close it with `popovertargetaction="hide"`. Do not add `role="menu"`. - Tabs use the WAI-ARIA tabs roles and states in the markup and need `ca-tabs.js` (or `import "@calaca/ui/behavior/tabs"`) once per page. - A tooltip wraps its trigger in `ca-tooltip`; the trigger points at the `role="tooltip"` element with `aria-describedby`. Load `ca-tooltip.js` for Escape. - A combobox is an input with `role="combobox"`, `aria-controls`, `aria-expanded` and `aria-autocomplete="list"`, plus a `role="listbox"` (with `popover="manual"` to float) of `role="option"` elements, which may be links; `data-filter="none"` lets your code render the options; load `ca-combobox.js`. - Toasts come from `toast(message, { tone, duration, action })` in `@calaca/ui/behavior/toast` (or `ca-toast.js`); a button with `data-ca-toast="message"` shows one without code. - Tailwind utilities may be added next to `ca-*` classes for one-off changes; they win over the skin. - Every field has a ``; invalid fields get `aria-invalid="true"` and `aria-describedby` pointing to the error. Stylesheet in a Tailwind build: ```css @import "tailwindcss"; @import "@calaca/ui/core.css"; @import "@calaca/ui/skins/base.css"; ``` ## Docs - [Introduction](https://calaca.design/docs/introduction/): Calaca UI is a skeleton for interfaces. Every product dresses it in its own skin. - [Principles](https://calaca.design/docs/principles/): The layered model under Calaca UI. Tokens, core, skin, modifiers and instance utilities each own one kind of property, and tests keep the borders closed. - [Installation](https://calaca.design/docs/installation/): Add Calaca UI to plain HTML without a build step, or to any Tailwind CSS project such as Astro or Next.js. - [Theming](https://calaca.design/docs/theming/): Tokens carry the values, skins and brands supply them, and data attributes switch skin and appearance. - [Skins](https://calaca.design/docs/skins/): Dress the core for your product, step by step. Extend the neutral base skin or start from the bare skeleton. - [Accessibility](https://calaca.design/docs/accessibility/): What the core guarantees, what a skin must keep, and what you add in your markup. The target is WCAG 2.2 AA. - [Browser support](https://calaca.design/docs/browser-support/): Calaca UI targets Baseline, the features that work in every major browser. Newer features come with a small polyfill or a fallback. - [Lineage](https://calaca.design/docs/lineage/): The ideas Calaca UI stands on and the people who published them. A page of thanks to mentors who never knew they were. - [Brand and style guide](https://calaca.design/docs/brand/): The Calaca UI brand — marks, colors, type, iconography and the rules that keep it consistent in every context. - [Skin gallery](https://calaca.design/skins/): every skin on the same markup. ## Components ### Button Triggers an action, such as saving a form or opening a dialog. Plain classes; no JavaScript in any stack. Page: https://calaca.design/components/button/ Classes: - `ca-button` (component): Layout, focus ring, disabled behavior and touch target. - `ca-button--primary` (variant): The main action of a view. - `ca-button--secondary` (variant): A strong action that is not the main one. - `ca-button--outline` (variant): A lower-emphasis action with a visible boundary. - `ca-button--ghost` (variant): The lowest emphasis, for actions such as Cancel. - `ca-button--sm` (size): Compact size for dense toolbars and tables. - `ca-button--md` (size): Default size. - `ca-button--lg` (size): Prominent size for marketing pages and empty states. Usage: A button needs the component class, one variant and one size. ```html ``` Variants: Use one primary button per view for the main action; secondary, outline and ghost rank below it. ```html

``` Sizes: Pick the size that matches the surrounding controls. On touch screens every size keeps a 44 by 44 pixel target. ```html

``` Disabled: Use `disabled` when the action can never apply. Use `aria-disabled="true"` with an explanation when people should still find the button and learn why it is unavailable. ```html

Select at least one row to export.

``` As a link: Use an `` with button classes when the action navigates to another page. ```html Read the guide ``` ### Card Groups related content and actions on one surface. Plain classes; no JavaScript in any stack. Page: https://calaca.design/components/card/ Classes: - `ca-card` (component): Vertical stack with the card surface, edge and spacing. - `ca-card__title` (part): Heading of the card. Use the heading level that fits the page outline. - `ca-card__description` (part): Supporting text below the title. - `ca-card__footer` (part): Row of actions that wraps on narrow screens. Usage: A card needs the component class; title and description are optional parts. ```html

Lessons this week

Three lessons are planned. You can move a lesson up to 24 hours before it starts.

``` With actions: Put buttons in `ca-card__footer`, the main action first. ```html

Invite your team

Members can plan lessons and see every student's progress.

``` In a grid: Cards stretch to their grid cell. Lay them out with Tailwind's grid utilities. ```html

Theory exam

Practice 40 questions in the format of the real exam.

Driving test

Book your test once your instructor marks you ready.

``` ### Field Wraps a form control with its label, a hint and an error message. Plain classes; no JavaScript in any stack. Page: https://calaca.design/components/field/ Classes: - `ca-field` (component): One-column stack of label, control, hint and error. - `ca-field__label` (part): The visible label of the control. - `ca-field__hint` (part): Help text that stays visible, such as a format. - `ca-field__error` (part): Error message, shown when the value is invalid. Usage: A field holds a label, a control and optionally a hint. Connect them with `for`, `id` and `aria-describedby`. ```html

Full name

As it appears on your driving licence.

``` With an error: Mark the control with `aria-invalid="true"` and point `aria-describedby` at the error message. ```html

Email address

Enter an email address like name@example.com.

``` With a text area: The input classes also style a `

Optional. Your instructor reads this before the lesson.

``` ### Input A single-line text control for names, email addresses, numbers and searches. Plain classes; no JavaScript in any stack. Page: https://calaca.design/components/input/ Classes: - `ca-input` (component): Full-width text control with the focus ring and invalid state. - `ca-input--sm` (size): Compact size for toolbars and tables. - `ca-input--md` (size): Default size. - `ca-input--lg` (size): Prominent size for search and sign-up forms. Usage: An input needs the component class and one size, inside a field with a label. ```html

Postcode

``` Sizes: Sizes match the button sizes, so an input and a button line up in a row. ```html

``` Input types: Use the right `type`, `inputmode` and `autocomplete`, so phones show the right keyboard and browsers can fill values in. ```html

Phone number

Number of lessons

``` Dates and times: Use the native `type="date"`, `"time"` and `"datetime-local"`. Phones show their own pickers; `min`, `max` and `step` limit the choice. ```html

Lesson date

Start time

Exam

``` Disabled: A disabled input cannot be changed or focused. For a value people should still read and copy, prefer `readonly`. ```html

Student number

``` ### Select A native list of options to pick one value from, such as a length or a car. Plain classes; no JavaScript in any stack. Page: https://calaca.design/components/select/ Classes: - `ca-select` (component): Full-width native select with the skin's arrow and the focus ring. - `ca-select--sm` (size): Compact size for toolbars and tables. - `ca-select--md` (size): Default size. - `ca-select--lg` (size): Prominent size for search and sign-up forms. Usage: A select needs the component class and one size, inside a field with a label. ```html

Lesson length

``` Sizes: Sizes match the input and button sizes, so they line up in a row. ```html

``` With an error: Mark the select with `aria-invalid="true"` and point `aria-describedby` at the error message. ```html

Car

Choose the car for this lesson.

``` ### Combobox A text input with a list of suggestions that narrows as people type. Needs a script for its behavior. Page: https://calaca.design/components/combobox/ Classes: - `ca-combobox` (component): Wrapper around the input and its list; the list opens under the input. - `ca-combobox__listbox` (part): The `role="listbox"` of options, a manual popover anchored under the input. - `ca-combobox__option` (part): One `role="option"`. The active one has `aria-selected="true"`. Usage: An input with `role="combobox"` and a listbox of options with `popover="manual"`. Typing filters the list; an option with `aria-disabled="true"` shows but cannot be chosen. ```html

Instructor

``` Values that differ from the label: Put the value to fill in on `data-value` when it differs from what the option shows. ```html

Pick-up point

Type part of a name, or any address.

``` Options that are links: Options can be links (`

Go to a student

``` ### Date range Two native date fields for a period, such as a holiday or a report. Uses built-in HTML behavior, so you write no script. Page: https://calaca.design/components/date-range/ Classes: - `ca-date-range` (component): The `

` around the two fields. - `ca-date-range__fields` (part): The row with both fields; it stacks when narrow. - `ca-date-range__field` (part): A `` with its date input. - `ca-date-range__separator` (part): The dash between the fields; decoration. Usage: A fieldset with a start and an end field, marked with `data-ca-range`. The end cannot be before the start. ```html

Holiday, no lessons

From Until

``` With a hint: Connect a hint to the whole range with `aria-describedby` on the fieldset. ```html

Report period

Up to one year. The end moves along when you pick a later start.

From Until

``` ### Checkbox A box people tick to turn one option on, alone or as one of several. Plain classes; no JavaScript in any stack. Page: https://calaca.design/components/checkbox/ Classes: - `ca-checkbox` (component): The `` around the input and its text; the click and touch target. - `ca-checkbox__input` (part): A native ``; the skin sets its size and color. Usage: The label wraps the input and its text, so the whole line is clickable. ```html Send me a reminder the day before ``` Group: Put related checkboxes in a `

` with a ``. `ca-field` styles both. ```html

Notify me about New bookings Cancelled lessons Invoices (set by your school)

``` ### Radio A set of options where people pick exactly one. Plain classes; no JavaScript in any stack. Page: https://calaca.design/components/radio/ Classes: - `ca-radio` (component): The `` around the input and its text; the click and touch target. - `ca-radio__input` (part): A native ``; the skin sets its size and color. Usage: Radios with the same `name` form one group. Wrap them in a `

` with a ``. ```html

Transmission Manual Automatic

``` With a hint: Connect a hint to the whole group with `aria-describedby` on the fieldset. ```html

Lesson plan

You can change the plan after each lesson.

Once a week Twice a week Intensive course, every day

``` ### Switch An on and off control for a setting that takes effect at once. Plain classes; no JavaScript in any stack. Page: https://calaca.design/components/switch/ Classes: - `ca-switch` (component): The `` around the switch and its text; the click and touch target. - `ca-switch__input` (part): A native checkbox with `role="switch"`; the skin draws the track and thumb. Usage: A checkbox with `role="switch"` inside the label. Screen readers announce it as on or off. ```html Show weekends in the calendar ``` Settings: Group related switches in a `

` with a ``. ```html

Notifications Email me about changes Text me on the day of a lesson Push notifications (needs the app)

``` ### File upload A native file picker for documents and photos, with its button dressed by the skin. Plain classes; no JavaScript in any stack. Page: https://calaca.design/components/file-upload/ Classes: - `ca-file-upload` (component): A native ``; the skin dresses its button. Usage: A native `` inside a field. `accept` limits the file types. ```html

Copy of your provisional licence

A photo or a PDF, up to 10 MB.

``` Several files: Add `multiple` to let people choose more than one file. ```html

Fuel receipts

Choose several files at once.

``` ### Editor A text field with a toolbar for bold, italic, headings, lists and links. Needs a script for its behavior. Page: https://calaca.design/components/editor/ Classes: - `ca-editor` (component): Frame around the toolbar and the editable area. - `ca-editor__toolbar` (part): The `role="toolbar"` of formatting tools. - `ca-editor__tool` (part): One button with `data-command`; formats show their state with `aria-pressed`. - `ca-editor__content` (part): The `contenteditable` area with `role="textbox"`. - `ca-editor__link` (part): The `[popover]` form that asks for a link address. Usage: A toolbar, an editable area and a hidden input that carries the HTML with the form. Select text and use the toolbar, or Ctrl B and Ctrl I. ```html

Lesson notes

Practised roundabouts and merging on the ring road.

``` ### Badge A short label for a status or category, such as Paid or Overdue. Plain classes; no JavaScript in any stack. Page: https://calaca.design/components/badge/ Classes: - `ca-badge` (component): Inline label that never wraps. - `ca-badge--neutral` (variant): Plain labels such as Draft. - `ca-badge--primary` (variant): Highlights something new. - `ca-badge--success` (variant): Something finished well, such as Paid. - `ca-badge--warning` (variant): Needs attention soon, such as Due soon. - `ca-badge--danger` (variant): Needs action now, such as Overdue. - `ca-badge--info` (variant): Neutral information, such as Scheduled. Usage: A badge needs the component class and one variant. ```html Draft ``` Variants: Pick the variant by meaning, not by color. Neutral fits most labels; save danger for things that need action. ```html

Draft New Paid Due soon Overdue Scheduled

``` In context: Place a badge next to the thing it describes, so the relation is clear without color. ```html

Invoice 2026-114 Overdue

``` ### Alert A message about the page or the task at hand, such as a warning or a confirmation. Plain classes; no JavaScript in any stack. Page: https://calaca.design/components/alert/ Classes: - `ca-alert` (component): Box for the message, with the tone's fill and edge. - `ca-alert__title` (part): The message in one line. - `ca-alert__description` (part): More detail, such as what to do next. - `ca-alert__actions` (part): Row of buttons that wraps on narrow screens. - `ca-alert--neutral` (variant): General information without urgency. - `ca-alert--info` (variant): Something people should know, such as planned maintenance. - `ca-alert--success` (variant): A task finished. - `ca-alert--warning` (variant): Something needs attention soon. - `ca-alert--danger` (variant): Something failed or needs action now. Usage: An alert needs the component class and one variant. A title alone is enough for a short message. ```html

Your trial ends on 30 November

Add a payment method to keep your projects after that date.

``` Variants: Pick the variant by meaning. The title says what happened, so the message does not rely on color. ```html

Changes are saved as you type

Maintenance on Sunday from 02:00 to 04:00

Invoice sent to the customer

Two lessons have no instructor yet

Payment failed: the card was declined

``` With actions: Put buttons in `ca-alert__actions`, the main action first. This one interrupts, so it uses `role="alert"`. ```html

Your session ends in 2 minutes

Unsaved changes are lost when it ends.

``` ### Toast A short message that confirms what just happened, at the bottom of the screen, and goes away by itself. Needs a script for its behavior. Page: https://calaca.design/components/toast/ Classes: - `ca-toast` (component): One message with its close button. - `ca-toast__region` (part): The region at the bottom end of the screen that holds the toasts; a manual popover. - `ca-toast__message` (part): The text of the message. - `ca-toast__close` (part): The button that closes the toast. - `ca-toast__status` (part): The visually hidden live region that announces each message. - `ca-toast--neutral` (variant): General feedback, such as a saved draft. - `ca-toast--info` (variant): News about something else, such as someone opening an invitation. - `ca-toast--success` (variant): An action worked. - `ca-toast--warning` (variant): It worked, but something needs attention. - `ca-toast--danger` (variant): An action failed. Usage: Press a button to see a toast. Buttons with `data-ca-toast` show one without code; apps call `toast()`. ```html

``` Variants: The markup `ca-toast.js` creates, in every tone. The message says what happened, so it does not rely on color. ```html

Draft saved

Sam opened the invitation

Lesson moved to Thursday

Two lessons still need a car

Could not send the invoice

``` With an action: A toast can carry one action, such as Undo. It then stays until it is closed. ```html

Lesson cancelled

``` ### Progress A bar that shows how far a task or a series has come. Plain classes; no JavaScript in any stack. Page: https://calaca.design/components/progress/ Classes: - `ca-progress` (component): A native ``; the skin draws the track and the value. Usage: A native `` with `value` and `max`, and a label that also says the numbers. ```html

Lessons done: 14 of 20 14 of 20

``` With a hint: Point `aria-describedby` at a hint for details such as the size of an upload. ```html

Uploading theory-notes.pdf 62%

62% of 4.8 MB

``` ### Spinner A small turning ring that shows something is busy, always next to words that say what. Plain classes; no JavaScript in any stack. Page: https://calaca.design/components/spinner/ Classes: - `ca-spinner` (component): The ring. Add one size. - `ca-spinner--sm` (size): For buttons and small text. - `ca-spinner--md` (size): For body text. - `ca-spinner--lg` (size): For a larger area that is loading. Usage: Put the spinner next to text in a `role="status"` element, and hide the ring itself with `aria-hidden="true"`. ```html

Saving the lesson…

``` In a button: Keep the button in place with `aria-disabled="true"` while it works, and change its label. ```html ``` Sizes: Match the size to the text next to it. ```html ``` ### Skeleton Placeholder shapes that hold the place of content while it loads. Plain classes; no JavaScript in any stack. Page: https://calaca.design/components/skeleton/ Classes: - `ca-skeleton` (component): A placeholder shape. Add one variant. - `ca-skeleton--text` (variant): One line of text, as tall as the text around it. - `ca-skeleton--circle` (variant): A round shape, such as an avatar. - `ca-skeleton--block` (variant): A larger area, such as an image or a chart. Usage: Shape the skeleton like the content it replaces. Mark the container `aria-busy="true"` and tell screen readers what is loading. ```html

``` Variants: A line of text, a circle for an avatar, and a block for an image or a card. ```html ``` ### Empty state What people see, and can do, when a list or a page has nothing in it yet. Plain classes; no JavaScript in any stack. Page: https://calaca.design/components/empty-state/ Classes: - `ca-empty-state` (component): Centered column for the message and its action. - `ca-empty-state__media` (part): An optional icon or illustration above the title. - `ca-empty-state__title` (part): What is empty, as a heading. - `ca-empty-state__description` (part): Why it is empty or what happens next. - `ca-empty-state__actions` (part): The way forward; usually one button. Usage: A title that says what is empty, a sentence on why it matters and one clear action. ```html

No lessons planned this week

Plan a lesson and Sam gets the time on their phone right away.

``` No search results: Repeat the search term and offer ways forward instead of a bare "No results". ```html

No students match “Jansn”

Check the spelling, or search by email address or phone number instead.

``` ### Dialog A modal window that asks for a decision or a short task before people continue. Uses built-in HTML behavior, so you write no script. Page: https://calaca.design/components/dialog/ Classes: - `ca-dialog` (component): Centered modal surface; open state and backdrop. - `ca-dialog__title` (part): Heading of the dialog; connect it with `aria-labelledby`. - `ca-dialog__description` (part): Explains the consequence; connect it with `aria-describedby`. - `ca-dialog__footer` (part): Row of actions at the end of the dialog. Usage: A native `` opened with `commandfor` and `command="show-modal"`. No JavaScript of your own is needed. ```html ``` With a form: A form with `method="dialog"` closes the dialog on submit and keeps the button value as the result. ```html ``` ### Sheet A panel that slides in from an edge of the screen, for filters, navigation or details. Uses built-in HTML behavior, so you write no script. Page: https://calaca.design/components/sheet/ Classes: - `ca-sheet` (component): The `` pinned to one edge, as tall or wide as the screen. - `ca-sheet__title` (part): Heading of the sheet; connect it with `aria-labelledby`. - `ca-sheet__description` (part): Optional explanation below the title. - `ca-sheet__body` (part): The content; it scrolls while title and footer stay in view. - `ca-sheet__footer` (part): Row of actions at the end of the sheet. - `ca-sheet--end` (layout): Slides from the end edge (the right in left-to-right). - `ca-sheet--start` (layout): Slides from the start edge. - `ca-sheet--bottom` (layout): Slides up from the bottom. Usage: A native `` with `ca-sheet--end`, opened with `commandfor` and `command="show-modal"`, like a dialog. ```html ``` From the start edge: `ca-sheet--start` suits navigation on small screens. ```html ``` From the bottom: `ca-sheet--bottom` suits short details on phones; it is as tall as its content, up to 85% of the screen. ```html ``` ### Dropdown A button that opens a short list of actions or links next to it. Uses built-in HTML behavior, so you write no script. Page: https://calaca.design/components/dropdown/ Classes: - `ca-dropdown` (component): Wrapper around the trigger button and its menu; adds the chevron to the button. - `ca-dropdown__menu` (part): The `[popover]` panel; sits under the button and flips when there is no room. - `ca-dropdown__item` (part): An action (` ``` Links and a label: Items can be links. A label names the group; a separator splits it. ```html ``` Unavailable item: Use `aria-disabled="true"` and point `aria-describedby` at the reason, so people can still find the item and learn why. ```html ``` ### Popover A button that opens a small panel with any content, such as a short form. Uses built-in HTML behavior, so you write no script. Page: https://calaca.design/components/popover/ Classes: - `ca-popover` (component): Wrapper around the trigger and its panel. - `ca-popover__panel` (part): The `[popover]` panel; sits under the button and flips when there is no room. Usage: The button opens the panel with `popovertarget`. Buttons inside close it with `popovertargetaction="hide"`. ```html ``` ### Tooltip A short description of a control that appears on hover and keyboard focus. Needs a script for its behavior. Page: https://calaca.design/components/tooltip/ Classes: - `ca-tooltip` (component): Wrapper around the trigger and its tooltip. - `ca-tooltip__content` (part): The `role="tooltip"` text, shown centered above the trigger. Usage: Wrap the trigger and the tooltip in `ca-tooltip`. The trigger points at the tooltip with `aria-describedby`. ```html

``` On an icon button: An icon button names itself with `aria-label`; the tooltip shows the same words for sighted people. ```html

``` ### Accordion A list of sections that open and close, such as answers to common questions. Uses built-in HTML behavior, so you write no script. Page: https://calaca.design/components/accordion/ Classes: - `ca-accordion` (component): Wrapper that stacks the items. - `ca-accordion__item` (part): A `

` element. - `ca-accordion__trigger` (part): The `

`: the visible question, with a chevron that turns when open. - `ca-accordion__content` (part): The answer below the trigger. Usage: Each item is a native `

` with a `

`. Add `open` to show an item when the page loads. ```html

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.

``` One open at a time: Give items the same `name`, and opening one closes the others. ```html

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.

``` ### Tabs Switch between views of the same subject, one panel at a time. Needs a script for its behavior. Page: https://calaca.design/components/tabs/ Classes: - `ca-tabs` (component): Wrapper around the tab list and the panels. - `ca-tabs__list` (part): The `role="tablist"` row; it scrolls sideways when the tabs do not fit. - `ca-tabs__tab` (part): A `role="tab"` button. `aria-selected="true"` marks the selected one. - `ca-tabs__panel` (part): A `role="tabpanel"` with the content of one tab. Usage: A tab list of buttons and one panel per tab. The selected tab has `aria-selected="true"`; the other panels are `hidden`. ```html

Tuesday at 09:00 with Sam, 90 minutes in the blue car.

``` Unavailable tab: A `disabled` tab stays visible but cannot be selected; the arrow keys skip it. ```html

Invoice 2026-114 for ten lessons, sent on 3 November.

``` ### Navbar The bar at the top of a site or app with the brand, the main links and a few actions. Uses built-in HTML behavior, so you write no script. Page: https://calaca.design/components/navbar/ Classes: - `ca-navbar` (component): The bar; a size container, so it adapts to its own width, not the window's. - `ca-navbar__brand` (part): Link to the home page with the name or logo. - `ca-navbar__menu` (part): The `[popover]` with the main links; in the bar when wide, a panel when narrow. - `ca-navbar__link` (part): One main link. Mark the current page with `aria-current="page"`. - `ca-navbar__actions` (part): Buttons at the end of the bar, such as the main action or an account menu. - `ca-navbar__toggle` (part): The menu button that opens the links when the bar is narrow. - `ca-navbar--roomy` (layout): For a bar with more actions; the links move into the menu below 64rem instead of 40rem. Usage: The links sit in a `[popover]` menu. At 40rem and wider they show in the bar; narrower, the menu button opens them. Resize the window to see both. ```html ``` ### Sidebar Grouped links beside the content, for apps and documentation with many pages. Plain classes; no JavaScript in any stack. Page: https://calaca.design/components/sidebar/ Classes: - `ca-sidebar` (component): The `

` that stacks the groups. - `ca-sidebar__group` (part): One group of links with its heading. - `ca-sidebar__heading` (part): The name of a group. - `ca-sidebar__subheading` (part) - `ca-sidebar__list` (part): The `

`. The current page has `aria-current="page"`. ```html ``` ### Breadcrumb The path from the home page to the current page, as links. Plain classes; no JavaScript in any stack. Page: https://calaca.design/components/breadcrumb/ Classes: - `ca-breadcrumb` (component): The `

` around the path. - `ca-breadcrumb__list` (part): The `

`. The last link is the current page, marked with `aria-current="page"`. ```html ``` ### Pagination Links to the pages of a long list, such as invoices or lessons. Plain classes; no JavaScript in any stack. Page: https://calaca.design/components/pagination/ Classes: - `ca-pagination` (component): The `

` around the page links. - `ca-pagination__list` (part): The `

`. The current page has `aria-current="page"`; an ellipsis stands for skipped pages. ```html ``` On the first page: A step that is not possible keeps its place with `aria-disabled="true"` and no `href`. ```html ``` ### Stepper Shows where people are in a process of a few steps, such as booking a lesson. Plain classes; no JavaScript in any stack. Page: https://calaca.design/components/stepper/ Classes: - `ca-stepper` (component): The `

`. Each step has `data-status`; the current one also `aria-current="step"`. ```html ``` Vertical: `ca-stepper--vertical` puts the label beside the marker and has room for a description. ```html ``` ### Avatar A small picture or the initials of a person or organization. Plain classes; no JavaScript in any stack. Page: https://calaca.design/components/avatar/ Classes: - `ca-avatar` (component): The frame that clips a picture or centers initials. - `ca-avatar__image` (part): An `` that fills the avatar. - `ca-avatar--sm` (size): Small, for lists and tables. - `ca-avatar--md` (size): Default size. - `ca-avatar--lg` (size): Large, for profile headers. Usage: Initials in a `` with `role="img"` and the full name as its `aria-label`. ```html SV ``` Sizes: Pick the size that fits the text next to it. ```html

SV NB LJ

``` With an image: Put an `` with `ca-avatar__image` inside; it fills the avatar. ```html

``` ### Table Rows and columns of data, such as lessons or invoices, that scroll sideways when wide. Plain classes; no JavaScript in any stack. Page: https://calaca.design/components/table/ Classes: - `ca-table` (component): Scroll container that styles the `` inside it. - `ca-table__caption` (part): The `

No lessons planned this week

No students match “Jansn”

Plan a week of lessons in minutes

Your driving test, booked

One place for students, cars and lessons

Tuesday, 09:00

We started with one car and a paper diary

Everything a driving school runs on

Planning

Progress

Payments

Everything a driving school runs on

Planning

Progress

Payments

From first lesson to licence

Book a trial lesson

Pass the theory exam

Take your driving test

From first lesson to licence

Book a trial lesson

Pass the theory exam

Take your driving test

Try it with your school for a month

See it with your own week

Common questions

Common questions