turretcss

All Caps


Example

All Caps

HTML

<h1 class="all-caps">...</h1>

CSS

--all-caps-margin: 0.5em 0;
--all-caps-font-family: var(--headings-font-family);
--all-caps-font-weight: var(--headings-font-weight);
--all-caps-font-size: 0.875rem;
--all-caps-font-style: normal;
--all-caps-color: inherit;
--all-caps-line-height: var(--line-height-xs);
--all-caps-text-transform: uppercase;
--all-caps-letter-spacing: var(--letter-spacing);

Sizes

All Caps XXL

All Caps XL

All Caps L

All Caps M

All Caps S

All Caps XS

All Caps XXS

HTML

<h1 class="all-caps all-caps-xxl">...</h1>
<h1 class="all-caps all-caps-xl">...</h1>
<h1 class="all-caps all-caps-l">...</h1>
<h1 class="all-caps">...</h1>
<h1 class="all-caps all-caps-s">...</h1>
<h1 class="all-caps all-caps-xs">...</h1>
<h1 class="all-caps all-caps-xxs">...</h1>

CSS

--all-caps-xxl-font-size: calc(var(--all-caps-xl-font-size) + 0.0625rem);
--all-caps-xl-font-size: calc(var(--all-caps-l-font-size) + 0.0625rem);
--all-caps-l-font-size: calc(var(--all-caps-font-size) + 0.0625rem);
--all-caps-s-font-size: calc(var(--all-caps-font-size) - 0.0625rem);
--all-caps-xs-font-size: calc(var(--all-caps-s-font-size) - 0.0625rem);
--all-caps-xxs-font-size: calc(var(--all-caps-xs-font-size) - 0.0625rem);