Font Size

Extra Small

This size is typically used for smaller text elements.

<p class="fs-xs ta-c c-slate">Aa</p>

Small

This size is often used for slightly larger text elements.

<p class="fs-sm ta-c c-slate">Aa</p>

Medium

Initial value

This is the standard size for body text.

<p class="fs-md ta-c c-slate">Aa</p>

Large

This size is often used for prominent headings.

<p class="fs-lg ta-c c-slate">Aa</p>

Extra Large

This size is typically used for major headings or titles.

<p class="fs-xl ta-c c-slate">Aa</p>

XXL

This size is often used for very prominent headings.

<p class="fs-xxl ta-c c-slate">Aa</p>

3XL

This size is typically used for the largest headings.

<p class="fs-3xl ta-c c-slate">Aa</p>

4XL

This size is often used for the most prominent headings.

<p class="fs-4xl ta-c c-slate">Aa</p>

5XL

This size is typically used for the most prominent text elements.

<p class="fs-5xl ta-c c-slate">Aa</p>

6XL

This size is often used for the most prominent text elements.

<p class="fs-6xl ta-c c-slate">Aa</p>

7XL

This size is typically used for the largest display text.

<p class="fs-7xl ta-c c-slate">Aa</p>

8XL

This size is typically used for the largest display text.

<p class="fs-8xl ta-c c-slate">Aa</p>

9XL

This size is typically used for the largest display text.

<p class="fs-9xl ta-c c-slate">Aa</p>

Using utility variants

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Responsive design

Target different screen sizes by adding breakpoint prefixes. Styles apply from the specified breakpoint and up.

Target specific viewport sizes with breakpoint prefixes

Hover state variant

Apply styles conditionally when users hover over an element using the h: prefix.