Bedrock Layout Primitives Home
Edit page
Components
AppBoundaryCSS-ResetCenterColumnsCoverUse caseHow to installBasic usageStorybookPropertiesFrameGridInlineClusterPadBoxReelSpacing ConstantsSplitStackSwitcheruseContainerQueryuseForwardedRefuseMatchContainerSizesuseMatchMediauseMediaQueryuseStatefulRef
HomeInspirationLayout PrimitivesRegarding IE11Why Styled Components?

Cover

Use case

The Cover is designed to cover a predefinded area, 100vh by default, and vertically center it's child.

How to install

If you haven't already, install styled-components:

npm install styled-components

Then install the stack component

npm install @bedrock-layout/cover

Basic usage

I'm on the Top
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga consequuntur corrupti beatae commodi vitae, perspiciatis totam provident architecto doloribus aperiam sapiente, incidunt nihil suscipit voluptatibus tempore est dolor! Iusto, vero.

Storybook

Checkout storybook for more details.

Properties

PropertyTypeDefault
minHeightany valid css size unit as a string"100vh"
gutter`"none""xs"
childrenReactNode-
topReactNode-
bottomReactNode-