Typography

Base Typography

Draft
Dependencies: shell 
                    
import "@solutas/mgnl-elements-css/build/components/typography/typography.css"

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

This is a paragraph

Text Strong Medium

Text Strong Small

Text Default Medium

Text Default Small

                    
<div class="container mt-2">
    <h1>H1 Heading</h1>
    <h2>H2 Heading</h2>
    <h3>H3 Heading</h3>
    <h4>H4 Heading</h4>
    <h5>H5 Heading</h5>
    <h6>H6 Heading</h6>
    <p>This is a paragraph </p>
    <p class="text-strong-md">Text Strong Medium</p>
    <p class="text-strong-sm">Text Strong Small</p>
    <p class="text-default-md">Text Default Medium</p>
    <p class="text-default-sm">Text Default Small</p>
</div>

Use CSS Var

--mgnl-typography-block-heading-h1-font-weight
--mgnl-typography-block-heading-h1-font-size
--mgnl-typography-block-heading-h1-letter-spacing
--mgnl-typography-block-heading-h1-line-height
--mgnl-typography-block-heading-h1-font-family
--mgnl-typography-block-heading-h2-font-weight
--mgnl-typography-block-heading-h2-font-size
--mgnl-typography-block-heading-h2-letter-spacing
--mgnl-typography-block-heading-h2-line-height
--mgnl-typography-block-heading-h2-font-family
--mgnl-typography-block-heading-h3-font-weight
--mgnl-typography-block-heading-h3-font-size
--mgnl-typography-block-heading-h3-letter-spacing
--mgnl-typography-block-heading-h3-line-height
--mgnl-typography-block-heading-h3-font-family
--mgnl-typography-block-heading-h4-font-weight
--mgnl-typography-block-heading-h4-font-size
--mgnl-typography-block-heading-h4-letter-spacing
--mgnl-typography-block-heading-h4-line-height
--mgnl-typography-block-heading-h4-font-family
--mgnl-typography-block-heading-h5-font-weight
--mgnl-typography-block-heading-h5-font-size
--mgnl-typography-block-heading-h5-letter-spacing
--mgnl-typography-block-heading-h5-line-height
--mgnl-typography-block-heading-h5-font-family
--mgnl-typography-block-heading-h6-font-weight
--mgnl-typography-block-heading-h6-font-size
--mgnl-typography-block-heading-h6-letter-spacing
--mgnl-typography-block-heading-h6-line-height
--mgnl-typography-block-heading-h6-font-family
--mgnl-typography-block-heading-h1-paragraph-spacing
--mgnl-typography-block-heading-h2-paragraph-spacing
--mgnl-typography-block-heading-h3-paragraph-spacing
--mgnl-typography-block-heading-h4-paragraph-spacing
--mgnl-typography-block-heading-h5-paragraph-spacing
--mgnl-typography-block-heading-h6-paragraph-spacing
--mgnl-typography-block-text-strong-md-font-weight
--mgnl-typography-block-text-strong-md-font-size
--mgnl-typography-block-text-strong-md-letter-spacing
--mgnl-typography-block-text-strong-md-line-height
--mgnl-typography-block-text-strong-md-font-family
--mgnl-typography-block-text-strong-sm-font-weight
--mgnl-typography-block-text-strong-sm-font-size
--mgnl-typography-block-text-strong-sm-letter-spacing
--mgnl-typography-block-text-strong-sm-line-height
--mgnl-typography-block-text-strong-sm-font-family
--mgnl-typography-block-text-default-md-font-weight
--mgnl-typography-block-text-default-md-font-size
--mgnl-typography-block-text-default-md-letter-spacing
--mgnl-typography-block-text-default-md-line-height
--mgnl-typography-block-text-default-md-font-family
--mgnl-typography-block-text-default-sm-font-weight
--mgnl-typography-block-text-default-sm-font-size
--mgnl-typography-block-text-default-sm-letter-spacing
--mgnl-typography-block-text-default-sm-line-height
--mgnl-typography-block-text-default-sm-font-family
--mgnl-typography-block-text-strong-md-paragraph-spacing
--mgnl-typography-block-text-strong-sm-paragraph-spacing