We moved the São Paulo office
From Monday, 11/09, the team works from Rua Augusta, 1500. Parking is on the second basement level.
Box
A plain element that renders the tag you choose with `as`. Use it when a block needs the right meaning (a section, an article, a list) and nothing else.
Installation
Set up Camaleo once (Installation), then import it. It has no state, so it renders on the server.
import { Box } from "@camaleo/react";Anatomy
Box is one element with data-slot="box" and no styles of its own. Its value is the tag: here a section holds a header and a list, each one a Box with a different as.
box <section> · as="section", named by its heading
box <header> · as="header"
box <ul> · as="ul"
box <li> · as="li", one per item
Examples
Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.
Your plan
Team, 8 of 10 seats in use. Renews on 12/14/2026 for $192.
Attachments
- contract-signed.pdfPDF · 1.2 MB
- floor-plan.pngImage · 840 KB
- budget-2027.xlsxSpreadsheet · 96 KB
A list of things
Three files are a list, so render ul and li. Screen readers announce "list, 3 items" and people know how much is coming.
A self-contained post
as="article" for content that still makes sense on its own, like a post or a comment. Its header and footer stay inside it and are not page landmarks.
Navigation landmark
as="nav" with an aria-label lets screen reader users jump straight to these links. Mark the current page with aria-current="page".
Search landmark
A form with role="search" becomes a landmark people can reach from anywhere. Name it when the page has more than one search.
Before the launch
- Freeze the changelog
- Run the migration on staging
- Tag version 2.4.0
- Announce it in #releases
Rendered as <ol>
Ordered or not
Switch it off and on. Steps that must happen in sequence are an ol; the numbers come from the browser and screen readers say "1 of 4".
Tip: Box adds no padding or color. Give it tokens in style or a class, and it follows the skin like the rest of the page.
Spacing and color from tokens
Box has no padding or background props. Style it with var(--cml-…) tokens and it changes with the skin, like the components around it.
In context
These are whole pieces of UI you can copy, in the skin you picked.
Settings formBox · Heading · Switch · Button
Team updates
We moved the São Paulo office
From Monday, 11/09, the team works from Rua Augusta, 1500. Parking is on the second basement level.
Q4 planning is open
Add your proposals to the board by Friday, 11/13. We vote on the 18th.
Team updates feedBox · Badge · Avatar · Separator
Site footerBox · Grid · Link · Separator
Guidelines
- contract-signed.pdf
- floor-plan.png
- budget-2027.xlsx
DoA list rendered as a list.
Screen readers count the items and let people skip the whole group.
contract-signed.pdffloor-plan.pngbudget-2027.xlsx
Don’tItems in a row of divs.
It looks the same, but a screen reader hears three loose words with no hint that they belong together.
Donav for links to other pages.
People who jump between landmarks expect to find the site's or the section's navigation there.
Don’tnav around filter buttons.
Filters change the list on this page; they are not navigation. A plain group (or a Toolbar) keeps the landmark list short and honest.
Props
PropTypeDefaultDescription
as"div" | "section" | "article" | "nav" | "ul" | "li" | …"div"Element to render, for the right semantics (e.g.
as="ul").as takes div, section, article, main, aside, header, footer, nav, ul, ol, li, span, form and figure. Every other prop goes to that element, so aria-*, role, id and event handlers work as usual.
Styling hooks
Box draws nothing, so the hook is the attribute: style it from a parent or a class.
Attributes
data-slot"box"
Tokens it reads
/* a quiet panel for every Box section in the settings page */
.settings [data-slot="box"]:where(section) {
padding: var(--cml-surface-padding);
border-radius: var(--cml-radius-surface);
background: var(--cml-surface);
}Accessibility
—Box renders no interactive element. Focus moves through its children in DOM order.
- Pick the tag from the content: a section with a heading, an article, a list. The tag is what screen readers announce; the look comes from CSS.
- A section becomes a region landmark only when it has a name, so pass aria-labelledby with the id of its heading.
- main, header and footer are page landmarks only at the top level. Use main once per page, and don't put it inside the docs or app shell that already has one.
- Layout never carries meaning by itself: if two items are related, say so in the markup (a list, a heading), not only with space or position.
Related
StackA column or row with a gap from the spacing scale.GridColumns that line up, or as many as fit.CardA surface with a header, content and footer.
Was this page helpful? · Edit this page on GitHub