The Text component is a wrapper component that will apply typography styles to the text inside.

  • Use different headlines and copies to structure your content hierarchically
  • Avoid using sizes outside the given range
  • Text default size is medium

The Text supports margin, fontSize, fontWeight, fontFamily and textAlign styled-system props.


default text

custom paragraph

using fontSize alias you can set (small, medium or large)

You can apply responsive styles



paragraph large

paragraph medium

paragraph small

paragraph inverted large

paragraph inverted medium

paragraph inverted small

paragraph weak large

paragraph weak medium

paragraph weak small

paragraph weak inverted large

paragraph weak inverted medium

paragraph weak inverted small