Layers

Elements on top of each other. Layers have a 12 x 7 (7 x 12 in portrait mode) grid, along which child layers can be shifted.

Layers is not only for placing a background image behind content. Use it when the overlap itself is part of the layout, such as:

a hero card crossing the lower edge of the image area
a notice panel partially outside the media block
foreground copy and controls sharing one layered composition with the media

When that overlap boundary matters visually, keep the overlapping pieces inside the same Layers instance and assign explicit grid ranges to the relevant children.

Typical pattern:


<div data-unitone-layout="layers -cover">
	<div style="--unitone--grid-row: 1 / -2">
		<img src="..." alt="" />
	</div>
 
	<div style="--unitone--grid-column: 2 / -2; --unitone--grid-row: 2 / -1">
		<div data-unitone-layout="stack -gap:1">
			<div>Hero copy</div>
			<div>Buttons</div>
			<div>Notice card</div>
		</div>
	</div>
</div>


<Layers cover>
	<Layer gridRow="1 / -2">
		<img src="..." alt="" />
	</Layer>
 
	<Layer gridColumn="2 / -2" gridRow="2 / -1">
		<Stack gap="1">
			<div>Hero copy</div>
			<div>Buttons</div>
			<div>Notice card</div>
		</Stack>
	</Layer>
</Layers>

If you move the notice card outside Layers, the overlap becomes a spacing effect instead of a real layered composition.

Usage

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="layers">
	<img src="..." alt="" />
 
	<div data-unitone-layout="-align-self:end">
		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>
</div>

Props

HTML -cover / JSX cover

Background image/video is sized to maintain its aspect ratio while filling the element’s entire content box. If the object’s aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.


<div data-unitone-layout="layers -cover">
	...
</div>


import { Layers } from '@inc2734/unitone-css/layout-primitives/layers/react';
 
<Layers cover>
	...
</Layers>

HTML -fill / JSX fill

The background image/video is enlarged according to the amount of content.


<div data-unitone-layout="layers -fill">
	...
</div>


import { Layers } from '@inc2734/unitone-css/layout-primitives/layers/react';
 
<Layers fill>
	...
</Layers>

HTML -fixed / JSX fixed

The background image/video will be fixed.


<div data-unitone-layout="layers -fixed">
	...
</div>


import { Layers } from '@inc2734/unitone-css/layout-primitives/layers/react';
 
<Layers fixed>
	...
</Layers>

HTML -blur / JSX applyBlur

Blur the background image/video.


<div data-unitone-layout="layers -blur">
	...
</div>


import { Layers } from '@inc2734/unitone-css/layout-primitives/layers/react';
 
<Layers applyBlur>
	...
</Layers>

HTML -portrait / JSX portrait

Switch vertical and horizontal grid lines direction when portrait and mobile width.


<div data-unitone-layout="layers -portrait">
	...
</div>


import { Layers } from '@inc2734/unitone-css/layout-primitives/layers/react';
 
<Layers portrait>
	...
</Layers>

Pair responsiveContext="container" with containerType="inline-size" on an ancestor to make the responsive behavior depend on the container width. Both props must be set on the same ancestor for its context to become active. If containerType="inline-size" is omitted there, responsiveContext="container" is ignored and the existing responsive context remains active. See Responsive context utilities for examples.


<div data-unitone-layout="decorator -container-type:inline-size -responsive-context:container" style="--unitone--max-width: 375px">
	<div data-unitone-layout="layers -portrait">
		...
	</div>
</div>


import { Decorator } from '@inc2734/unitone-css/layout-primitives/decorator/react';
import { Layers } from '@inc2734/unitone-css/layout-primitives/layers/react';
 
<Decorator maxWidth="375px" containerType="inline-size" responsiveContext="container">
	<Layers portrait>
		...
	</Layers>
</Decorator>

-mix-blend-mode:{value}

You can specify how the elements should look when stacked.

normal / multiply / screen / overlay / darken / lighten / color-dodge / color-burn / hard-light / soft-light / difference / exclusion / hue / saturation / color / luminosity


<div data-unitone-layout="layers -portrait">
	<img src="..." alt="" />
 
	<div data-unitone-layout="-mix-blend-mode:overlay">
		...
	</div>
</div>


import { Layers, Layer } from '@inc2734/unitone-css/layout-primitives/layers/react';
 
<Layers portrait>
	<img src="..." alt="" />
 
	<Layer mixBlendMode="overlay" alignSelf="end">
		...
	</Layer>
</Layers>

HTML --unitone--columns / JSX columns={value}

Number of grid columns.


<div data-unitone-layout="layers" style="--unitone--columns: 20">
	...
</div>


import { Layers } from '@inc2734/unitone-css/layout-primitives/layers/react';
 
<Layers columns="20">
	...
</Layers>

HTML --unitone--rows / JSX rows={value}

Number of grid rows.


<div data-unitone-layout="layers" style="--unitone--rows: 20">
	...
</div>


import { Layers } from '@inc2734/unitone-css/layout-primitives/layers/react';
 
<Layers rows="20">
	...
</Layers>

HTML --unitone--row-track-size / JSX rowTrackSize={value}

The track size used for each repeated row.


<div data-unitone-layout="layers" style="--unitone--row-track-size: 50px">
	...
</div>


import { Layers } from '@inc2734/unitone-css/layout-primitives/layers/react';
 
<Layers rowTrackSize="50px">
	...
</Layers>

HTML -gap:{variation} / JSX gap={variation}

Gap.

Can be set from -3 to 7. For variations 2 and above, clamp is used to adjust the margins so that they do not become too large on small screens. If it is 1 or more, adding s will shrink it to size -1 on mobile. (e.g. 1s) If it is 2 or more, adding m will shrink it to size 1 on mobile. (e.g. 2m)

Column gaps are limited to a certain size because if they become too large, data may spill out.


<div data-unitone-layout="layers -gap:-2">
	...
</div>


import { Layers } from '@inc2734/unitone-css/layout-primitives/layers/react';
 
<Layers gap={-2}>
	...
</Layers>

HTML -column-gap:{variation} / JSX columnGap={variation}

Column gap.

Column gaps are limited to a certain size because if they become too large, data may spill out.


<div data-unitone-layout="layers -column-gap:-2">
	...
</div>


import { Layers } from '@inc2734/unitone-css/layout-primitives/layers/react';
 
<Layers columnGap={-2}>
	...
</Layers>

HTML -row-gap:{variation} / JSX rowGap={variation}

Row gap.


<div data-unitone-layout="layers -row-gap:-2">
	...
</div>


import { Layers } from '@inc2734/unitone-css/layout-primitives/layers/react';
 
<Layers rowGap={-2}>
	...
</Layers>

HTML --unitone--min-height / JSX minHeight={value}

Min height.


<div data-unitone-layout="layers" style="--unitone--min-height: 360px">
	...
</div>


import { Layers } from '@inc2734/unitone-css/layout-primitives/layers/react';
 
<Layers minHeight="360px">
	...
</Layers>

Grid item position

You can set the position of child elements with the associated properties of the CSS grid.

align-self: data-unitone-layout="-align-self:end"
justify-self: data-unitone-layout="-justify-self:end"
grid-column: --unitone--grid-column: 1/-1
grid-row: --unitone--grid-row: 1/-1


<div data-unitone-layout="layers -portrait">
	<img src="..." alt="" />
 
	<div data-unitone-layout="-align-self:center -justify-self:center" style="--unitone--grid-column: 2/-2">
		...
	</div>
</div>


import { Layers, Layer } from '@inc2734/unitone-css/layout-primitives/layers/react';
 
<Layers portrait>
	<img src="..." alt="" />
 
	<Layer alignSelf="center" justifySelf="center" gridColumn="2 / -2">
		...
	</Layer>
</Layers>

HTML -container-type:{value} / JSX containerType={value}

Establishes the Layers as a query container for its descendants.

Currently supported values are:

inline-size


<div data-unitone-layout="layers -container-type:inline-size">
	<div>...</div>
</div>


import { Layers } from '@inc2734/unitone-css/layout-primitives/layers/react';
 
<Layers containerType="inline-size">
	<div>...</div>
</Layers>

HTML -responsive-context:{value} / JSX responsiveContext={value}

Sets the responsive context for descendants to container, the only supported value. It does not affect the Layers element itself. Use responsiveContext="container" together with containerType="inline-size" on this element (HTML: -responsive-context:container -container-type:inline-size). The default is viewport-based behavior, and there is no viewport override inside a container context. The context becomes active only when both markers are on the same element. If containerType="inline-size" is omitted, responsiveContext="container" is ignored and the existing responsive context remains active. See Responsive context utilities for examples.

Deprecated HTML -fluid-reference:{value} / JSX fluidReference={value}

Deprecated. Use responsiveContext="container" on an ancestor instead.

Uses a query container’s inline size as the reference for fluid typography, spacing, padding, and gutters.

Currently supported values are:

cqw

Place the Layers inside an ancestor with container-type: inline-size.


<div data-unitone-layout="layers -container-type:inline-size">
	<div data-unitone-layout="layers -fluid-reference:cqw">
		...
	</div>
</div>


import { Layers } from '@inc2734/unitone-css/layout-primitives/layers/react';
 
<Layers containerType="inline-size">
	<Layers fluidReference="cqw">
		...
	</Layers>
</Layers>

HTML @container / JSX queryContext=“container”

queryContext="container" selects container queries for this Layers’ responsive behavior. An eligible ancestor query container is required; otherwise, the responsive change is not applied. It does not change fluid values or establish a responsive context for descendants.