Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

@lightspeed/cirrus-text

Package Overview
Dependencies
0
Maintainers
7
Versions
12
Issues
File Explorer

Advanced tools

@lightspeed/cirrus-text

Cirrus Text Component

    5.0.0-beta.1latest

Version published
Maintainers
7
Yearly downloads
10,763
decreased by-53.5%

Weekly downloads

Readme

Source

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

PropTypeDescriptionDefault
elementstringHTML element for text'p'
childrenReact.ReactNodeThe content to display inside the text-
classNamestringExtra CSS classes appended to end of text element-
fontWeightstringSet the font-weight for the text-
colorstringAny Cirrus color token, ex green-100 or CSS value.-
sizeenum('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

PropTypeDescriptionDefault
childrenReact.ReactNodeThe content to display inside the text-
fontWeightstringSet the font-weight for the text-
colorstringAny Cirrus color token, ex green-100 or CSS value.-

<TextLink>

PropTypeDescriptionDefault
childrenReact.ReactNodeThe content to display inside the link-
classNamestringExtra CSS classes appended to end of link element-
fontWeightstringSet the font-weight for the text-

<TextContent>

PropTypeDescriptionDefault
childrenReact.ReactNodeThe 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;
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc