@lightspeed/cirrus-text

Cirrus Text Component

Stats

StarsIssuesVersionUpdatedCreatedSize
@lightspeed/cirrus-text
5.0.0-beta.13 years ago4 years agoMinified + gzip package size for @lightspeed/cirrus-text in KB

Readme

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;

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.