Camaleo
EN · PTGitHub
// preview in
saved for every page

Container

Centres a page's content and caps its width, with padding at the sides so text never touches the edge of a phone. Four sizes, from a 40rem reading column to an 80rem dashboard.

Pattern CSS max-inline-size + margin-inline: autoServer componentSource ↗
minimal · light · #3fa34d

Order history

Every order from the last 12 months, with invoices you can download.

size

Installation

Set up Camaleo once (Installation), then import it. It has no state, so it renders on the server.

import { Container } from "@camaleo/react";

Anatomy

One element. The size arrives as the --cml-container-max custom property, so your own CSS can still change it.

Examples

Every example is a real file you can copy. The bordered box in each one stands for the browser window; widen and narrow your own window to see the column follow.

minimal · light · #3fa34d

Guides · 03/14/2026 · 6 min read

How we cut our delivery time to two days

Last year a coffee order took five days to reach São Paulo. We moved roasting to Monday and Thursday, printed labels the night before and shipped from a second warehouse in Campinas. Here is what changed, week by week.

sm · 40rem (640px): forms, articles, sign-in.

Four sizes

Pick a size. The drawing is a 1440 px screen shrunk to fit, so you see the real proportions: sm for reading and forms, lg (the default) for most pages, xl for tables.

Brewing with a pour-over

Rinse the paper filter with hot water, then discard it. Add 15 g of medium-fine coffee, pour 30 ml of water at 94 °C and wait 30 seconds while it blooms. Pour the rest in slow circles until you reach 250 ml, about two and a half minutes in total.

Reading width

Long text reads best at 60–75 characters a line. Set --cml-container-max: 65ch and the column follows the font, not the screen.

New this month

Subscribe and save 15%

Fresh beans every two weeks, roasted the day they ship. Pause or cancel whenever you want.

Full-bleed section

Put the background on an outer section and the Container inside it: the colour runs edge to edge, the text stays in line with the rest of the page.

Order #4821

Out for delivery. Arrives today between 2 and 4 PM.

padding-inline: 1rem

Padding on phones

Turn on the wider gutter. Below its maximum, the column fills the screen but keeps 1rem at each side; change --cml-container-padding for more air.

Create your account

It takes a minute. No card needed for the 14-day trial.

A narrow form

A sign-up form doesn't need the page's width. size="sm" keeps every label, field and the button within one glance.

Acme Store

Your orders

3 orders this month · $186.40 in total

© 2026 Acme Store

As a landmark

Container is a plain div. Pass as="main", as="article" or as="section" with a label, so screen reader users can jump straight to the column.

In context

Containers frame whole pages. These are pieces you can copy, in the skin you picked.

BlogRoasting

Light or dark roast: what really changes in the cup

Ana Ribeiro · 03/14/2026 · 6 min read

Hills at sunset over a coffee farm in Minas Gerais

Roast level changes acidity more than caffeine. A light roast keeps the fruit notes of the farm; a dark roast trades them for chocolate and caramel.

If you brew with a pour-over, start light. For espresso with milk, a medium-dark roast holds up better.

Blog articleContainer · Heading · Text · Image · Badge
Free shipping over $50

Specialty coffee, roasted to order

Beans from 14 small farms, roasted on Monday and Thursday and at your door two days later.

  • Roasted to order

    Never more than 3 days off the roaster.

  • Traceable

    Farm, altitude and harvest on every bag.

  • Flexible plan

    Skip, pause or cancel in one click.

Landing page sectionContainer · Grid · Badge · Button
Billbox

Account settings

These details appear on your invoices.

Profile

Settings pageContainer · Card · Field · Switch · Button

Guidelines

DoColour on the section, content in the container.

The band reaches both edges on any screen, and its text lines up with the page.

Don’tA background on the container itself.

On wide screens the colour stops at the column and looks like a misplaced card.

DoA narrow column for long text.

Short lines let the eye find the start of the next one.

Don’tArticles across an xl column.

Lines of 150 characters are tiring, and readers lose their place.

Props

PropTypeDefaultDescription
asTag"div"Element to render, for the right semantics (e.g. as="ul").
size"lg" | "md" | "sm" | "xl""lg"Maximum width: sm 40rem (forms, articles), md 48rem (settings), lg 64rem (most pages), xl 80rem (dashboards, wide tables). Below it, the container fills the width.

Every attribute of the rendered element passes through, like id, aria-labelledby or style. Don't nest containers: the padding adds up on phones.

Styling hooks

Restyle it without forking: set the custom properties on the container, on a parent or in a skin.

Attributes

data-slot"container"
--cml-container-max40rem · 48rem · 64rem · 80rem, from size
--cml-container-paddinginline padding, 1rem by default

Tokens it reads

This component only

--cml-container-max--cml-container-padding--cml-space
/* a roomier gutter on tablets and up */
@media (min-width: 48rem) {
  [data-slot="container"] {
    --cml-container-padding: 2rem;
  }
}

Accessibility

—Container isn't interactive and takes no focus. Tab goes straight to the links and fields inside it.
TypographyHeadings and text for what goes inside the column.CardA surface for one group of content inside the page.AspectRatioMedia that keeps its shape at any column width.
Was this page helpful? · Edit this page on GitHub