Components

Container

The Container component is used to group and style content into responsive display containers.
This component is in active development

The props and interfaces listed here will likely change. Please use the Container component sparingly and realize there will likely be breaking changes.

Usage

The Container component can be used to build any sort of layout within the document body or other Page* components.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::container
---
display: "block"
tag: "div"
color: "#000933"
border: "1px solid lightgray"
border-radius: "8px"
padding: "20px"
margin: "0px"
max-width: "100%"
text-align: "left"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::
Container Component Props

The display type of the component. Accepts the CSS values for 'display'.

The HTML tag to utilize for the wrapper (or main) element in the component. Accepts string.

The text color of the element. Accepts string.

The background color of the component. Accepts string | null.

The border of the element. Accepts string | null.

The border radius of the element. Accepts string | null.

The padding of the component. Accepts string | null.

The margin of the component. Accepts string | null.

The max width of the element. Accepts string.

Aligns the text displayed in the component. Accepts values for text-align css property.

Props

display

The display type of the component. Accepts the CSS values for 'display'.

  • Type: string
  • Default: 'block'
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::container
---
display: "flex"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::

alignItems

Sets the align-self value on all direct children as a group. In flexbox, it controls the alignment of items on the cross axis. In grid layout, it controls the alignment of items on the block axis within their grid areas. Accepts the native CSS allowed values for 'align-items'.

  • Type: string

Block 1

Block 2

::container
---
display: "flex"
align-items: "center"
---
:::container
Block 1
:::

:::container
Block 2
:::
::
Container Component Props

Sets the align-self value on all direct children as a group. In flexbox, it controls the alignment of items on the cross axis. In grid layout, it controls the alignment of items on the block axis within their grid areas. Accepts the native CSS allowed values for `align-items`.

justifyContent

Defines how the browser distributes space between and around content items along the main axis of a flex container and the inline axis of grid and multicol containers. Accepts the native CSS allowed values for justify-content.

  • Type: string

Block 1

Block 2

::container
---
display: "flex"
justify-content: "end"
---
:::container
Block 1
:::

:::container
Block 2
:::
::
Container Component Props

Defines how the browser distributes space between and around content items along the main axis of a flex container and the inline axis of grid and multicol containers. Accepts the native CSS allowed values for `justify-content`.

flex

The CSS shorthand property to set how a flex item will grow or shrink to fit the space available in its flex container.

  • Type: string
  • Default: null

First item

Second item

::container
---
display: "flex"
---
:::container
---
flex: "0 0 33%"
---
First item
:::

:::container
---
flex: "1 1 auto"
---
Second item
:::
::

flexDirection

When display is set to 'flex', specifies the flex-direction of the flex container.

Accepts one of the following values: 'row' | 'row-reverse' | 'column' | 'column-reverse'

  • Type: string
  • Default: 'row'

First item

Second item

::container
---
display: "flex"
flex-direction: "row"
---
:::container
First item
:::

:::container
Second item
:::
::
Container Component Props

Specifies flex-direction of the flex container. Accepts 'row' | 'row-reverse' | 'column' | 'column-reverse'.

flexWrap

When display is set to 'flex', specifies whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked. Accepts the native CSS allowed values for flex-wrap.

  • Type: string
  • Default: 'nowrap'

First item

Second item

Third item

::container
---
display: "flex"
flex-wrap: "nowrap"
---
:::container
First item
:::

:::container
Second item
:::

:::container
Third item
:::
::
Container Component Props

Specifies whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked. Accepts the native CSS allowed values for flex-wrap.

gridColumns

When display is set to 'grid', the minimum number of columns to display.

  • Type: number
  • Default: 1

gridColumnsBreakpoints

When display is set to 'grid', the grid-template-columns for each pre-defined breakpoint.

  • Type: Breakpoints
  • Default: {}
      /** Number of columns once the viewport width is greater than or equal to the breakpoint shown below. */
interface Breakpoints {
  /** 640px */
  mobile?: number
  /** 768px */
  phablet?: number
  /** 1024px */
  tablet?: number
  /** 1280px */
  laptop?: number
  /** 1536px */
  desktop?: number
}

Shared Props

This component also includes the shared props listed below:

  • backgroundColor - default is null.
  • backgroundImage - default is null
  • border - default is none.
  • borderRadius - default is 0px.
  • color - default is null.
  • gap - default is 20px
  • margin - default is 0px.
  • maxWidth - default is 100%.
  • padding - default is 0px.
  • tag - default is div.
  • text-align - default is null
  • width - default is 100%.
  • styles - default is ''.

See here for more information on shared props.