Skip to content
3.3.1

Copy

A component for rendering text on pages. The Copy component includes a measure (line length limit) for an optimal reading experience. It sets the correct font-family, font-size, font-weight, line-height and color, with options to adjust the alignment, size, color, and measure.

Installation

bash
npm install @nib-components/copy

Usage

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

Interactive demo

Lorem ipsum dolor sit amet.

Responsive copy!

* A smaller disclaimer-style paragraph without a line length enforced.

jsx

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'.
smallbooleanfalseMake the size of the text smaller.
largebooleanfalseMake the size of the text larger.
colorstring or functioncopyColor in ThemeThe color of the text.
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.

Considerations

Copy Margins

Our Copy component does not include any margins. If you wish to add margins to paragraphs please do so using the styled-components-spacing library.

The underlying html element of the Copy component is a p, however can be set to any html element or another react component.