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

Frame

Use case

The Frame is mostly useful for cropping content, typically media, to a desired aspect ratio.

How to install

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

npm install styled-components

Then install the stack component

npm install @bedrock-layout/frame

Basic usage

cat

Storybook

Checkout storybook for more details.

Properties

PropertyTypeDefault
ratio[number,number]required
postionobject-position value as a string50%