One source of truth
Each block has one canonical example, while shared markup lives in reusable patterns.
Caledon design system
A portable library of content blocks and reusable patterns
Caledon provides framework-independent HTML, agnostic Sass and focused JavaScript behaviour for building consistent content experiences. Site-specific navigation, headers, footers and other shell components stay outside the library.
Explore content blocksProject agnostic
Nested BEM styles, tokens, themes and layout utilities remain portable between builds.
Lightweight workflow
New HTML files are discovered automatically with no stories or registration files.
Foundations
A responsive 12-column grid
Use .grid as the parent, then set column span with
.col-* utilities. From the small breakpoint upwards,
the layout becomes a CSS grid; below it, items stack naturally.
123456789101112
Column and start utilities
.col-1to.col-12- Sets the number of columns an item spans.
.start-1to.start-11- Sets an explicit starting column.
-
.col-sm-*,.col-md-*,.col-lg-* - Changes column span at a named breakpoint.
.grid--gap-m,.grid--gap-l- Applies the medium or large responsive grid gap.
<div class="grid grid--gap-l">
<div class="col-12 col-md-8">Main content</div>
<div class="col-12 col-md-4">Supporting content</div>
</div>Breakpoints
| Name | Minimum width | Prefix |
|---|---|---|
| Extra small | 33.75em | xs |
| Small | 48em | sm |
| Medium | 64em | md |
| Large | 80em | lg |
Typeface
Plus Jakarta Sans
Plus Jakarta Sans is bundled locally in regular, medium, semibold and bold weights. Both heading and body stacks use the same family by default.