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