row (default)

column

data-direction-foo (-sm, -md, -lg)

Responsive prop applies class at specified media query. Inherits from smallest size defined in a mobile-first approach.

This example starts as a column and moves to a row at the 'md' screen size. Resize your window to see the behavior.

data-align: flex-start, align-foo (-sm, -md, -lg)

Available values: flex-start, center, flex-end, baseline, stretch. Values correspond to flex spec

data-align: center, align-foo (-sm, -md, -lg)

data-align: flex-end, align-foo (-sm, -md, -lg)

data-align: baseline, align-foo (-sm, -md, -lg)

data-align: stretch, align-foo (-sm, -md, -lg)

data-align: flex-end, align-foo (-sm, -md, -lg)

data-justify: flex-start

Available values: flex-start, flex-end, center, space-between, space-around, space-evenly. Values correspond to flex spec

data-justify: flex-end

data-justify: center

data-justify: space-between

data-justify: space-around

data-justify: space-between

data-justify: space-evenly

data-wrap: false (default)

flex will auto resize elements to fit in a row if wrap is not true. Check the spec for more info.

data-wrap: true

width

Add a value 1-100 to control the width of your element. Element must be wrapped in a flex container for the width to have effect

width-foo (-sm, -md, -lg)

Responsive prop applies class at specified media query. Inherits from smallest size defined in a mobile-first approach.

This example starts at 100% on mobile and then moves to a 2 column layout on small screen sizes, 3 column layout on medium screen sizes, and then a 4 column layout on large screen sizes

Color utils

Include the layout component styles from lobster-global-theme to add color util classes. Customize variables with a color map that suits your needs.

Many components often generate this class automatically through the properties color and backgroundColor.

Class structure is as follows for background colors: .lobster_layout_background-color--[color-var]

Class structure is as follows for colors: .lobster_layout_color--[color-var]

Available colors: color map defined in lobster-global-theme/lobster-layout.scss. A gray pallete, primary pallete, black and white are included default.

Padding utils

Include the layout component styles from lobster-global-theme to add spacing util classes. Customize variables with a pixel size that suits your needs.

Class structure is as follows: `.lobster_layout_padding-[direction]--[size]`

Available directions: all, top, bottom, left, right, vertical, horizontal

Available sizes: xxs, xs, sm, md, lg, xl, xxl

Margin utils

Include the layout component styles from lobster-global-theme to add spacing util classes. Customize variables with a pixel size that suits your needs.

Class structure is as follows: `.lobster_layout_margin-[direction]--[size]`

Available directions: all, top, bottom, left, right, vertical, horizontal

Available sizes: xxs, xs, sm, md, lg, xl, xxl

.lobster_layout-fill

Force element to fill a flex wrapper

.lobster_layout_flex--grow

Sets flex-grow to 1 and forces element to take up container

.lobster_layout_flex--nogrow

Disables an element from growing to the container size

.lobster_layout_flex--shrink

Sets flex shrink to 1

.lobster_layout_flex--noshrink