11.12.1

Layouts




Flex

Default


Prop
  • orientation | Type: String | Values: row | column
  • Inline


    Prop
  • inline | Type: Boolean

  • By default this prop is false which sets the flex container to take up the full width of its parent container. When the prop is set to true the flex container sets its width to be the same size as the containing items.

  • Reverse


    Prop
  • reverse | Type: Boolean

  • When set to true this prop will reverse the order of items in the flex container.

  • Wrap


    Prop
  • wrap | Type: Boolean

  • When set to true this prop will move the next item in flex container to a new line if there is no more room.

  • Spacing


    Prop

    justify | Type: String | Values: none | around | evenly | between

    Justify


    Prop

    justify | Type: String | Values: start | center | end | | none

    Align


    Prop

    align | Type: String | Values: start | center | end | stretch | baseline | none

    Gap


    Prop
  • gap | row_gap | rowGap | column_gap | columnGap | Type: String | Values: xs | sm | md | lg | xl | none

  • Setting the gap prop sets the rowgap || rowGap and the columngap || columnGap props to the same size and creates equal space within a flex container.

  • Setting the row_gap || rowGap prop creates space between rows in a flex container.

  • Setting the column_gap || columnGap prop creates space between columns in a flex container.

  • Flex Item


    Props
  • display_flex | Type: Boolean
  • flex | Type: String | Values: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
  • fixed_size | Type: String | Values: Any CSS px or % value
  • grow | Type: Boolean
  • shrink | Type: Boolean
  • order | Type: String | Values: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | first

  • Flex is a short hand to set the flex item to take up (x) amount of available space

  • Setting Flex to 1 is equal to setting the grow & shrink prop to true

  • Setting Flex to 0 is equal to setting the grow & shrink prop to false

  • If grow & shrink are true, grow will take precedence an the flex item will take up as much space as possible, then if other elements are added shrink would allow other items to squish inside the flex container

  • display_flex will either be true or false. If true, then the class will be applied to the kit

  • Flex Item - Align Self


    Prop
  • align_self | Type: String | Values: start | end | center | stretch

  • Align-self aligns the Flex Item on the cross axis. This prop may also be applied to the Flex kit and will act the same way.

  • Layout

    Colors


    Transparent


    Sizes


    Collection Layout


    Layout can leverage the max-width property. Learn more in our visual guidelines.

    Collection Detail Layout


    The left element on Collection Detail can be used for things such as navigation or secondary content to the element on the right. The right content can be used the same way that you would use Collection. The element on the right should be the primary focus and can be used for repeating elements such as cards.

    Kanban Layout


    Content Layout


    Masonry Layout