Typography Components

Headline

Headlines are used as titles or headings.

<Card>
    <Headline>Headline</Headline>
</Card>

Body Text

Body Text is used as paragraphs or when displaying single line of information.

<Card>
    <BodyText>This is default BodyText component</BodyText>
</Card>

Eyebrow

Eyebrows are used for labeling data or captions.

<Card>
    <Eyebrow>This is Eyebrow</Eyebrow>
</Card>

Font Styles

Subdued

You can deemphasize text by making it a lighter shade of grey.

<BodyText>In a paragraph of text, when you have words that need to be deemphasized, <BodyText inline el='span' subdued>subdued text</BodyText> becomes less apparent</BodyText>

Italic

You can emphasize text by italicizing it.

<BodyText>In a paragraph of text, when you have words that need to be deemphasized, <BodyText inline el='span' italic>subdued text</BodyText> becomes less apparent</BodyText>

Bold

You can emphasize text by bolding it.

<BodyText>In a paragraph of text, when you have words that need to be emphasized, <BodyText inline el='span' bold>bold text</BodyText> becomes more apparent</BodyText>

CSS Classes

You can add classes on these components to create modifications to attributes like spacing and color. Please follow the typography guideline as much as possible.

<Card>
    <Grid columns={2}>
        <Grid.Column>
            <Headline className="m-b-1">Font Sizes</Headline>
            <BodyText><BodyText inline el='span' subdued>.fs-0</BodyText> = 10px</BodyText>
            <BodyText><BodyText inline el='span' subdued>.fs-1</BodyText> = 12px</BodyText>
            <BodyText><BodyText inline el='span' subdued>.fs-2</BodyText> = 14px</BodyText>
            <BodyText><BodyText inline el='span' subdued>.fs-3</BodyText> = 16px</BodyText>
            <BodyText><BodyText inline el='span' subdued>.fs-4</BodyText> = 20px</BodyText>
            <BodyText><BodyText inline el='span' subdued>.fs-5</BodyText> = 26px</BodyText>
            <BodyText><BodyText inline el='span' subdued>.fs-6</BodyText> = 32px</BodyText>
            <BodyText><BodyText inline el='span' subdued>.fs-7</BodyText> = 41px</BodyText>
        </Grid.Column>
        <Grid.Column>
            <Headline className="m-b-1">Font Styles</Headline>
            <BodyText><BodyText inline el='span' subdued>.fw-bold</BodyText> = bold font weight</BodyText>
            <BodyText><BodyText inline el='span' subdued>.fw-normal</BodyText> = normal font weight</BodyText>
            <BodyText><BodyText inline el='span' subdued>.fs-italic</BodyText> = italic font</BodyText>
            <BodyText><BodyText inline el='span' subdued>.fs-normal</BodyText> = normal font</BodyText>
        </Grid.Column>
    </Grid>
</Card>