Text

Text component is the used to render text and paragraphs within an interface using well-defined typographic styles. it renders p tag by default


Headings

Headings h1..h6 are titles or subtitles that you want to display on a webpage.

H1 Almost before we knew it, we had left the ground.

H2 Almost before we knew it, we had left the ground.

H3 Almost before we knew it, we had left the ground.

H4 Almost before we knew it, we had left the ground.

H5 Almost before we knew it, we had left the ground.
H6 Almost before we knew it, we had left the ground.

Paragraph

The Text component renders a paragraph by default.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Purus viverra accumsan in nisl nisi scelerisque eu. Commodo elit at imperdiet dui accumsan sit amet nulla facilisi. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Gravida quis blandit turpis cursus in.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Purus viverra accumsan in nisl nisi scelerisque eu. Commodo elit at imperdiet dui accumsan sit amet nulla facilisi. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Gravida quis blandit turpis cursus in.

Sizes

With this you can change the font size of the text property.

fs-sm Font Size: 0.75rem;

fs-md Font Size: 0.875rem;

Font Size: 1rem;

fs-lg Font Size: 1.5rem;

fs-xl Font Size: 2.25rem;


Font Weights

Font weight properties

HAIRLINE 100

THIN 200

LIGHT 300

NORMAL 400

MEDIUM 500

SEMIBOLD 600

BOLD 700

EXTRABOLD 800

BLACK 900