Skip to content

Search

Start typing to search.

Show all pages

Documentation

48components

Components

Every component, live in the skin you pick at the top. Open one for examples, guidance and its classes.

Controls

  • Button

    Triggers an action, such as saving a form or opening a dialog.

    CSS only

  • As it appears on your driving licence.

    Field

    Wraps a form control with its label, a hint and an error message.

    CSS only

  • Input

    A single-line text control for names, email addresses, numbers and searches.

    CSS only

  • Select

    A native list of options to pick one value from, such as a length or a car.

    CSS only

    • Anna de Boer
    • Bram Visser
    • Chloé Martin
    • Daan Smit
    • Emma Mulder (on leave)

    Combobox

    A text input with a list of suggestions that narrows as people type.

    Rich widget

  • Holiday, no lessons

    Date range

    Two native date fields for a period, such as a holiday or a report.

    Native behavior

  • Checkbox

    A box people tick to turn one option on, alone or as one of several.

    CSS only

  • Transmission

    Radio

    A set of options where people pick exactly one.

    CSS only

  • Switch

    An on and off control for a setting that takes effect at once.

    CSS only

  • A photo or a PDF, up to 10 MB.

    File upload

    A native file picker for documents and photos, with its button dressed by the skin.

    CSS only

  • Lesson notes

    Practised roundabouts and merging on the ring road.

    Editor

    A text field with a toolbar for bold, italic, headings, lists and links.

    Rich widget

Layout

  • Lessons this week

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

    Card

    Groups related content and actions on one surface.

    CSS only

  • 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.

    Accordion

    A list of sections that open and close, such as answers to common questions.

    Native behavior

  • Lessons this month: 12

    Open invoices: 2

    Separator

    A thin line between groups of content.

    CSS only

  • This text sits in a small container: centred, with space at the sides, and never wider than 42rem.

    Container

    Centres content at a readable maximum width, with space at the sides.

    CSS only

  • First lesson planned

    Theory exam booked

    Interim test on 25 November

    Stack

    Puts children in a column with even space between them.

    CSS only

  • Cluster

    Puts children in a row that wraps, such as buttons or tags.

    CSS only

    • Lessons

      Plan and move lessons.

    • Students

      Follow progress per student.

    • Invoices

      Send and track payments.

    Grid

    Lays out cards or tiles in as many equal columns as fit.

    CSS only

  • How lessons work

    Book a lesson, get picked up, and see your progress after every drive.

    Section

    A band of a page with space above and below, such as a part of a landing page.

    CSS only

Feedback

  • Draft

    Badge

    A short label for a status or category, such as Paid or Overdue.

    CSS only

  • Your trial ends on 30 November

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

    Alert

    A message about the page or the task at hand, such as a warning or a confirmation.

    CSS only

  • Toast

    A short message that confirms what just happened, at the bottom of the screen, and goes away by itself.

    Rich widget

  • 14 of 20

    Progress

    A bar that shows how far a task or a series has come.

    CSS only

  • Saving the lesson…

    Spinner

    A small turning ring that shows something is busy, always next to words that say what.

    CSS only

  • Loading the lesson

    Skeleton

    Placeholder shapes that hold the place of content while it loads.

    CSS only

  • No lessons planned this week

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

    Empty state

    What people see, and can do, when a list or a page has nothing in it yet.

    CSS only

Overlays

  • Delete “Spring campaign”?

    The project and its 12 tasks are removed for everyone. You cannot undo this.

    Dialog

    A modal window that asks for a decision or a short task before people continue.

    Native behavior

  • Filter lessons

    Instructor

    Sheet

    A panel that slides in from an edge of the screen, for filters, navigation or details.

    Native behavior

  • Dropdown

    A button that opens a short list of actions or links next to it.

    Native behavior

  • Share this lesson

    Popover

    A button that opens a small panel with any content, such as a short form.

    Native behavior

  • Anyone with the link can see the lesson

    Tooltip

    A short description of a control that appears on hover and keyboard focus.

    Rich widget

Navigation

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

    Tabs

    Switch between views of the same subject, one panel at a time.

    Rich widget

  • Drive School
    Plan a lesson

    Navbar

    The bar at the top of a site or app with the brand, the main links and a few actions.

    Native behavior

  • Sidebar

    Grouped links beside the content, for apps and documentation with many pages.

    CSS only

  • Breadcrumb

    The path from the home page to the current page, as links.

    CSS only

  • Pagination

    Links to the pages of a long list, such as invoices or lessons.

    CSS only

  • Stepper

    Shows where people are in a process of a few steps, such as booking a lesson.

    CSS only

Data display

  • SV

    Avatar

    A small picture or the initials of a person or organization.

    CSS only

  • Lessons this week
    Student Day Time Minutes
    Sam de Vries Tuesday 09:00 90
    Noor Bakker Wednesday 14:30 60
    Lucas Jansen Friday 11:00 120

    Table

    Rows and columns of data, such as lessons or invoices, that scroll sideways when wide.

    CSS only

  • Lessons this week

    42

    8 more than last week

    Stat

    One number with its label and context, such as lessons this week or open invoices.

    CSS only

    1. First lesson

      Getting to know the car and the controls.

    2. Theory exam passed

    3. Interim test

      A practice exam with a real examiner.

    4. Driving test

      Booked once your instructor marks you ready.

    Timeline

    Events in order, each with a time and a title, such as the steps of a driving course.

    CSS only

Typography

  • Plan a week of lessons

    Heading

    A heading style in four sizes, independent of the heading level.

    CSS only

  • Every student gets the new lesson times on their phone, so nobody has to call to check.

    Text

    Body text in three sizes.

    CSS only

  • Your first lesson

    Your instructor picks you up at the address you chose. Bring your provisional licence and glasses if you need them.

    • Getting to know the car
    • Starting, steering and stopping
    • A short drive on quiet roads
    Most students drive on a real road within twenty minutes.

    Questions? Search for first lesson in the app.

    Prose

    Styles long-form content written in plain HTML, such as articles and guides.

    CSS only

  • Read the installation guide first, then browse the component pages for the classes you need.

    Link

    An inline link in running text, underlined by the skin and animated on hover and focus.

    CSS only

  • Add ca-button--primary to the main action of a view.

    Code

    Inline code, such as a class name or a command in a sentence.

    CSS only

  • global.css 
    @import "tailwindcss";
@import "@calaca/ui/core.css";
@import "@calaca/ui/skins/base.css";

    Code block

    A block of code with a header for its name and a copy button, that scrolls sideways when wide.

    Rich widget

  • Press Esc to close the dialog.

    Kbd

    A key on the keyboard, for shortcuts and instructions such as Esc or Ctrl K.

    CSS only