Skip to content
Mesh
Stable

Copy

This component is useful for rendering text on pages. The Copy component includes a measure (line length limit) for an optimal reading experience, provides defaults for font-family, font-size, font-weight, line-height, alignment and color, and provides options to adjust those properties. It also provisions the ability to display and configure ordered or unordered lists for non-structural, content-based applications.

GitHub·Storybook·Playroom

Installation

bash
npm install @nib-components/copy

Usage

javascript
import Copy, {Bold, Italic, OrderedList, UnorderedList, ListItem} from '@nib-components/copy';

Interactive demo

jsx
  • Stack is exported in the layout package.

Props

Copy

PropTypeDefaultDescription
measurebooleantrueLimit text to an optimal line length for reading.
alignstring or objectleftSet the alignment of the text. Can be made responsive by passing an object of breakpoints. Values must be one of 'left', 'center' or 'right'.
sizestring or object'medium'The size of the text. Must be one of 'small', 'medium', or 'large'. An object of breakpoints can be defined to responsively set this prop. E.g. size={{xs: 'large', md: 'medium'}}
largebooleanfalseTo set the text size to be larger than normal. This prop will seen be deprecated. Please use size='large' instead.
smallbooleanfalseTo set the text size to be smaller than normal. This prop will seen be deprecated. Please use size='small' instead.
colorstring or functioncopyColor in ThemeThe color of the text. Can be any of the named color tokens or theme selectors.
componentstringpThe underlying copy component.
transformstringTransforms the copy. Must be a text-transform string such as uppercase, lowercase, capitalize etc.

Bold

PropTypeDefaultDescription
weightstring or numberboldChange the weight, for example 700, 800, etc.

Italic

There are no props for this component.

OrderedList

PropTypeDefaultDescription
spacenumber or object2A size from our spacing scale. Can be made responsive by passing an object of breakpoints. Value(s) must be one of 0...10.
insetnumber or object{xs: 2, md: 4}A size from our spacing scale. Can be made responsive by passing an object of breakpoints. Value(s) must be one of 0...10.
indentnumber or object{xs: 4, md: 6}A size from our spacing scale. Can be made responsive by passing an object of breakpoints. Value(s) must be one of 0...10.
positionstringinsideCan be inside or outside. A value of outside positions the list markers outside the left margin of the List parent container, with the padding between marker and copy set by the inset prop.
listTypestringdecimalSelects the type of list marker. Can be decimal, lower-alpha or none.
reversedbooleanfalseCauses alphabetical or numeric list items to be marked in descending order. Has no effect if other types are selected.
startstringCauses alphabetical or numeric ListItems to begin from a set value. Must be a number. Alphabetical list markers will correspond to their placement in the alphabet (e.g. 1 = “a”, 7 = “g”, 26 = “z” etc.).

UnorderedList

PropTypeDefaultDescription
spacenumber or object2A size from our spacing scale. Can be made responsive by passing an object of breakpoints. Value(s) must be one of 0...10.
insetnumber or object{xs: 2, md: 4}A size from our spacing scale. Can be made responsive by passing an object of breakpoints. Value(s) must be one of 0...10.
indentnumber or object{xs: 4, md: 6}A size from our spacing scale. Can be made responsive by passing an object of breakpoints. Value(s) must be one of 0...10.
positionstringinsideCan be inside or outside. A value of outside positions the list markers outside the left margin of the List parent container, with the padding between marker and copy set by the inset prop.
listTypestringdiscSelects the type of list marker. Can be disc, circle or none.

ListItem

ListItem supports all props supported by the Copy component.

Considerations

Paragraphing

Each paragraph of content requires its own Copy tag. This component does not include margins, so using our Stack inside a Box (or other layout components with inbuilt padding) will allow you to control the space between and around sibling Copy elements respectively. Line breaks can be inserted within an instance of Copy using the <br> html tag, but should not be used to separate paragraphs.

Component prop

The underlying html element of the Copy component is a <p>, however can be set to any html element or another react component via the component prop:

jsx
<Copy>Hello world!</Copy>
// Outputs something like: <p class="sc-aywg ertd">Hello world!</p>


<Copy component="div">Lorem ipsum</Copy>
// Outputs something like: <div class="sc-mwks iwdg">Lorem ipsum</div>

Lists

The exported list components should be used for ordered and unordered lists within document-style pages. Default values have been defined for spacing and alignment of lists in the hope that most will require no customisation, however appropriate props are available if adjustment is required.

Lists can be nested within lists. Nested lists must ensure semantic HTML structure by residing within a ListItem:

jsx
<OrderedList>
  <ListItem>Item 1</ListItem>
  <ListItem>
    Item 2
    <!-- Look, the closing </ListItem> tag is not placed here! -->
    <UnorderedList>
      <ListItem>Subitem A</ListItem>
      <ListItem>Subitem B</ListItem>
    </UnorderedList>
  <!-- Here is the closing </ListItem> tag -->
  </ListItem>
  <ListItem>Item 3</ListItem>
</OrderedList>

Related components

Edit this page