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 -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)


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


import { Layers } from '@inc2734/unitone-css/layout-primitives/layers/react';
 
<Layers gap={-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>

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>

-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>

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>