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, opens in a new tab·Storybook, opens in a new tab·Playroom, opens in a new tab·Figma, opens in a new tab

Installation

bash

npm install @nib-components/copy

Usage

javascript

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

Interactive demo

jsx

<Stack space={4}>
  <Copy size="large">
    <Bold>Lorem ipsum</Bold> dolor sit amet, consectetur adipiscing elit. Sed auctor metus sed massa blandit, ut hendrerit tortor consectetur.
  </Copy>
  <Copy>Vestibulum convallis enim id leo scelerisque, vitae rutrum odio gravida. Phasellus consectetur tortor non neque semper, in volutpat lorem tempus.</Copy>
  <OrderedList>
    <ListItem>Ullamcorper lorem a faucibus a nullam vestibulum consectetur arcu a sociosqu venenatis iaculis orci magna velit.</ListItem>
    <ListItem>
      Sed auctor metus sed massa blandit:
      <UnorderedList>
        <ListItem>
          Per <Italic>posuere suspendisse</Italic> suspendisse condimentum gravida faucibus sodales consequat ipsum fusce semper maecenas cum a parturient.
        </ListItem>
        <ListItem>Mauris parturient dis natoque a leo convallis inceptos iaculis a.</ListItem>
      </UnorderedList>
    </ListItem>
    <ListItem>Dapibus mauris a a lectus sociosqu suspendisse aptent a at adipiscing tortor augue at odio lacus scelerisque mollis mus fringilla in dictumst.</ListItem>
  </OrderedList>
  <ImageCaption>An optional caption for the image. Could be used for attribution or to provide context.</ImageCaption>
  <Copy size="small" measure={false}>
    * A smaller disclaimer-style paragraph without a line length enforced.
  </Copy>
</Stack>

<Stack space={4}>
  <Copy size="large">
    <Bold>Lorem ipsum</Bold> dolor sit amet, consectetur adipiscing elit. Sed auctor metus sed massa blandit, ut hendrerit tortor consectetur.
  </Copy>
  <Copy>Vestibulum convallis enim id leo scelerisque, vitae rutrum odio gravida. Phasellus consectetur tortor non neque semper, in volutpat lorem tempus.</Copy>
  <OrderedList>
    <ListItem>Ullamcorper lorem a faucibus a nullam vestibulum consectetur arcu a sociosqu venenatis iaculis orci magna velit.</ListItem>
    <ListItem>
      Sed auctor metus sed massa blandit:
      <UnorderedList>
        <ListItem>
          Per <Italic>posuere suspendisse</Italic> suspendisse condimentum gravida faucibus sodales consequat ipsum fusce semper maecenas cum a parturient.
        </ListItem>
        <ListItem>Mauris parturient dis natoque a leo convallis inceptos iaculis a.</ListItem>
      </UnorderedList>
    </ListItem>
    <ListItem>Dapibus mauris a a lectus sociosqu suspendisse aptent a at adipiscing tortor augue at odio lacus scelerisque mollis mus fringilla in dictumst.</ListItem>
  </OrderedList>
  <ImageCaption>An optional caption for the image. Could be used for attribution or to provide context.</ImageCaption>
  <Copy size="small" measure={false}>
    * A smaller disclaimer-style paragraph without a line length enforced.
  </Copy>
</Stack>

Stack is exported in the layout package.

Props

Copy

Prop	Type	Default	Description
`measure`	boolean	`true`	Limit text to an optimal line length for reading.
`align`	string or object	`start`	Set the alignment of the text. Can be made responsive by passing an object of breakpoints. Values must be one of `'left'`, `'center'`, `'right'`, `'start'` or `'end'`.
`size`	string 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'}}`
`large`	boolean	`false`	To set the text size to be larger than normal. This prop will seen be deprecated. Please use `size='large'` instead.
`small`	boolean	`false`	To set the text size to be smaller than normal. This prop will seen be deprecated. Please use `size='small'` instead.
`color`	string or function	`copyColor` in Theme	The color of the text. Can be any of the named color tokens or theme selectors.
`component`	string	`p`	The underlying copy component.
`transform`	string		Transforms the copy. Must be a text-transform string such as `uppercase`, `lowercase`, `capitalize` etc.

Bold

Prop	Type	Default	Description
`weight`	string or number	`bold`	Change the weight, for example `700`, `800`, etc.

Italic

There are no props for this component.

OrderedList

Prop	Type	Default	Description
`space`	number or object	`2`	A size from our spacing scale. Can be made responsive by passing an object of breakpoints. Value(s) must be one of `0...10`.
`inset`	number 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`.
`indent`	number 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`.
`position`	string	`inside`	Can 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.
`listType`	string	`decimal`	Selects the type of list marker. Can be `decimal`, `lower-alpha` or `none`.
`reversed`	boolean	`false`	Causes alphabetical or numeric list items to be marked in descending order. Has no effect if other types are selected.
`start`	string		Causes 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

Prop	Type	Default	Description
`space`	number or object	`2`	A size from our spacing scale. Can be made responsive by passing an object of breakpoints. Value(s) must be one of `0...10`.
`inset`	number 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`.
`indent`	number 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`.
`position`	string	`inside`	Can 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.
`listType`	string	`disc`	Selects the type of list marker. Can be `disc`, `circle` or `none`.

ListItem

ListItem supports all props supported by the Copy component.

ImageCaption

Prop	Type	Default	Description
`showIcon`	boolean	`false`	Whether or not to display the `PhotoLibrarySystemIcon` alongside the caption. Useful for when the caption is not immediately below the image.

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>

Heading

Edit this page

Copy

Installation

Usage

Interactive demo

Props

Copy

Bold

Italic

OrderedList

UnorderedList

ListItem

ImageCaption

Considerations

Paragraphing

Component prop

Lists

Related components