Patterns

Practical composition patterns for unitone-css.

Use this page as a reference when a layout can be solved by combining multiple primitives, and when you want to avoid unnecessary custom CSS, ad-hoc utility classes, or direct overrides on primitives.

For screenshot-to-code work, do not start by copying the nearest-looking example blindly. First identify the structural pattern, then choose the closest section below.

How To Read This Page

Use this order before jumping into a specific example:

Decide the dominant relationship: stack, split, grid, layer, or float
Decide which primitive should own width: usually Container, Center, Cover, Layers, or Text
Decide which primitive should own section spacing: usually Gutters for the basic section padding
Decide whether overlap is real: if yes, inspect Layers patterns before spacing-based alternatives
Decide the repeated unit: rows, cards, chips, buttons, media tiles, or prose blocks

In most sectioned pages:

Container owns width
Gutters owns the basic section inset and block padding
Stack owns explicit relationships between items inside a section

Do not add a page-level Stack only to recreate the default spacing between sections when each section already has Gutters.

Quick Pattern Map

Use these mappings as a fast index into this page.

Visual pattern	Start here	Compare with
Centered hero	`Page Hero`	`Layered Hero`
Hero with actions	`Hero With Action Buttons`	`Centered CTA Section`
News or announcement rows	`Announcement List`	`Sidebar Layout`
Repeated cards	`Card Grid`	`Feature List`
Header with left and right actions	`Header Bar`	`Button Group`
Large two-column split that collapses to one column	`Split Media And Text`	`Sidebar Layout`
Cards with aligned media ratios	`Card Grid With Uniform Media`	`Card Grid`
Title and supporting text in a centered section	`Centered Title Section`	`Text Content Block`
Title plus actions in a centered section	`Centered CTA Section`	`Hero With Action Buttons`
Article intro	`Article Header`	`Text Content Block`
Long-form readable content	`Text Content Block`	`Article Header`
Form label + field row	`Form Row`	`Sidebar Layout`
Horizontal action set	`Button Group`	`Badge / Label Cluster`
Wrapping badges or tags	`Badge / Label Cluster`	`Button Group`
Horizontally scrollable items without wrapping	`Horizontal Reel`	`Badge / Label Cluster`
Decorated surface around another primitive	`Decorated Surface Block`	`Centered CTA Section`
Decorative background behind content	`Section With Decorative Background`	`Layered Hero`
Real overlap with background media	`Layered Hero`	`Section With Decorative Background`

Selection Notes

`BothSides` vs `WithSidebar`

Use BothSides when both sides are peers. Use WithSidebar when one side is clearly secondary, such as metadata, labels, or supporting media.

`Cover` vs `Layers`

Use Cover when the structure is mainly vertical distribution. Use Layers when overlap itself is part of the composition.

`ResponsiveGrid` vs `Switcher`

Use ResponsiveGrid when repeated cards are the main pattern. Use Switcher when a small set of larger items primarily needs split-to-stack behavior.

`Text` as width owner

Text is not a neutral wrapper. Use it when readable measure is intended, not by default for heroes or wide panels.

`Gutters` vs page-level `Stack`

Use Gutters as the default owner of a section’s basic padding. Use a page-level Stack only when the relationship between whole sections needs to be expressed explicitly, not as a substitute for ordinary section spacing.

Page Hero

A first-view section with a large headline, supporting text, and enough surrounding space to establish visual hierarchy.

Clouds floated across the sky.

Moonlight drifted through the clouds and softened the quiet trees.


<div data-unitone-layout="cover -padding:0" style="--unitone--min-height: max(100svh, 667px)">
	<div data-unitone-layout="cover__content -valign:center">
		<div data-unitone-layout="container">
			<div data-unitone-layout="stack -gap:3">
				<div data-unitone-layout="center">
					<h2 data-unitone-layout="-fluid-typography" class="-font-size:4xl -font-weight:bold" >Clouds floated across the sky.</h2>
				</div>
 
				<div data-unitone-layout="center">
					<p data-unitone-layout="-fluid-typography" class="-font-size:xl">Moonlight drifted through the clouds and softened the quiet trees.</p>
				</div>
			</div>
		</div>
	</div>
</div>


import { Cover, CoverContent } from '@inc2734/unitone-css/layout-primitives/cover/react';
import { Container } from '@inc2734/unitone-css/layout-primitives/container/react';
import { Stack } from '@inc2734/unitone-css/layout-primitives/stack/react';
import { Center } from '@inc2734/unitone-css/layout-primitives/center/react';
 
<Cover minHeight="max(100svh, 667px)" padding="0">
	<CoverContent valign="center">
		<Container>
			<Stack gap="3">
				<Center>
					<h2 data-unitone-layout="-fluid-typography" className="-font-size:4xl -font-weight:bold">Clouds floated across the sky.</h2>
				</Center>
 
				<Center>
					<p data-unitone-layout="-fluid-typography" className="-font-size:xl">Moonlight drifted through the clouds and softened the quiet trees.</p>
				</Center>
			</Stack>
		</Container>
	</CoverContent>
</Cover>

Hero With Action Buttons

A hero block that places one or more call-to-action buttons below the main copy while keeping the text flow readable on small screens.

Clouds floated across the sky.

Moonlight drifted through the clouds and softened the quiet trees.

Download now

Try it online


<div data-unitone-layout="cover -padding:0" style="--unitone--min-height: max(100svh, 667px)">
	<div data-unitone-layout="cover__content -valign:center">
		<div data-unitone-layout="container">
			<div data-unitone-layout="stack -gap:3">
				<div data-unitone-layout="center">
					<h2 data-unitone-layout="-fluid-typography" class="-font-size:4xl -font-weight:bold">Clouds floated across the sky.</h2>
				</div>
 
				<div data-unitone-layout="center">
					<p data-unitone-layout="-fluid-typography" class="-font-size:xl">Moonlight drifted through the clouds and softened the quiet trees.</p>
				</div>
 
				<div data-unitone-layout="center">
					<div data-unitone-layout="cluster">
						<div>
							<a href="#" class="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1" style="width: 100%"><strong>Download now</strong></a>
						</div>
						<div>
							<a href="#" class="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1" style="width: 100%"><strong>Try it online</strong></a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


import { Cover, CoverContent } from '@inc2734/unitone-css/layout-primitives/cover/react';
import { Container } from '@inc2734/unitone-css/layout-primitives/container/react';
import { Stack } from '@inc2734/unitone-css/layout-primitives/stack/react';
import { Center } from '@inc2734/unitone-css/layout-primitives/center/react';
import { Cluster } from '@inc2734/unitone-css/layout-primitives/cluster/react';
 
<Cover minHeight="max(100svh, 667px)" padding="0">
	<CoverContent valign="center">
		<Container>
			<Stack gap="3">
				<Center>
					<h2 data-unitone-layout="-fluid-typography" className="-font-size:4xl -font-weight:bold">Clouds floated across the sky.</h2>
				</Center>
 
				<Center>
					<p data-unitone-layout="-fluid-typography" className="-font-size:xl">Moonlight drifted through the clouds and softened the quiet trees.</p>
				</Center>
 
				<Center>
					<Cluster>
						<div>
							<a href="#" className="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1" style={{width: '100%'}}><strong>Download now</strong></a>
						</div>
						<div>
							<a href="#" className="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1" style={{width: '100%'}}><strong>Try it online</strong></a>
						</div>
					</Cluster>
				</Center>
			</Stack>
		</Container>
	</CoverContent>
</Cover>

Announcement List

A section with a heading and a vertical list of updates, where each item usually contains metadata such as a date and a short release note or title.

News

April 17, 2026

Lorem ipsum dolor sit amet

April 17, 2026

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

April 17, 2026

Ut enim ad minim veniam, quis nostrud exercitation


<div data-unitone-layout="decorator">
	<div data-unitone-layout="gutters">
		<div data-unitone-layout="container">
			<div data-unitone-layout="stack">
				<div data-unitone-layout="center" style="--unitone--maxWidth: 100%">
					<h2 data-unitone-layout="-fluid-typography" class="-font-size:3xl -font-weight:bold" >Lorem ipsum dolor sit amet</h2>
				</div>
 
				<div data-unitone-layout="stack -gap:-1">
					<div data-unitone-layout="with-sidebar -row-gap:-2 -sidebar:left">
						<div class="-font-size:s">April 17, 2026</div>
						<div>Lorem ipsum dolor sit amet</div>
					</div>
					<div data-unitone-layout="with-sidebar -row-gap:-2 -sidebar:left">
						<div class="-font-size:s">April 17, 2026</div>
						<div>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
					</div>
					<div data-unitone-layout="with-sidebar -row-gap:-2 -sidebar:left">
						<div class="-font-size:s">April 17, 2026</div>
						<div>Ut enim ad minim veniam, quis nostrud exercitation</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


import { Decorator } from '@inc2734/unitone-css/layout-primitives/decorator/react';
import { Gutters } from '@inc2734/unitone-css/layout-primitives/gutters/react';
import { Container } from '@inc2734/unitone-css/layout-primitives/container/react';
import { Stack } from '@inc2734/unitone-css/layout-primitives/stack/react';
import { Center } from '@inc2734/unitone-css/layout-primitives/center/react';
import { Text } from '@inc2734/unitone-css/layout-primitives/text/react';
import { WithSidebar } from '@inc2734/unitone-css/layout-primitives/with-sidebar/react';
 
<Decorator>
	<Gutters>
		<Container>
			<Stack>
				<Center maxWidth="100%">
					<h2 data-unitone-layout="-fluid-typography" className="-font-size:3xl -font-weight:bold">News</h2>
				</Center>
 
				<Stack gap="-1">
					<WithSidebar sidebar="left" rowGap="-2">
						<div className="-font-size:s">April 17, 2026</div>
						<div>Lorem ipsum dolor sit amet</div>
					</WithSidebar>
					<WithSidebar sidebar="left" rowGap="-2">
						<div className="-font-size:s">April 17, 2026</div>
						<div>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
					</WithSidebar>
					<WithSidebar sidebar="left" rowGap="-2">
						<div className="-font-size:s">April 17, 2026</div>
						<div>Ut enim ad minim veniam, quis nostrud exercitation</div>
					</WithSidebar>
				</Stack>
			</Stack>
		</Container>
	</Gutters>
</Decorator>

Header Bar

A compact top bar that places two elements at opposite ends, such as a logo on the left and a menu button on the right.

Use this pattern when the main requirement is to keep two items pulled apart with a clear start and end relationship, rather than building a sidebar-like split.

Logo


<div data-unitone-layout="both-sides -align-items:center">
	<div>
		Logo
	</div>
	<div>
		<button class="-display:flex -flex-direction:column -justify-content:space-between" style="height: 1rem; width: 1rem;">
			<span class="-display:block -background-color:text" style="height: 1px"></span>
			<span class="-display:block -background-color:text" style="height: 1px"></span>
			<span class="-display:block -background-color:text" style="height: 1px"></span>
		</button>
	</div>
</div>


import { BothSides } from '@inc2734/unitone-css/layout-primitives/both-sides/react';
 
<BothSides alignItems="center">
	<div>
		Logo
	</div>
	<div>
		<button className="-display:flex -flex-direction:column -justify-content:space-between" style={{height: '1rem', width: '1rem'}}>
			<span className="-display:block -background-color:text" style={{height: '1px'}}></span>
			<span className="-display:block -background-color:text" style={{height: '1px'}}></span>
			<span className="-display:block -background-color:text" style={{height: '1px'}}></span>
		</button>
	</div>
</BothSides>

Split Media And Text

A large two-column composition where media and text sit side by side with similar visual weight, then collapse to a single column on smaller screens.

Use this pattern when both sides should feel like major sections of the layout, such as an image on one side and explanatory copy on the other.

Sand and Stars

Stars fell over the silent desert. The wind lifted grains of sand, making them shimmer like tiny lights. The moon cast its glow, stretching far into the distance.

In the quiet night, only the sand and stars remained, patiently marking time.


<div data-unitone-layout="switcher -align-items:center">
	<div>
		<div data-unitone-layout="-frame" style="--unitone--ratio: 3/4">
			<img src="..." alt="" />
		</div>
	</div>
	<div>
		<div data-unitone-layout="text -gap">
			<h2>Sand and Stars</h2>
			<p>Stars fell over the silent desert. The wind lifted grains of sand, making them shimmer like tiny lights. The moon cast its glow, stretching far into the distance.</p>
			<p>In the quiet night, only the sand and stars remained, patiently marking time.</p>
		</div>
	</div>
</div>


import { Switcher } from '@inc2734/unitone-css/layout-primitives/switcher/react';
import { Frame } from '@inc2734/unitone-css/layout-primitives/frame/react';
 
<Switcher alignItems="center">
	<div>
		<Frame ratio="3/4">
			<img src="..." alt="" />
		</Frame>
	</div>
	<div>
		<Text applyGap>
			<h2>Sand and Stars</h2>
			<p>Stars fell over the silent desert. The wind lifted grains of sand, making them shimmer like tiny lights. The moon cast its glow, stretching far into the distance.</p>
			<p>In the quiet night, only the sand and stars remained, patiently marking time.</p>
		</div>
	</Text>
</Switcher>

Card Grid

A collection of repeated cards that wrap into responsive columns without relying on media-query-specific breakpoint layouts.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


<div data-unitone-layout="responsive-grid">
	<div data-unitone-layout="stack -gap:-1">
		<h3 class="-font-size:l -font-weight:bold">Lorem ipsum dolor sit amet</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</div>
	<div data-unitone-layout="stack -gap:-1">
		<h3 class="-font-size:l -font-weight:bold">Lorem ipsum dolor sit amet</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</div>
	<div data-unitone-layout="stack -gap:-1">
		<h3 class="-font-size:l -font-weight:bold">Lorem ipsum dolor sit amet</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</div>
</div>


import { ResponsiveGrid } from '@inc2734/unitone-css/layout-primitives/responsive-grid/react';
import { Stack } from '@inc2734/unitone-css/layout-primitives/stack/react';
 
<ResponsiveGrid>
	<Stack gap="-1">
		<h3 className="-font-size:l -font-weight:bold">Lorem ipsum dolor sit amet</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</Stack>
	<Stack gap="-1">
		<h3 className="-font-size:l -font-weight:bold">Lorem ipsum dolor sit amet</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</Stack>
	<Stack gap="-1">
		<h3 className="-font-size:l -font-weight:bold">Lorem ipsum dolor sit amet</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</Stack>
</ResponsiveGrid>

Card Grid With Uniform Media

A repeated card grid where each card includes an image or video that should maintain a consistent aspect ratio across the set.

Use this pattern when media alignment is part of the visual rhythm, such as article cards, product cards, or gallery-like listings.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


<div data-unitone-layout="responsive-grid">
	<div data-unitone-layout="stack -gap:-1">
		<div data-unitone-layout="frame" style="--unitone--ratio: 4/3">
			<img src="..." alt="" />
		</div>
		<h3 class="-font-size:l -font-weight:bold">Lorem ipsum dolor sit amet</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</div>
	<div data-unitone-layout="stack -gap:-1">
		<div data-unitone-layout="frame" style="--unitone--ratio: 4/3">
			<img src="..." alt="" />
		</div>
		<h3 class="-font-size:l -font-weight:bold">Lorem ipsum dolor sit amet</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</div>
	<div data-unitone-layout="stack -gap:-1">
		<div data-unitone-layout="frame" style="--unitone--ratio: 4/3">
			<img src="..." alt="" />
		</div>
		<h3 class="-font-size:l -font-weight:bold">Lorem ipsum dolor sit amet</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</div>
</div>


import { ResponsiveGrid } from '@inc2734/unitone-css/layout-primitives/responsive-grid/react';
import { Stack } from '@inc2734/unitone-css/layout-primitives/stack/react';
import { Frame } from '@inc2734/unitone-css/layout-primitives/frame/react';
 
<ResponsiveGrid>
	<Stack gap="-1">
		<Frame ratio="4/3">
			<img src="..." alt="" />
		</Frame>
		<h3 className="-font-size:l -font-weight:bold">Lorem ipsum dolor sit amet</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</Stack>
	<Stack gap="-1">
		<Frame ratio="4/3">
			<img src="..." alt="" />
		</Frame>
		<h3 className="-font-size:l -font-weight:bold">Lorem ipsum dolor sit amet</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</Stack>
	<Stack gap="-1">
		<Frame ratio="4/3">
			<img src="..." alt="" />
		</Frame>
		<h3 className="-font-size:l -font-weight:bold">Lorem ipsum dolor sit amet</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</Stack>
</ResponsiveGrid>

Feature List

A vertical or grid-based list of short feature descriptions, often combining a small heading, supporting text, and optional icon-like decoration.

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


<div data-unitone-layout="responsive-grid">
	<div data-unitone-layout="stack -gap:-1">
		<div data-unitone-layout="with-sidebar -gap:-2 -sidebar:left">
			<div style="margin-top: calc((1lh - 1.3em) / 2)">
				<svg>...</svg>
			</div>
			<h3 className="-font-size:l -font-weight:bold">Lorem ipsum dolor sit</h3>
		</div>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</div>
	<div data-unitone-layout="stack -gap:-1">
		<div data-unitone-layout="with-sidebar -gap:-2 -sidebar:left">
			<div style="margin-top: calc((1lh - 1.3em) / 2)">
				<svg>...</svg>
			</div>
			<h3 className="-font-size:l -font-weight:bold">Lorem ipsum dolor sit</h3>
		</div>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</div>
</div>


import { ResponsiveGrid } from '@inc2734/unitone-css/layout-primitives/responsive-grid/react';
import { Stack } from '@inc2734/unitone-css/layout-primitives/stack/react';
import { WithSidebar } from '@inc2734/unitone-css/layout-primitives/with-sidebar/react';
 
<ResponsiveGrid>
	<Stack gap="-1">
		<WithSidebar gap="-2" sidebar="left">
			<div style={{marginTop: 'calc((1lh - 1.3em) / 2)'}}>
				<svg>...</svg>
			</div>
			<h3 className="-font-size:l -font-weight:bold">Lorem ipsum dolor sit</h3>
		</WithSidebar>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</Stack>
	<Stack gap="-1">
		<WithSidebar gap="-2" sidebar="left">
			<div style={{marginTop: 'calc((1lh - 1.3em) / 2)'}}>
				<svg>...</svg>
			</div>
			<h3 className="-font-size:l -font-weight:bold">Lorem ipsum dolor sit</h3>
		</WithSidebar>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</Stack>
</ResponsiveGrid>

Sidebar Layout

A layout where a narrow side column and a wider main column sit next to each other, while still collapsing naturally to one column when space is limited.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill


<div data-unitone-layout="with-sidebar -sidebar:left">
	<div>
		<ul>
			<li><a href="#">Item: A</a></li>
			<li><a href="#">Item: B</a></li>
			<li><a href="#">Item: C</a></li>
		</ul>
	</div>
	<div>
		<div data-unitone-layout="text -gap" style="--unitone--max-Width: 100%">
			<h2>Lorem ipsum dolor sit amet</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill</p>
		</div>
	</div>
</div>


import { WithSidebar } from '@inc2734/unitone-css/layout-primitives/with-sidebar/react';
import { Text } from '@inc2734/unitone-css/layout-primitives/text/react';
 
<WithSidebar sidebar="left">
	<div>
		<ul>
			<li><a href="#">Item: A</a></li>
			<li><a href="#">Item: B</a></li>
			<li><a href="#">Item: C</a></li>
		</ul>
	</div>
	<div>
		<Text applyGap maxWidth="100%">
			<h2>Lorem ipsum dolor sit amet</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill</p>
		</Text>
	</div>
</WithSidebar>

Centered Title Section

A centrally positioned title and a content area the width of a container. A simple section.

Lorem ipsum dolor sit amet


<div data-unitone-layout="decorator">
	<div data-unitone-layout="gutters">
		<div data-unitone-layout="container">
			<div data-unitone-layout="stack">
				<div data-unitone-layout="center" style="--unitone--maxWidth: 100%">
					<h2 data-unitone-layout="-fluid-typography" class="-font-size:3xl -font-weight:bold">Lorem ipsum dolor sit amet</h2>
				</div>
 
				<div data-unitone-layout="text -gap" style="--unitone--maxWidth: 100%">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill</p>
				</div>
			</div>
		</div>
	</div>
</div>


import { Decorator } from '@inc2734/unitone-css/layout-primitives/decorator/react';
import { Gutters } from '@inc2734/unitone-css/layout-primitives/gutters/react';
import { Container } from '@inc2734/unitone-css/layout-primitives/container/react';
import { Stack } from '@inc2734/unitone-css/layout-primitives/stack/react';
import { Center } from '@inc2734/unitone-css/layout-primitives/center/react';
import { Text } from '@inc2734/unitone-css/layout-primitives/text/react';
 
<Decorator>
	<Gutters>
		<Container>
			<Stack>
				<Center maxWidth="100%">
					<h2 data-unitone-layout="-fluid-typography" className="-font-size:3xl -font-weight:bold">Lorem ipsum dolor sit amet</h2>
				</Center>
 
				<Text applyGap maxWidth="100%">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill</p>
				</Text>
			</Stack>
		</Container>
	</Gutters>
</Decorator>

Centered CTA Section

A centered call-to-action area that emphasizes a short message and one or more actions inside a constrained content width.

Lorem ipsum dolor sit amet

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Download now

Try it online


<div data-unitone-layout="decorator">
	<div data-unitone-layout="gutters">
		<div data-unitone-layout="container">
			<div data-unitone-layout="stack">
				<div data-unitone-layout="center -with-text">
					<h2 data-unitone-layout="-fluid-typography" class="-font-size:5xl -font-weight:bold">Lorem ipsum dolor sit amet</h2>
				</div>
 
				<div data-unitone-layout="center">
					<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				</div>
 
				<div data-unitone-layout="center">
					<div data-unitone-layout="cluster">
						<div>
							<a href="#" class="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1" style="width: 100%"><strong>Download now</strong></a>
						</div>
						<div>
							<a href="#" class="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1" style="width: 100%"><strong>Try it online</strong></a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


import { Decorator } from '@inc2734/unitone-css/layout-primitives/decorator/react';
import { Gutters } from '@inc2734/unitone-css/layout-primitives/gutters/react';
import { Container } from '@inc2734/unitone-css/layout-primitives/container/react';
import { Stack } from '@inc2734/unitone-css/layout-primitives/stack/react';
import { Center } from '@inc2734/unitone-css/layout-primitives/center/react';
import { Cluster } from '@inc2734/unitone-css/layout-primitives/cluster/react';
 
<Decorator>
	<Gutters>
		<Container>
			<Stack>
				<Center withText>
					<h2 data-unitone-layout="-fluid-typography" className="-font-size:5xl -font-weight:bold">Lorem ipsum dolor sit amet</h2>
				</Center>
 
				<Center>
					<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				</Center>
 
				<Center>
					<Cluster>
						<div>
							<a href="#" className="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1" style={{width: '100%'}}><strong>Download now</strong></a>
						</div>
						<div>
							<a href="#" className="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1" style={{width: '100%'}}><strong>Try it online</strong></a>
						</div>
					</Cluster>
				</Center>
			</Stack>
		</Container>
	</Gutters>
</Decorator>

Article Header

A top section for an article or post that combines title, metadata, summary, and sometimes category or author information in a readable hierarchy.

Lorem ipsum dolor sit amet

Short summary line

inc2734

April 17, 2026

6min read


<div data-unitone-layout="decorator">
	<div data-unitone-layout="gutters -padding:2">
		<div data-unitone-layout="container">
			<div data-unitone-layout="stack -gap:1">
				<hgroup data-unitone-layout="stack -gap:-2">
					<h1 data-unitone-layout="-fluid-typography" class="-font-size:3xl -font-weight:bold">Lorem ipsum dolor sit amet</h1>
					<p class="-font-weight:bold">Short summary line</p>
				</hgroup>
 
				<div data-unitone-layout="cluster -gap:-1 -divider:slash">
					<div>inc2734</div>
					<div>April 17, 2026</div>
					<div>6min read</div>
				</div>
			</div>
		</div>
	</div>
</div>


import { Decorator } from '@inc2734/unitone-css/layout-primitives/decorator/react';
import { Gutters } from '@inc2734/unitone-css/layout-primitives/gutters/react';
import { Container } from '@inc2734/unitone-css/layout-primitives/container/react';
import { Stack } from '@inc2734/unitone-css/layout-primitives/stack/react';
import { Cluster } from '@inc2734/unitone-css/layout-primitives/cluster/react';
 
<Decorator>
	<Gutters padding="2">
		<Container>
			<Stack gap="1">
				<Stack tagName="hgroup" gap="-2">
					<h1 data-unitone-layout="-fluid-typography" className="-font-size:3xl -font-weight:bold">Lorem ipsum dolor sit amet</h1>
					<p className="-font-weight:bold">Short summary line</p>
				</Stack>
 
				<Cluster gap="-1" divider="slash">
					<div>inc2734</div>
					<div>April 17, 2026</div>
					<div>6min read</div>
				</Cluster>
			</Stack>
		</Container>
	</Gutters>
</Decorator>

Text Content Block

A readable body-content section for headings, paragraphs, lists, and other long-form text elements with consistent spacing between them.

Lorem ipsum dolor sit amet


<div data-unitone-layout="text -gap">
	<h2>Lorem ipsum dolor sit amet</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill</p>
</div>


import { Text } from '@inc2734/unitone-css/layout-primitives/text/react';
 
<Text applyGap>
	<h2>Lorem ipsum dolor sit amet</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill</p>
</Text>

Form Row

A row that aligns a label, input, helper text, or action in a way that remains usable when the layout narrows.

Name

Lorem ipsum dolor sit amet


<div data-unitone-layout="with-sidebar -sidebar:left">
	<div>Name</div>
	<div>
		<div data-unitone-layout="stack -gap:-2">
			<input type="text" class="-padding:-2" />
			<div class="-font-size:xs">Lorem ipsum dolor sit amet</div>
		</div>
	</div>
</div>


import { WithSidebar } from '@inc2734/unitone-css/layout-primitives/with-sidebar/react';
 
<WithSidebar sidebar="left">
	<div>Name</div>
	<div>
		<div data-unitone-layout="stack -gap:-2">
			<input type="text" className="-padding:-2" />
			<div className="-font-size:xs">Lorem ipsum dolor sit amet</div>
		</div>
	</div>
</WithSidebar>

Button Group

A horizontal set of related actions that can wrap cleanly and keep consistent spacing and alignment as the available width changes.

Download now

Try it online


<div data-unitone-layout="cluster">
	<div>
		<a href="#" class="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1" style="width: 100%"><strong>Download now</strong></a>
	</div>
	<div>
		<a href="#" class="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1" style="width: 100%"><strong>Try it online</strong></a>
	</div>
</div>


import { Cluster } from '@inc2734/unitone-css/layout-primitives/cluster/react';
 
<Cluster>
	<div>
		<a href="#" className="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1" style={{width: '100%'}}><strong>Download now</strong></a>
	</div>
	<div>
		<a href="#" className="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1" style={{width: '100%'}}><strong>Try it online</strong></a>
	</div>
</Cluster>

Badge / Label Cluster

A small group of badges, tags, or labels that should line up horizontally, wrap naturally, and remain visually balanced.

Item AItem BItem C


<div data-unitone-layout="cluster">
	<div>
		<a href="#" class="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-3 -padding-inline:-2" style="width: 100%"><strong>Download now</strong></a>
	</div>
	<div>
		<a href="#" class="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-3 -padding-inline:-2" style="width: 100%"><strong>Try it online</strong></a>
	</div>
</div>


import { Cluster } from '@inc2734/unitone-css/layout-primitives/cluster/react';
 
<Cluster>
	<div>
		<a href="#" className="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-3 -padding-inline:-2" style={{width: '100%'}}><strong>Download now</strong></a>
	</div>
	<div>
		<a href="#" className="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-3 -padding-inline:-2" style={{width: '100%'}}><strong>Try it online</strong></a>
	</div>
</Cluster>

Horizontal Reel

A row of items that should stay on one line and remain accessible by horizontal scrolling instead of wrapping.

Use this pattern when content would otherwise be clipped or awkwardly wrapped, such as logo rails, compact card sliders, chip lists, or narrow-screen control rows.


<div data-unitone-layout="reel -no-bar">
	<img src="..." alt="" />
	<img src="..." alt="" />
	<img src="..." alt="" />
	<img src="..." alt="" />
	<img src="..." alt="" />
</div>


import { Reel } from '@inc2734/unitone-css/layout-primitives/reel/react';
 
<Reel noBar>
	<img src="..." alt="" />
	<img src="..." alt="" />
	<img src="..." alt="" />
	<img src="..." alt="" />
	<img src="..." alt="" />
</Reel>

Use this pattern for larger card-like items too, not only simple images.

INTERVIEW

Lorem ipsum dolor sit amet

INTERVIEW

Consectetur adipisicing elit

INTERVIEW

Sed do eiusmod tempor


<div data-unitone-layout="reel -no-bar -gap:1" style="--unitone--item-width: min(28rem, 80vw)">
	<div data-unitone-layout="stack -gap:-1">
		<div data-unitone-layout="frame" style="--unitone--ratio: 16/9">
			<img src="..." alt="" />
		</div>
		<div data-unitone-layout="stack -gap:-3">
			<p class="-font-size:xs">INTERVIEW</p>
			<h3 class="-font-size:l -font-weight:bold">Lorem ipsum dolor sit amet</h3>
		</div>
	</div>
	<div data-unitone-layout="stack -gap:-1">
		<div data-unitone-layout="frame" style="--unitone--ratio: 16/9">
			<img src="..." alt="" />
		</div>
		<div data-unitone-layout="stack -gap:-3">
			<p class="-font-size:xs">INTERVIEW</p>
			<h3 class="-font-size:l -font-weight:bold">Consectetur adipisicing elit</h3>
		</div>
	</div>
	<div data-unitone-layout="stack -gap:-1">
		<div data-unitone-layout="frame" style="--unitone--ratio: 16/9">
			<img src="..." alt="" />
		</div>
		<div data-unitone-layout="stack -gap:-3">
			<p class="-font-size:xs">INTERVIEW</p>
			<h3 class="-font-size:l -font-weight:bold">Sed do eiusmod tempor</h3>
		</div>
	</div>
</div>


import { Reel } from '@inc2734/unitone-css/layout-primitives/reel/react';
import { Stack } from '@inc2734/unitone-css/layout-primitives/stack/react';
import { Frame } from '@inc2734/unitone-css/layout-primitives/frame/react';
 
<Reel noBar gap="1" itemWidth="min(28rem, 80vw)">
	<Stack gap="-1">
		<Frame ratio="16/9">
			<img src="..." alt="" />
		</Frame>
		<Stack gap="-3">
			<p className="-font-size:xs">INTERVIEW</p>
			<h3 className="-font-size:l -font-weight:bold">Lorem ipsum dolor sit amet</h3>
		</Stack>
	</Stack>
	<Stack gap="-1">
		<Frame ratio="16/9">
			<img src="..." alt="" />
		</Frame>
		<Stack gap="-3">
			<p className="-font-size:xs">INTERVIEW</p>
			<h3 className="-font-size:l -font-weight:bold">Consectetur adipisicing elit</h3>
		</Stack>
	</Stack>
	<Stack gap="-1">
		<Frame ratio="16/9">
			<img src="..." alt="" />
		</Frame>
		<Stack gap="-3">
			<p className="-font-size:xs">INTERVIEW</p>
			<h3 className="-font-size:l -font-weight:bold">Sed do eiusmod tempor</h3>
		</Stack>
	</Stack>
</Reel>

INTERVIEW

Lorem ipsum dolor sit amet

INTERVIEW

Consectetur adipisicing elit

INTERVIEW

Sed do eiusmod tempor


<div data-unitone-layout="reel -no-bar -gap:1" style="--unitone--item-width: min(28rem, 80vw)">
	<div data-unitone-layout="layers -fill">
		<div data-unitone-layout="frame" style="--unitone--ratio: 16/9">
			<img src="..." alt="" />
		</div>
 
		<div data-unitone-layout="align-self:end">
			<div data-unitone-layout="decorator -gap:-3 -padding:-1" style="color: var(--unitone--color--white)">
				<p class="-font-size:xs">INTERVIEW</p>
				<h3 class="-font-size:xl -font-weight:bold">Lorem ipsum dolor sit amet</h3>
			</div>
		</div>
	</div>
	<div data-unitone-layout="layers -fill">
		<div data-unitone-layout="frame" style="--unitone--ratio: 16/9">
			<img src="..." alt="" />
		</div>
 
		<div data-unitone-layout="align-self:end">
			<div data-unitone-layout="decorator -gap:-3 -padding:-1" style="color: var(--unitone--color--white)">
				<p class="-font-size:xs">INTERVIEW</p>
				<h3 class="-font-size:xl -font-weight:bold">Consectetur adipisicing elit</h3>
			</div>
		</div>
	</div>
	<div data-unitone-layout="layers -fill">
		<div data-unitone-layout="frame" style="--unitone--ratio: 16/9">
			<img src="..." alt="" />
		</div>
 
		<div data-unitone-layout="align-self:end">
			<div data-unitone-layout="decorator -gap:-3 -padding:-1" style="color: var(--unitone--color--white)">
				<p class="-font-size:xs">INTERVIEW</p>
				<h3 class="-font-size:xl -font-weight:bold">Sed do eiusmod tempor</h3>
			</div>
		</div>
	</div>
</div>


import { Reel } from '@inc2734/unitone-css/layout-primitives/reel/react';
import { Layers, Layer } from '@inc2734/unitone-css/layout-primitives/layers/react';
import { Frame } from '@inc2734/unitone-css/layout-primitives/frame/react';
import { Decorator } from '@inc2734/unitone-css/layout-primitives/decorator/react';
 
<Reel noBar gap="1" itemWidth="min(28rem, 80vw)">
	<Layers fill>
		<Frame ratio="16/9">
			<img src="..." alt="" />
		</Frame>
 
		<Layer alignSelf="end">
			<Decorator color="var(--unitone--color--white)" gap="-3" padding="-1">
				<p className="-font-size:xs">INTERVIEW</p>
				<h3 className="-font-size:xl -font-weight:bold">Lorem ipsum dolor sit amet</h3>
			</Decorator>
		</Layer>
	</Layers>
	<Layers fill>
		<Frame ratio="16/9">
			<img src="..." alt="" />
		</Frame>
 
		<Layer alignSelf="end">
			<Decorator color="var(--unitone--color--white)" gap="-3" padding="-1">
				<p className="-font-size:xs">INTERVIEW</p>
				<h3 className="-font-size:xl -font-weight:bold">Consectetur adipisicing elit</h3>
			</Decorator>
		</Layer>
	</Layers>
	<Layers fill>
		<Frame ratio="16/9">
			<img src="..." alt="" />
		</Frame>
 
		<Layer alignSelf="end">
			<Decorator color="var(--unitone--color--white)" gap="-3" padding="-1">
				<p className="-font-size:xs">INTERVIEW</p>
				<h3 className="-font-size:xl -font-weight:bold">Sed do eiusmod tempor</h3>
			</Decorator>
		</Layer>
	</Layers>
</Reel>

Decorated Surface Block

A block where one primitive handles structure and Decorator provides the visual surface, such as padding, background, border radius, border, or shadow.

Use this pattern when you want to style a section, card, callout, or panel without weakening the meaning of the underlying primitive composition.

Lorem ipsum dolor sit amet

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Download now

Try it online


<div data-unitone-layout="decorator" style="--unitone--background-color: var(--unitone--color--background-alt); --unitone--color: var(--unitone--color--text-alt); --unitone--border-radius: var(--unitone--global--border-radius) --unitone--padding: var(--unitone--p1s)">
	<div data-unitone-layout="stack">
		<div data-unitone-layout="center -with-text">
			<h2 data-unitone-layout="-fluid-typography" class="-font-size:5xl -font-weight:bold">Lorem ipsum dolor sit amet</h2>
		</div>
 
		<div data-unitone-layout="center">
			<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		</div>
 
		<div data-unitone-layout="center">
			<div data-unitone-layout="cluster">
				<div>
					<a href="#" class="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1" style="width: 100%"><strong>Download now</strong></a>
				</div>
				<div>
					<a href="#" class="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1" style="width: 100%"><strong>Try it online</strong></a>
				</div>
			</div>
		</div>
	</div>
</div>


import { Decorator } from '@inc2734/unitone-css/layout-primitives/decorator/react';
import { Stack } from '@inc2734/unitone-css/layout-primitives/stack/react';
import { Center } from '@inc2734/unitone-css/layout-primitives/center/react';
import { Cluster } from '@inc2734/unitone-css/layout-primitives/cluster/react';
 
<Decorator backgroundColor="var(--unitone--color--background-alt)" color="var(--unitone--color--text-alt)" borderRadius="var(--unitone--global--border-radius)" padding="1s">
	<Stack>
		<Center withText>
			<h2 data-unitone-layout="-fluid-typography" className="-font-size:3xl -font-weight:bold">Lorem ipsum dolor sit amet</h2>
		</Center>
 
		<Center>
			<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		</Center>
 
		<Center>
			<Cluster>
				<div>
					<a href="#" className="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1" style={{width: '100%'}}><strong>Download now</strong></a>
				</div>
				<div>
					<a href="#" className="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1" style={{width: '100%'}}><strong>Try it online</strong></a>
				</div>
			</Cluster>
		</Center>
	</Stack>
</Decorator>

Dialog Content Layout

An internal dialog structure that separates heading, body, and actions so modal content remains readable and easy to scan.


<div data-unitone-layout="dialog">
	<div data-unitone-layout="dialog-trigger">
		<button command="show-modal" commandfor="dialog-example-content" className="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1">
			Open dialog
		</button>
	</div>
	<dialog
		id="dialog-example-content"
		data-unitone-layout="dialog-content"
		closedby="any"
	>
		<div data-unitone-layout="decorator -gap:1 -padding:1s" style="--unitone--background--color: var(--unitone--color--background)">
			<div data-unitone-layout="stack">
				<h2 data-unitone-layout="-fluid-typography" class="-font-size:xl -font-weight:bold">Lorem ipsum dolor sit amet</h2>
				<p>The content of the Dialog.</p>
				<div>
					<button command="request-close" commandfor="dialog-example-content" class="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1">
						Close
					</button>
				</div>
			</div>
		</div>
	</dialog>
</div>


import {
	Dialog,
	DialogTrigger,
	DialogContent,
} from '@inc2734/unitone-css/layout-primitives/dialog/react';
 
import { Decorator } from '@inc2734/unitone-css/layout-primitives/decorator/react';
import { Stack } from '@inc2734/unitone-css/layout-primitives/stack/react';
 
<Dialog>
	<DialogTrigger>
		<button command="show-modal" commandfor="dialog-example-content" className="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1">
			Open dialog
		</button>
	</DialogTrigger>
	<DialogContent id="dialog-example-content">
		<Decorator backgroundColor="var(--unitone--color--background)" gap="1" padding="1s">
			<Stack>
				<h2 data-unitone-layout="-fluid-typography" className="-font-size:xl -font-weight:bold">Lorem ipsum dolor sit amet</h2>
				<p>The content of the Dialog.</p>
				<div>
					<button command="request-close" commandfor="dialog-example-content" className="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1">
						Close
					</button>
				</div>
			</Stack>
		</Decorator>
	</DialogContent>
</Dialog>

A compact floating panel layout for short navigation, metadata, or actions where spacing and grouping matter more than large-scale composition.


<div data-unitone-layout="popover">
	<div data-unitone-layout="popover-trigger">
		<button popovertarget="popover-example-content" className="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1">>Open popover</button>
	</div>
	<div
		id="popover-example-content"
		data-unitone-layout="popover-content"
		popover
	>
			<div data-unitone-layout="decorator -padding:-1" style="--unitone--background-color: var(--unitone--color--pale-gray)">
				<div data-unitone-layout="stack -gap:-2 -divider:divide" style="--unitone--divider-color: var(--unitone--color--light-gray)">
					<p>The content of the Popover.</p>
					<div>
						<button className="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1">Open popover</button>
					</div>
				</div>
			</div>
	</div>
</div>


import {
	Popover,
	PopoverTrigger,
	PopoverContent,
} from '@inc2734/unitone-css/layout-primitives/popover/react';
 
import { Decorator } from '@inc2734/unitone-css/layout-primitives/decorator/react';
import { Stack } from '@inc2734/unitone-css/layout-primitives/stack/react';
 
<Popover>
	<PopoverTrigger>
		<button popoverTarget="popover-example-content" className="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1">Open popover</button>
	</PopoverTrigger>
	<PopoverContent id="popover-example-content">
		<PopoverContent id="popover-example-content">
			<Decorator backgroundColor="var(--unitone--color--pale-gray)" padding="-1">
				<Stack gap="-2" divider="divide" dividerColor="var(--unitone--color--light-gray)">
					<p>The content of the Popover.</p>
					<div>
						<button className="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1">Open popover</button>
					</div>
				</Stack>
			</Decorator>
		</PopoverContent>
	</PopoverContent>
</Popover>

Section With Decorative Background

A content section where the main structure is built with primitives, while decorative background treatment is layered behind or around the content.

Lorem ipsum dolor sit amet

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Download now

Try it online


<div data-unitone-layout="layers -cover">
	<img src="..." alt="" />
 
	<div data-unitone-layout="decorator -position:relative">
		<div data-unitone-layout="gutters">
			<div data-unitone-layout="container">
				<div data-unitone-layout="stack">
					<div data-unitone-layout="center -with-text">
						<h2 data-unitone-layout="-fluid-typography" class="-font-size:5xl -font-weight:bold">Lorem ipsum dolor sit amet</h2>
					</div>
 
					<div data-unitone-layout="center">
						<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
					</div>
 
					<div data-unitone-layout="center">
						<div data-unitone-layout="cluster">
							<div>
								<a href="#" class="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1" style="width: 100%"><strong>Download now</strong></a>
							</div>
							<div>
								<a href="#" class="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1" style="width: 100%"><strong>Try it online</strong></a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


import { Layers } from '@inc2734/unitone-css/layout-primitives/layers/react';
import { Decorator } from '@inc2734/unitone-css/layout-primitives/decorator/react';
import { Gutters } from '@inc2734/unitone-css/layout-primitives/gutters/react';
import { Container } from '@inc2734/unitone-css/layout-primitives/container/react';
import { Stack } from '@inc2734/unitone-css/layout-primitives/stack/react';
import { Center } from '@inc2734/unitone-css/layout-primitives/center/react';
import { Cluster } from '@inc2734/unitone-css/layout-primitives/cluster/react';
 
<Layers cover>
	<img src="..." alt="" />
 
	<Decorator position="relative">
		<Gutters>
			<Container>
				<Stack>
					<Center withText>
						<h2 data-unitone-layout="-fluid-typography" className="-font-size:5xl -font-weight:bold">Lorem ipsum dolor sit amet</h2>
					</Center>
 
					<Center>
						<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
					</Center>
 
					<Center>
						<Cluster>
							<div>
								<a href="#" className="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1" style={{width: '100%'}}><strong>Download now</strong></a>
							</div>
							<div>
								<a href="#" className="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1" style={{width: '100%'}}><strong>Try it online</strong></a>
							</div>
						</Cluster>
					</Center>
				</Stack>
			</Container>
		</Gutters>
	</Decorator>
</Layers>

Layered Hero

A hero layout that combines foreground content and background visual elements in overlapping layers, while keeping the readable content structure separate.

Clouds floated across the sky.

Moonlight drifted through the clouds and softened the quiet trees.

Download now

Try it online


<div data-unitone-layout="layers -cover">
	<img src="..." alt="" />
 
	<div data-unitone-layout="cover -padding:0" style="--unitone--min-height: max(100svh, 667px)">
		<div data-unitone-layout="cover__content -valign:center">
			<div data-unitone-layout="container">
				<div data-unitone-layout="stack -gap:3">
					<div data-unitone-layout="center">
						<h2 data-unitone-layout="-fluid-typography" class="-font-size:4xl -font-weight:bold">Clouds floated across the sky.</h2>
					</div>
 
					<div data-unitone-layout="center">
						<p data-unitone-layout="-fluid-typography" class="-font-size:xl">Moonlight drifted through the clouds and softened the quiet trees.</p>
					</div>
 
					<div data-unitone-layout="center">
						<div data-unitone-layout="cluster">
							<div>
								<a href="#" class="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1" style="width: 100%"><strong>Download now</strong></a>
							</div>
							<div>
								<a href="#" class="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1" style="width: 100%"><strong>Try it online</strong></a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


import { Layers } from '@inc2734/unitone-css/layout-primitives/layers/react';
import { Cover, CoverContent } from '@inc2734/unitone-css/layout-primitives/cover/react';
import { Container } from '@inc2734/unitone-css/layout-primitives/container/react';
import { Stack } from '@inc2734/unitone-css/layout-primitives/stack/react';
import { Center } from '@inc2734/unitone-css/layout-primitives/center/react';
import { Cluster } from '@inc2734/unitone-css/layout-primitives/cluster/react';
 
<Layers cover>
	<img src="..." alt="" />
 
	<Cover minHeight="max(100svh, 667px)" padding="0">
		<CoverContent valign="center">
			<Container>
				<Stack gap="3">
					<Center>
						<h2 data-unitone-layout="-fluid-typography" className="-font-size:4xl -font-weight:bold">Clouds floated across the sky.</h2>
					</Center>
 
					<Center>
						<p data-unitone-layout="-fluid-typography" className="-font-size:xl">Moonlight drifted through the clouds and softened the quiet trees.</p>
					</Center>
 
					<Center>
						<Cluster>
							<div>
								<a href="#" className="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1" style={{width: '100%'}}><strong>Download now</strong></a>
							</div>
							<div>
								<a href="#" className="-display:inline-flex -border-radius -background-color:heavy-violet -color:white -padding-block:-2 -padding-inline:-1" style={{width: '100%'}}><strong>Try it online</strong></a>
							</div>
						</Cluster>
					</Center>
				</Stack>
			</Container>
		</CoverContent>
	</Cover>
</Layers>

Text overwrap Hero

A hero with text and an image overlapping, slightly misaligned. The elements are layered using layer primitives, and then offset using the gridColumn (--unitone--grid-column) / gridRow (--unitone--grid-row) properties of the child elements.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt


<div data-unitone-layout="layers -portrait">
	<div data-unitone-layout="-align-self:end" style="--unitone--grid-column: 2/-1; --unitone--grid-row: 2/-1">
		<div data-unitone-layout="frame -switch" style="--unitone--ratio: 16/9">
			<img src="..." alt="" />
		</div>
	</div>
	<div style=np"--unitone--max-width: var(--unitone--measure)">
		<div data-unitone-layout="stack">
			<h2 class="-font-size:3xl -fluid-typography">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</h2>
		</div>
	</div>
</div>


import { Layers, Layer } from '@inc2734/unitone-css/layout-primitives/layers/react';
import { Frame } from '@inc2734/unitone-css/layout-primitives/frame/react';
import { Stack } from '@inc2734/unitone-css/layout-primitives/stack/react';
 
<Layers portrait>
	<Layer alignSelf="end" gridColumn="2/-1" gridRow="2/-1">
		<Frame switchRatio ratio="16/9">
			<DummyImage />
		</Frame>
	</Layer>
	<Layer maxWidth="var(--unitone--measure)">
		<Stack>
			<h2 className="-font-size:3xl -fluid-typography">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</h2>
		</Stack>
	</Layer>
</Layers>

Patterns

How To Read This Page

Quick Pattern Map

Selection Notes

BothSides vs WithSidebar

Cover vs Layers

ResponsiveGrid vs Switcher

Text as width owner

Gutters vs page-level Stack

Page Hero

Clouds floated across the sky.

Hero With Action Buttons

Clouds floated across the sky.

Announcement List

News

Header Bar

Split Media And Text

Sand and Stars

Card Grid

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Card Grid With Uniform Media

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Feature List

Lorem ipsum dolor sit

Lorem ipsum dolor sit

Sidebar Layout

Lorem ipsum dolor sit amet

Centered Title Section

Lorem ipsum dolor sit amet

Centered CTA Section

Lorem ipsum dolor sit amet

Article Header

Lorem ipsum dolor sit amet

Text Content Block

Lorem ipsum dolor sit amet

Form Row

Button Group

Badge / Label Cluster

Horizontal Reel

Lorem ipsum dolor sit amet

Consectetur adipisicing elit

Sed do eiusmod tempor

Lorem ipsum dolor sit amet

Consectetur adipisicing elit

Sed do eiusmod tempor

Decorated Surface Block

Lorem ipsum dolor sit amet

Dialog Content Layout

Popover Content Layout

Section With Decorative Background

Lorem ipsum dolor sit amet

Layered Hero

Clouds floated across the sky.

Text overwrap Hero

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt

`BothSides` vs `WithSidebar`

`Cover` vs `Layers`

`ResponsiveGrid` vs `Switcher`

`Text` as width owner

`Gutters` vs page-level `Stack`