Lists

Examples

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

  • apple
  • orange
  • banana
  • strawberry
  • papaya
  • apple
  • orange
  • banana
  • strawberry
  • papaya
  1. apple
  2. orange
  3. banana
  4. strawberry
  5. papaya
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

Usage & types

  • Version
  • Install
    npm install @pluralsight/ps-design-system-text
  • Import
    import { Heading } from '@pluralsight/ps-design-system-text'
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