Title

Thin abstraction over a heading element. It uses a HTML heading under the hood, h1 by default.

It removes the user agent stylesheet's default margin by setting them to 0. It keeps the bold font weight.

The font size, font weight, and line height, come from theme.headings.

The default theme defines five font sizes:

h5 comes at 16px
h4 comes at 18px
h3 comes at 22px
h2 comes at 26px
h1 comes at 34px

We set the heading as follows:

order: pick the underlying html element, such as 1 for h1. It defaults to h1. Affects the font-size by default.
size: override the font-size caused by order. we pick a size as a number or as a heading in the heading hierarchy such as h5.
lineClamp: set the maximum number n of lines. If not set, the browser allow multiple lines for a heading element. If truncation happens, it shows an ellipsis thanks to text-overflow: ellipsis.

<Title order={3} size={"h5"}>
    Daybreak
</Title>

Title

Thin abstraction over a heading element. It uses a HTML heading under the hood, h1 by default.

It removes the user agent stylesheet's default margin by setting them to 0. It keeps the bold font weight.

The font size, font weight, and line height, come from theme.headings.

The default theme defines five font sizes:

h5 comes at 16px

h4 comes at 18px

h3 comes at 22px

h2 comes at 26px

h1 comes at 34px

We set the heading as follows:

order: pick the underlying html element, such as 1 for h1. It defaults to h1. Affects the font-size by default.

size: override the font-size caused by order. we pick a size as a number or as a heading in the heading hierarchy such as h5.

lineClamp: set the maximum number n of lines. If not set, the browser allow multiple lines for a heading element. If truncation happens, it shows an ellipsis thanks to text-overflow: ellipsis.

<Title order={3} size={"h5"}> Daybreak </Title>