This package contains the Typography, a Material Design Component which is part of a bigger ecosystem called Slup

Installation

This package can be installed with NPM

npm install --save @slup/typography

Usage

import { Typography } from '@slup/typography'

export class Test extends Component {
  render() {
    return <Typography display4>Text</Typography>
  }
}

Available properties

| Props | Type | Default | Documentation | |------------------------|:-------------:|:-------------:|-----------------------------:| | display[1, 2, 3, 4] | boolean | false | Link | | headline | boolean | false | Link | | title | boolean | false | Link | | subheading | boolean | false | Link | | body[1, 2] | boolean | false | Link | | caption | boolean | false | Link | | button | boolean | false | Link |

Property: 'display'

This property will set the font to the biggest possible

• display4 = 112px light
• display3 = 56px regular
• display2 = 45px regular
• display1 = 34px regular

<Typography display4>Text</Typography>
<Typography display3>Text</Typography>
<Typography display2>Text</Typography>
<Typography display1>Text</Typography>

Property: 'headline'

This property will set the text to look as a Headline

• headline: 24px regular

<Typography headline>Text</Typography>

Property: 'title'

This property will set the text to look as a Title

• title: 20px medium

<Typography title>Text</Typography>

Property: 'subheading'

This property will set the text to look as a Subheading

• subheading: 15px (16px on device) regular

<Typography subheading>Text</Typography>

Property: 'body'

This is the type of text which is used in almost all projects

• body2: 13px (14px on device) medium
• body1: 13px (14px on device) regular

<Typography body2>Text</Typography>
<Typography body1>Text</Typography>

Property: 'caption'

This property will set the text to look as a Caption

• subheading: 12px regular

<Typography caption>Text</Typography>

Property: 'button'

This property will set the text to look as a Button

• subheading: 14px medium

<Typography button>Text</Typography>