Bedrock Layout Primitives Home
Edit page
Components
AppBoundaryCSS-ResetCenterColumnsCoverFrameGridInlineUse caseHow to installBasic usagedata-attributeStorybookPropertiesAPIInlineClusterMasonryGridPadBoxReelSpacing ConstantsSplitStackSwitcheruseContainerQueryuseForwardedRefuseMatchContainerSizesuseMatchMediauseMediaQueryuseStatefulRef
HomeInspirationLayout PrimitivesRegarding IE11Why Styled Components?

Inline

Use case

The Inline component is designed constistent spacing around inline elements of variable width. Unlike the InlineCluster component, the items in the Inline component will not wrap. The Inline component also allows you to specify a child that can stretch, filling the execess space.

How to install

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

npm install styled-components

Then install the Inline component

npm install @bedrock-layout/inline

Finally, you import the component.

import { Inline } from '@bedrock-layout/inline';

Basic usage

Lorem ipsum dolor
sit amet consectetur
adipisicing elit.

data-attribute

For purposes of styling you can select data-bedrock-layout-inline.

Storybook

Checkout storybook for more details.

Properties

API

* required

PropertyDescriptionTypeDefault
gutter*sets space inbetween each elementone of spacing**-
stretchchild or children that will stretch to fill available spaceOne of: all, start, end, index of the child-
justifyInline alignmentOne of: start, end, centerstart
alignBlock alignmentOne of: start, end, centerstart
switchAtThe width that the container will switch to stackingOne of: CSS length, number-

** By default, spacings are one of the spacing-constants, but can be overridden using the ThemeProvider from styled-components