Bedrock Layout Primitives Home
Edit page
Components
AppBoundaryCSS-ResetCenterColumnsCoverFrameGridInlineClusterPadBoxUse caseHow to installBasic UsageUsage With an ArrayUsage With an ObjectStorybookPropertiesReelSpacing ConstantsSplitStackSwitcheruseContainerQueryuseForwardedRefuseMatchContainerSizesuseMatchMediauseMediaQueryuseStatefulRef
HomeInspirationLayout PrimitivesRegarding IE11Why Styled Components?

PadBox

Use case

The PadBox is design to create consistent padding based of off the spacing constants. PadBox takes either a single value, an array of values, or an object of values for fine tuning the padding

How to install

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

npm install styled-components

Then install the stack component

npm install @bedrock-layout/padbox

Basic Usage

padding can take a single value for a consistent box shape padding

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.

Usage With an Array

padding can take an array that follows the padding short hand rules

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.

Usage With an Object

padding can take an object to specify which locations will have padding and which type. The properties support both traditional properties, top, bottom, right, left and logical properties in camelcase, blockStart, blockEnd, inlineStart, inlineEnd no matter which properties are given, logical properties are used, if supported.

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
paddingOne of: none, xs, sm, md, lg, xl, xxllg
padding (array)Array of padding optionslg
padding (object)Object of with padding locations as keys and padding options as valueslg