Magnet UI

Typography

Check out below text utilities.

Heading text

For heading u can use h1, h2, h3, h4, h5, h6 elements.
The same font-styling is present for class names h1, h2, h3, h4, h5, h6 class.

H1-Heading

H2-Heading

H3-Heading

H4-Heading

H5-Heading
H6-Heading

Paragraph text

For paragraph u can use p element along with given class.

P-Paragraph-body-copy-large

P-Paragraph-body-copy-regular style

P-Paragraph-body-copy-medium

P-Paragraph-body-copy-small

Align text

To align the text add text-center, text-left, text-right class to wrapper element

H4-Heading Text Align Center


H5-Heading Text Align left

H6-Heading Text Align right

Extra styles

You can use the mark tag to highlight text.

This line of text is meant to be treated as no longer accurate.

Text with bold font weight

Small size text

Text with primary-color

Text with secondary-color