Text
Base component for every Text styles.
Installation
First, make sure you have been through the Getting Started steps of adding Cirrus in your application.
If using Yarn:
yarn add @lightspeed/cirrus-text
Or using npm:
npm i -S @lightspeed/cirrus-text
React Component
<Text>
Note: This components supports multiple properties from styled-system.
- TextColor
- FontSize
- FontWeight
- Space
- LineHeight
- LetterSpacing
- TextTransform
Prop | Type | Description | Default |
---|---|---|---|
element |
string | HTML element for text | 'p' |
children |
React.ReactNode | The content to display inside the text | - |
className |
string | Extra CSS classes appended to end of text element | - |
fontWeight |
string | Set the font-weight for the text | - |
color |
string | Any Cirrus color token, ex green-100 or CSS value. |
- |
size |
enum('small', 'normal', 'large', 'xlarge') | Automatically apply font size and line-height. This property will take precedence over styled-system props | - |
<Heading1>
<Heading2>
<Heading3>
<Heading4>
Note: This components supports multiple properties from styled-system.
- TextColor
- FontSize
- FontWeight
- Space
- LineHeight
- LetterSpacing
- TextTransform
Prop | Type | Description | Default |
---|---|---|---|
children |
React.ReactNode | The content to display inside the text | - |
fontWeight |
string | Set the font-weight for the text | - |
color |
string | Any Cirrus color token, ex green-100 or CSS value. |
- |
<TextLink>
Prop | Type | Description | Default |
---|---|---|---|
children |
React.ReactNode | The content to display inside the link | - |
className |
string | Extra CSS classes appended to end of link element | - |
fontWeight |
string | Set the font-weight for the text | - |
<TextContent>
Prop | Type | Description | Default |
---|---|---|---|
children |
React.ReactNode | The content to display. An extra class will be applied to each children of type <Text> to add spacing |
- |
Example
import React from 'react';
import { Text, Heading1, TextLink, TextContent } from '@lightspeed/cirrus-text';
const MyComponent = () => (
<div>
<Heading1>Heading</Heading1>
<Text>Body text</Text>
<TextLink href="https://www.lightspeedhq.com">Link</TextLink>
<TextContent>
<Heading1>Heading content</Heading1>
<Text>Body text content</Text>
<TextLink href="https://www.lightspeedhq.com">Link</TextLink>
</TextContent>
</div>
);
export default MyComponent;