Title

Abstraction over a heading element.

It strips away the default margin. The developer handles spacing either through an explicit margin, or through other mechanisms.

The font's size and weight, along with the line height, come for theme.headings. We have consistent headings accros the app by default.

All headings come in bold aka fontWeight:700.

their size vary from 16px to 34px

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

The fontSize matches the order by default, so that there is some hierarchy between headings. We may set a size explicitely.

• order: pick the underlying html element, such as 1 to pick h1. order should always be specified, otherwise it defaults to h1, which should be unique. Affects the font-size
• size: override the font-size caused by order. we pick a size in the heading hierarchy such as h3, or a number. Picking a size in the hierarchy creates indirection as the concrete value is not apparent.
• lineClamp, sets the maximum number of lines. truncates the title with text-overflow: ellipsis, and with -webkit-line-clamp: n

For example, we indicate a h3 with a theme's h5 size.

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