Cirrus

#Font Size

New
0.7.0

These classes control the font size of a specific element.

ClassStyles
text-xs
font-size: 0.75rem !important;
line-height: 1.5rem !important;
text-sm
font-size: 0.875rem !important;
line-height: 1.75rem !important;
text-md
font-size: 1rem !important;
line-height: 2rem !important;
text-lg
font-size: 1.25rem !important;
line-height: 2.25rem !important;
text-xl
font-size: 1.5rem !important;
line-height: 2.25rem !important;

#Examples

The text-[size] classes set the font size for a specific element.

Text-xs

The quick brown fox jumps over the lazy dog.

<p class="text-xs">The quick brown fox jumps over the lazy dog.</p>

Text-sm

The quick brown fox jumps over the lazy dog.

<p class="text-sm">The quick brown fox jumps over the lazy dog.</p>

Text-md

The quick brown fox jumps over the lazy dog.

<p class="text-md">The quick brown fox jumps over the lazy dog.</p>

Text-lg

The quick brown fox jumps over the lazy dog.

<p class="text-lg">The quick brown fox jumps over the lazy dog.</p>

Text-xl

The quick brown fox jumps over the lazy dog.

<p class="text-xl">The quick brown fox jumps over the lazy dog.</p>

#Variants

The classes specified above are the default utility classes for setting font sizes. You can add, change, or remove classes within the _config.scss file of Cirrus.

// _config.scss
$config: (
    extend: (
        fonts: (
            text: (
                2xl: 2rem,
            )
        )
    )
) !default;

This would generate the following additional classes.

.text-2xl {
    font-size: 2rem !important;
}

Learn more about how to extend Cirrus to support your use cases in the Configuration documentation.