Typography

Use typography to present your design and content as clearly and efficiently as possible.

Display4

Display3

Display2

Display1

Headline

Title

Subheading

Body1

ButtonCaptionOverline

Theme

You can also add new configurations

export class GlobalVariables implements PartialThemeVariables { ... typography = { lyTyp: { subTitle: { fontFamily: `'Nunito', sans-serif`, textAlign: 'center', paddingAbove: '1em', opacity: .6, fontSize: '32px', fontWeight: 400 } } }; }

You can use it like this

<h2 lyTyp="subTitle">Hello</h2>

Truncate text

Long title, long title, long title, long title, long title, long title

Long content, long content, long content, long content, long content, long content, long content.

Options for Inputs

lyTyp

  • display4
  • display3
  • display2
  • display1
  • headline
  • title
  • subheading
  • subheading2
  • body2
  • body1
  • button
  • caption
  • overline
  • subTitle

API

Made withfavoriteby Enlcxx

Currently v2.9.3. Released under the MIT License