Stable
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
True Green large text
Lorem ipsum dolor sit amet.
Responsively aligned copy!
* A smaller disclaimer-style paragraph without a line length enforced.
jsx
Props
Copy
| Prop | Type | Default | Description |
|---|---|---|---|
measure | boolean | true | Limit text to an optimal line length for reading. |
align | string or object | left | Set the alignment of the text. Can be made responsive by passing an object of breakpoints. Values must be one of 'left', 'center' or 'right'. |
small | boolean | false | Make the size of the text smaller. |
large | boolean | false | Make the size of the text larger. |
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.
Considerations
Copy Margins
Our Copy component does not include any margins. To add margins to paragraphs please use our Stack layout component for consistent vertical spacing.
The underlying html element of the Copy component is a p, however can be set to any html element or another react component.