Container

A container component that provides layout structure with background options, padding, and content width controls.

This is a heading inside a container 

_bookshop_name: wrappers/container
backgroundColor: surface
contentBlocks:
  - _bookshop_name: primitives/heading
    text: This is a heading inside a container
    level: h2

Properties

label string

Optional label for the container to help identify it in the editor.

contentBlocks string | default: array

maxContentWidth enum | default: md

Maximum width constraint for the content.

Accepted values:
  • xs
  • sm
  • md
  • lg
  • xl
  • 2xl
  • 3xl

paddingHorizontal enum | default: md

Horizontal padding applied to the container content.

Accepted values:
  • xs
  • sm
  • md
  • lg
  • xl
  • 2xl
  • 3xl
  • 4xl
  • 5xl
  • 6xl

paddingVertical enum | default: md

Vertical padding applied to the container content.

Accepted values:
  • xs
  • sm
  • md
  • lg
  • xl
  • 2xl
  • 3xl
  • 4xl
  • 5xl
  • 6xl

colorScheme enum | default: default

Color scheme theme for the container.

Accepted values:
  • default
  • contrast

backgroundColor enum

Background color for the container.

Accepted values:
  • base
  • surface
  • accent
  • highlight

backgroundImage string | default: object

Background image configuration for the container.

Examples

Background color

Accent background color 

_bookshop_name: wrappers/container
backgroundColor: accent
contentBlocks:
  - _bookshop_name: primitives/heading
    text: Accent background color
    level: h2

Highlight background color 

_bookshop_name: wrappers/container
backgroundColor: highlight
contentBlocks:
  - _bookshop_name: primitives/heading
    text: Highlight background color
    level: h2

Surface background color 

_bookshop_name: wrappers/container
backgroundColor: surface
contentBlocks:
  - _bookshop_name: primitives/heading
    text: Surface background color
    level: h2

Base background color (page background color) 

_bookshop_name: wrappers/container
backgroundColor: base
contentBlocks:
  - _bookshop_name: primitives/heading
    text: Base background color (page background color)
    level: h2

No background color (transparent) 

_bookshop_name: wrappers/container
backgroundColor: base
contentBlocks:
  - _bookshop_name: primitives/heading
    text: No background color (transparent)
    level: h2

Background image

Dunedin cliffside

Build bold. Launch fast. 

_bookshop_name: wrappers/container
backgroundImage:
  source: /images/component-library/dunedin-cliff.jpg
  alt: Dunedin cliffside
  positionVertical: top
  positionHorizontal: left
contentBlocks:
  - _bookshop_name: primitives/heading
    align: end
    text: Build bold. Launch fast.
Dunedin cliffside

Build bold. Launch fast. 

_bookshop_name: wrappers/container
backgroundImage:
  source: /images/component-library/dunedin-cliff.jpg
  alt: Dunedin cliffside
  positionVertical: center
  positionHorizontal: center
contentBlocks:
  - _bookshop_name: primitives/heading
    align: end
    text: Build bold. Launch fast.
Dunedin cliffside

Build bold. Launch fast. 

_bookshop_name: wrappers/container
colorScheme: contrast
backgroundImage:
  source: /images/component-library/dunedin-cliff.jpg
  alt: Dunedin cliffside
  positionVertical: bottom
  positionHorizontal: right
contentBlocks:
  - _bookshop_name: primitives/heading
    align: end
    text: Build bold. Launch fast.

Max Width

xs max content width 

_bookshop_name: wrappers/container
backgroundColor: surface
maxContentWidth: xs
paddingHorizontal: null
contentBlocks:
  - _bookshop_name: primitives/heading
    text: xs max content width
    level: h2
    align: center
    style: 'border: 1px solid var(--color-border)'

sm max content width 

_bookshop_name: wrappers/container
backgroundColor: surface
maxContentWidth: sm
paddingHorizontal: null
contentBlocks:
  - _bookshop_name: primitives/heading
    text: sm max content width
    level: h2
    align: center
    style: 'border: 1px solid var(--color-border)'

md max content width 

_bookshop_name: wrappers/container
backgroundColor: surface
maxContentWidth: md
paddingHorizontal: null
contentBlocks:
  - _bookshop_name: primitives/heading
    text: md max content width
    level: h2
    align: center
    style: 'border: 1px solid var(--color-border)'

lg max content width 

_bookshop_name: wrappers/container
backgroundColor: surface
maxContentWidth: lg
paddingHorizontal: null
contentBlocks:
  - _bookshop_name: primitives/heading
    text: lg max content width
    level: h2
    align: center
    style: 'border: 1px solid var(--color-border)'

xl max content width 

_bookshop_name: wrappers/container
backgroundColor: surface
maxContentWidth: xl
paddingHorizontal: null
contentBlocks:
  - _bookshop_name: primitives/heading
    text: xl max content width
    level: h2
    align: center
    style: 'border: 1px solid var(--color-border)'

2xl max content width 

_bookshop_name: wrappers/container
backgroundColor: surface
maxContentWidth: 2xl
paddingHorizontal: null
contentBlocks:
  - _bookshop_name: primitives/heading
    text: 2xl max content width
    level: h2
    align: center
    style: 'border: 1px solid var(--color-border)'

3xl max content width 

_bookshop_name: wrappers/container
backgroundColor: surface
maxContentWidth: 3xl
paddingHorizontal: null
contentBlocks:
  - _bookshop_name: primitives/heading
    text: 3xl max content width
    level: h2
    align: center
    style: 'border: 1px solid var(--color-border)'

Padding

xs padding 

_bookshop_name: wrappers/container
backgroundColor: surface
paddingHorizontal: xs
paddingVertical: xs
contentBlocks:
  - _bookshop_name: primitives/heading
    text: xs padding
    level: h2

sm padding 

_bookshop_name: wrappers/container
backgroundColor: surface
paddingHorizontal: sm
paddingVertical: sm
contentBlocks:
  - _bookshop_name: primitives/heading
    text: sm padding
    level: h2

md padding 

_bookshop_name: wrappers/container
backgroundColor: surface
paddingHorizontal: md
paddingVertical: md
contentBlocks:
  - _bookshop_name: primitives/heading
    text: md padding
    level: h2

lg padding 

_bookshop_name: wrappers/container
backgroundColor: surface
paddingHorizontal: lg
paddingVertical: lg
contentBlocks:
  - _bookshop_name: primitives/heading
    text: lg padding
    level: h2

2xl padding 

_bookshop_name: wrappers/container
backgroundColor: surface
paddingHorizontal: 2xl
paddingVertical: 2xl
contentBlocks:
  - _bookshop_name: primitives/heading
    text: 2xl padding
    level: h2

3xl padding 

_bookshop_name: wrappers/container
backgroundColor: surface
paddingHorizontal: 3xl
paddingVertical: 3xl
contentBlocks:
  - _bookshop_name: primitives/heading
    text: 3xl padding
    level: h2

Color Scheme

This is a heading inside a container 

_bookshop_name: wrappers/container
backgroundColor: surface
colorScheme: contrast
contentBlocks:
  - _bookshop_name: primitives/heading
    text: This is a heading inside a container
    level: h2

This is a heading inside a container 

_bookshop_name: wrappers/container
backgroundColor: surface
contentBlocks:
  - _bookshop_name: primitives/heading
    text: This is a heading inside a container
    level: h2