Typography
Styling for headings, paragraphs, and text.
Typograpy
Page headings should appear once per page.
Page headings feature four extra large font size, a bold font weight, and tight tracking for emphasis.
Section Title
Add subtitle to any Heading.
Paragraph text is styled with a lighter color and a larger line height for readability.
Additional children get a top margin to separate them from the previous paragraph.
Overview
Crafted UI provides a set of typography styles for headings, paragraphs, and text. These styles are designed to be consistent and easy to use across different components and pages. Common Heading components are reused for specialty headings such as Pages, Sections, and Cards.
Headings
Description
Headings are styled with a larger font size, bold font weight, and tight tracking for emphasis. The Heading1 component is used for page headings, while the Heading2 component is used for section titles.
Sample
Heading1
Page headings should appear once per page.
Heading2
Used for Section Titles
Heading3
Add subtitle to any Heading.
Heading4
Extra Heading sizes provides.
Heading5
Any distinction from standard text.
Usage
import { Heading1, Heading2, Heading3, Heading4, Heading5 } from "@crafted-ui/react";
<Heading1 title="Heading1" subtitle="Page headings should appear once per page." />
<Heading2 title="Heading2" subtitle="Used for Section Titles" />
<Heading3 title="Heading3" subtitle="Add subtitle to any Heading." />
<Heading4 title="Heading4" subtitle="Extra Heading sizes provides." />
<Heading5 title="Heading5" subtitle="Any distinction from standard text." />