11.12.1

List

Lists display a vertical set of related content.

Layout Prop

Setting the layout prop to either left or right creates a 2 column layout on the the list/item kit. This is useful if you need 2 things on the same line in a list.

Using layout:'left' will make the first column shrink and the second column grow and align to the left.

Using layout:'right' will make the first column grow and push the second column to the right.

Default

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Large

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Ordered

  1. List Item
  2. List Item
  3. List Item
  4. List Item
  5. List Item

Borderless

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Horizontal Padding

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Layout Left

  • Label

    Caption
    $

    2,000

    .50
  • Label

    Caption
    $

    2,000

    .50
  • Label

    Caption
    $

    2,000

    .50
  • Label

    Caption
    $

    2,000

    .50
  • Label

    Caption
    $

    2,000

    .50

Layout Right

  • Label

    Caption
    $

    2,000

    .50
  • Label

    Caption
    $

    2,000

    .50
  • Label

    Caption
    $

    2,000

    .50
  • Label

    Caption
    $

    2,000

    .50
  • Label

    Caption
    $

    2,000

    .50



Available Props

  • classname
  • dark
  • margin
  • margin_bottom
  • margin_left
  • margin_right
  • margin_top
  • margin_x
  • margin_y
  • max_width
  • padding
  • padding_bottom
  • padding_left
  • padding_right
  • padding_top
  • padding_x
  • padding_y
  • z_index
  • number_spacing
  • shadow
  • line_height
  • display
  • cursor
  • flex_direction
  • flex_wrap
  • justify_content
  • justify_self
  • align_items
  • align_content
  • align_self
  • flex
  • flex_grow
  • flex_shrink
  • order
  • id
  • data
  • aria
  • children
  • borderless
  • layout
  • size
  • ordered
  • xpadding
  • role
  • tabindex