@lightspeed/cirrus-text

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;