3.3.1Copy
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
| 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. |
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. 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.