Lists

For created lists with bullets, numbers, or no bullet.

Install
npm install @pluralsight/ps-design-system-text
Import
import { Heading } from '@pluralsight/ps-design-system-text'

Examples

Heading styles compose complimentary typography attributes for simplified implementation. Try to use common heading styles when possible.

import { List } from '@pluralsight/ps-design-system-text'
import React from 'react'

const Example: React.FC = props => {
  return (
    <div className="example-grid--col-3">
      <List>
        <List.Item>apple</List.Item>
        <List.Item>orange</List.Item>
        <List.Item>banana</List.Item>
        <List.Item>strawberry</List.Item>
        <List.Item>papaya</List.Item>
      </List>

      <List type="bulleted">
        <List.Item>apple</List.Item>
        <List.Item>orange</List.Item>
        <List.Item>banana</List.Item>
        <List.Item>strawberry</List.Item>
        <List.Item>papaya</List.Item>
      </List>

      <List type="numbered">
        <List.Item>apple</List.Item>
        <List.Item>orange</List.Item>
        <List.Item>banana</List.Item>
        <List.Item>strawberry</List.Item>
        <List.Item>papaya</List.Item>
      </List>
    </div>
  )
}

export default Example

Props

Name	Type	Description	Default
`type`	`default \| bulleted \| numbered`	semantics and bullet styles (from List.types)	`default`
`size`	`small \| medium \| large`	Text size (from List.sizes)	`medium`
`color`	`primary \| secondary`	Text color (from List.colors)	`primary`