turretcss

Headings

Example

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

HTML

<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>

CSS

--headings-margin: 1em 0 0.5em 0;
--headings-font-family: inherit;
--headings-font-weight: var(--font-weight-semibold);
--headings-font-style: normal;
--headings-color: inherit;
--headings-line-height: var(--line-height-s);
--headings-text-transform: none;
--headings-letter-spacing: var(--letter-spacing);

--h1-font-size: 2rem;
--h2-font-size: 1.5rem;
--h3-font-size: 1.25rem;
--h4-font-size: 1.125rem;
--h5-font-size: 1rem;
--h6-font-size: 0.875rem;

Headings Small

Heading 1 Heading 1 small

Heading 2 Heading 2 small

Heading 3 Heading 3 small

Heading 4 Heading 4 small

Heading 5 Heading 5 small
Heading 6 Heading 6 small

HTML

<h1>...<small>...</small></h1>
<h2>...<small>...</small></h2>
<h3>...<small>...</small></h3>
<h4>...<small>...</small></h4>
<h5>...<small>...</small></h5>
<h6>...<small>...</small></h6>

CSS

--headings-small-font-family: inherit;
--headings-small-font-weight: inherit;
--headings-small-font-style: inherit;
--headings-small-size: 0.6em;
--headings-small-color: inherit;

Related