Cover

Centers an item vertically within a defined height.

Expects the item to be centered to have a cover__centered class applied.

Two additional items can be place before and after the centered element. These will be displayed at the top and bottom of the Cover area.

Usage

<Cover coverSpace="var(--s-1)" coverHeight="100vh" className="test">
	<span>Item</span>
	<span class="cover__centered">.cover__centered</span>
	<span>Item</span>
</Cover>

Props

Property name Default value
coverSpace var(--s-1)
coverHeight 100vh
className ""

Default

Item .cover__centered Item