@lightspeed/cirrus-text

5.0.0-beta.1 • Public • Published

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;

Readme

Keywords

none

Package Sidebar

Install

npm i @lightspeed/cirrus-text

Weekly Downloads

61

Version

5.0.0-beta.1

License

MIT

Unpacked Size

36.2 kB

Total Files

13

Last publish

Collaborators

  • kurt.bergeron
  • lightspeedhq
  • ls-guillaume-lambert
  • ls-frederic-bouchard
  • anomen