@lightspeed/cirrus-text NPM

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;

@everything-registry/sub-chunk-548 @zalastax/nolb-_lig @lightspeed/cirrus-checkbox @lightspeed/cirrus-input @lightspeed/cirrus-radio

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago