Headings
The larger headings (3xl, 4xl, and 5xl) have the same size when presented on small screens. They are used to create additional hierarchy on large screens. Each size has its default bottom margin.
5xl
This is a heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, doloribus repellat explicabo ipsam reprehenderit sed blanditiis omnis sint, aliquam ducimus nam, labore veniam exercitationem harum quaerat sit fugit vitae voluptas.
c-heading c-heading--5xl
4xl
Default for H1.
This is a heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, doloribus repellat explicabo ipsam reprehenderit sed blanditiis omnis sint, aliquam ducimus nam, labore veniam exercitationem harum quaerat sit fugit vitae voluptas.
c-heading c-heading--4xl
3xl
Default for H2.
This is a heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, doloribus repellat explicabo ipsam reprehenderit sed blanditiis omnis sint, aliquam ducimus nam, labore veniam exercitationem harum quaerat sit fugit vitae voluptas.
c-heading c-heading--3xl
2xl
Default for H3.
This is a heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, doloribus repellat explicabo ipsam reprehenderit sed blanditiis omnis sint, aliquam ducimus nam, labore veniam exercitationem harum quaerat sit fugit vitae voluptas.
c-heading c-heading--2xl
xl
Default for H4.
This is a heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, doloribus repellat explicabo ipsam reprehenderit sed blanditiis omnis sint, aliquam ducimus nam, labore veniam exercitationem harum quaerat sit fugit vitae voluptas.
c-heading c-heading--xl
l
Default for H5.
This is a heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, doloribus repellat explicabo ipsam reprehenderit sed blanditiis omnis sint, aliquam ducimus nam, labore veniam exercitationem harum quaerat sit fugit vitae voluptas.
c-heading c-heading--l
m
Default for H6.
This is a heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, doloribus repellat explicabo ipsam reprehenderit sed blanditiis omnis sint, aliquam ducimus nam, labore veniam exercitationem harum quaerat sit fugit vitae voluptas.
c-heading c-heading--m
s
This is a heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, doloribus repellat explicabo ipsam reprehenderit sed blanditiis omnis sint, aliquam ducimus nam, labore veniam exercitationem harum quaerat sit fugit vitae voluptas.
c-heading c-heading--s
xs
This is a heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, doloribus repellat explicabo ipsam reprehenderit sed blanditiis omnis sint, aliquam ducimus nam, labore veniam exercitationem harum quaerat sit fugit vitae voluptas.
c-heading c-heading--xs
2xs
This is a heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, doloribus repellat explicabo ipsam reprehenderit sed blanditiis omnis sint, aliquam ducimus nam, labore veniam exercitationem harum quaerat sit fugit vitae voluptas.
c-heading c-heading--2xs
Sub-heading (deprecated)
This is a subheading
This is a heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, doloribus repellat explicabo ipsam reprehenderit sed blanditiis omnis sint, aliquam ducimus nam, labore veniam exercitationem harum quaerat sit fugit vitae voluptas.
See also Uppercase headings.