Block
Footer
The end of every page: brand, links in groups and a legal line.
2 layoutsOne structure; add one layout modifier to pick the arrangement.
Simple layout
ca-footer--simple: Links in one row that wraps, legal line below. For small sites.
Small site
A row of links in a <nav>, and the legal line.
Columns layout
ca-footer--columns: Brand and each group of links in columns as room allows. For sites with many pages.
Site with groups
Brand, two groups with headings, and the legal line.
Guidance and accessibility
When to use
- Use one footer at the end of every page, with the links people look for last: contact, prices, privacy.
- Keep groups short and named after what people look for.
Accessibility
- Use
<footer>for the landmark and a<nav>with anaria-labelfor the links, so they are not confused with the main navigation. - Connect each list to its group heading with
aria-labelledby. - Links are at least 24 pixels tall.
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-footer | Block | The <footer>. Add one layout. |
ca-footer__brand | Part | Name or logo and a line about the organization. |
ca-footer__nav | Part | The <nav> around the links. |
ca-footer__group | Part | One group of links with its heading. |
ca-footer__heading | Part | Name of a group. |
ca-footer__links | Part | The <ul> of links. |
ca-footer__link | Part | One link. |
ca-footer__legal | Part | Copyright and legal links, across the full width. |
ca-footer--simple | Layout | Links in a row. |
ca-footer--columns | Layout | Brand and groups in columns. |
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.
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
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>