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

Styled System API

| 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

Styled System API

| 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;