Components · Content
Container (legacy)
A bordered surface holding a titled block of content. Marked legacy in the Figma file — still in production, but not the first thing to reach for in new work.
Figma source: Container (Legacy) ↗Legacy status
The Figma page is named “Container (Legacy)”. The component still exists and is still in the product, so it is documented here in full, but the name signals that it is on the way out. Newer layouts use Tiles for summary content and plain sections with a Divider for grouping.
Before using it in something new, confirm with the design team what replaces it. What the file does not record is why it was deprecated or what supersedes it — worth capturing in the component description while the reason is still known.
Examples
Total direct costs across three budget periods.
$412,000
<div class="cds-container">
<div class="cds-container__header">Budget summary</div>
<div class="cds-container__body">…</div>
</div>Figma properties
| Property | Values | Notes |
|---|---|---|
Content Area Slot | slot | Any component or frame can be dropped in. Build product-specific content as its own Figma component and swap it into the slot. |
Usage
When to use it
- Use to group related content under a title where the boundary genuinely helps.
- Keep one subject per container.
- Use the Section Heading style for the container header.
When not to use it
- Do not nest containers — the borders compound into visual noise.
- Do not use a container where a heading and a divider would do.
- Do not use it as a page-level wrapper.
- Do not reach for it in new work without checking what supersedes it.
Tokens consumed
| Token | Applied to | Resolves to |
|---|---|---|
--container-background | Surface | --color-white |
--container-border | Border | --color-gray-300 |
--container-text | Text | --color-black |
--container-highlight | Emphasis within the container | --primary-brand-color |