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.

Summary

Uses Icons

Default

import React from 'react'

import List from 'playbook-ui'
import ListItem from 'playbook-ui'

const ListDefault = () => {
  return (
    <>
      <List>
        <ListItem>{'Item 1'}</ListItem>
        <ListItem>{'Item 2'}</ListItem>
        <ListItem>{'Item 3'}</ListItem>
      </List>
    </>
  )
}

export default ListDefault

Large

import React from 'react'

import List from 'playbook-ui'
import ListItem from 'playbook-ui'

const ListLg = (props) => {
  return (
    <>
      <List
          size="large"
      >
        <ListItem>{'Item 1'}</ListItem>
        <ListItem>{'Item 2'}</ListItem>
        <ListItem>{'Item 3'}</ListItem>
        <ListItem>{'Item 4'}</ListItem>
        <ListItem>{'Item 5'}</ListItem>
      </List>
    </>
  )
}

export default ListLg

Ordered

import React from 'react'

import List from 'playbook-ui'
import ListItem from 'playbook-ui'

const ListOrdered = (props) => {
  return (
    <>
      <List
          ordered
      >
        <ListItem>{'Item 1'}</ListItem>
        <ListItem>{'Item 2'}</ListItem>
        <ListItem>{'Item 3'}</ListItem>
        <ListItem>{'Item 4'}</ListItem>
        <ListItem>{'Item 5'}</ListItem>
      </List>
    </>
  )
}

export default ListOrdered

Borderless

import React from 'react'

import List from 'playbook-ui'
import ListItem from 'playbook-ui'

const ListBorderless = (props) => {
  return (
    <>
      <List
          borderless
      >
        <ListItem>{'Item 1'}</ListItem>
        <ListItem>{'Item 2'}</ListItem>
        <ListItem>{'Item 3'}</ListItem>
        <ListItem>{'Item 4'}</ListItem>
        <ListItem>{'Item 5'}</ListItem>
      </List>
    </>
  )
}

export default ListBorderless

Horizontal Padding

import React from 'react'

import List from 'playbook-ui'
import ListItem from 'playbook-ui'

const ListXpadding = (props) => {
  return (
    <>
      <List
          xpadding
      >
        <ListItem>{'Item 1'}</ListItem>
        <ListItem>{'Item 2'}</ListItem>
        <ListItem>{'Item 3'}</ListItem>
        <ListItem>{'Item 4'}</ListItem>
        <ListItem>{'Item 5'}</ListItem>
      </List>
    </>
  )
}

export default ListXpadding

Layout Left

import React from 'react'

import List from 'playbook-ui'
import ListItem from 'playbook-ui'
import Currency from 'playbook-ui'
import Title from 'playbook-ui'

const ListLayoutLeft = (props) => {
  return (
    <>
      <List
          layout="left"
      >
        <ListItem>
          <Title
              size={4}
              text="Label"
          />
          <Currency
              amount="2,000.50"
              label="Caption"
              size="sm"
          />
        </ListItem>

        <ListItem>
          <Title
              size={4}
              text="Label"
          />
          <Currency
              amount="2,000.50"
              label="Caption"
              size="sm"
          />
        </ListItem>

        <ListItem>
          <Title
              size={4}
              text="Label"
          />
          <Currency
              amount="2,000.50"
              label="Caption"
              size="sm"
          />
        </ListItem>

        <ListItem>
          <Title
              size={4}
              text="Label"
          />
          <Currency
              amount="2,000.50"
              label="Caption"
              size="sm"
          />
        </ListItem>

        <ListItem>
          <Title
              size={4}
              text="Label"
          />
          <Currency
              amount="2,000.50"
              label="Caption"
              size="sm"
          />
        </ListItem>
      </List>
    </>
  )
}

export default ListLayoutLeft

Layout Right

import React from 'react'

import List from 'playbook-ui'
import ListItem from 'playbook-ui'

import Currency from 'playbook-ui'
import Title from 'playbook-ui'

const ListLayoutRight = (props) => {
  return (
    <>
      <List
          layout="right"
      >
        <ListItem>
          <Title
              size={4}
              text="Label"
          />
          <Currency
              amount="2,000.50"
              label="Caption"
              size="sm"
          />
        </ListItem>

        <ListItem>
          <Title
              size={4}
              text="Label"
          />
          <Currency
              amount="2,000.50"
              label="Caption"
              size="sm"
          />
        </ListItem>

        <ListItem>
          <Title
              size={4}
              text="Label"
          />
          <Currency
              amount="2,000.50"
              label="Caption"
              size="sm"
          />
        </ListItem>

        <ListItem>
          <Title
              size={4}
              text="Label"
          />
          <Currency
              amount="2,000.50"
              label="Caption"
              size="sm"
          />
        </ListItem>

        <ListItem>
          <Title
              size={4}
              text="Label"
          />
          <Currency
              amount="2,000.50"
              label="Caption"
              size="sm"
          />
        </ListItem>
      </List>
    </>
  )
}

export default ListLayoutRight

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat