Modules

Text

This module has helpers for working with text and helps to create colors and different sizes of text.

Usage #

Superkube has several classes for specifying text size.

Giga

Huge

Large

Default

Medium

Small

Tiny

Micro


<p class="text-giga">Giga</p>
<p class="text-mega">Mega</p>
<p class="text-huge">Huge</p>
<p class="text-large">Large</p>
<p>Default</p>
<p class="text-medium">Medium</p>
<p class="text-small">Small</p>
<p class="text-tiny">Tiny</p>
<p class="text-micro">Micro</p>

Size #

By default, the size of text is set in $scales. The first value is the font size, the second value is the line-height parameter.


// =Scales
$scales: (
    type: (
        text: (
            giga: 32px 1.5,
            mega: 24px 1.5,
            huge: 21px 1.5,
            large: 18px 1.5,
            default: 16px 1.5,
            medium: 14px 1.5,
            small: 13px 1.5,
            tiny: 12px 1.5,
            micro: 11px 1.5
        )
    )
);

You can change the size of text or add your own size by extending $scales. See also how to work with text size scales for modules.


// =Scales
$scales: map-extend($scales, (
    type: (
        text: (
            exa: 40px 1.5,
            huge: 21px 1.5
        )
    )
));

In the example above, the text-huge gets a new font size of 21px and a new text size exa is added.

Superkube will automatically create a text-mega class specified in $scales.


<p class="text-exa">...</p>

Responsive #

If you need to change the text sizes for different screens, extend the type-sm, type-md, type-lg groups in $scales.


// =Scales
$scales: map-extend($scales, (
    type-sm: (
        text: (
            giga: 28px 1.5
        )
    ),
    type-lg: (
        text: (
            giga: 44px 1.3
        )
    )
));

In the example above, the giga text would be 28px on small screens and 44px on larger screens. Of course, you can specify text size behavior for all named text, not just for giga.

Color #

By default, text have several classes for specifying color.

Default

Primary

Dark

Moderated

Muted

Success

Error

Light

Light Moderated

Light Muted


<p>Default</p>
<p class="text-primary">Primary</p>
<p class="text-dark">Dark</p>
<p class="text-moderated">Moderated</p>
<p class="text-muted">Muted</p>
<p class="text-success">Success</p>
<p class="text-error">Error</p>
<p class="text-light">Light</p>
<p class="text-light-moderated">Light Moderated</p>
<p class="text-light-muted">Light Muted</p>

You can change the color of text or add your own color.


// change
.text-muted {
    --text-color: var(--palette-black-40);
}

// add
.text-important {
    --text-color: var(--palette-negative-base);
}

In the example above, the muted text will become more muted. Also, the new important text color will be added.

Text important


<p class="text-large text-important">...</p>

Gradient #

The text can have a gradient color. To do this, create a class with the grt- prefix and specify the necessary gradient parameters.


.grt-primary {
    --text-gradient-color: linear-gradient(
        90deg,
        var(--palette-positive-base),
        var(--palette-active-base)
    );
}

Now you have a gradient modifier for the text.

Text Gradient


<p class="text-large grt-primary">...</p>

Style #

In some cases it may be needed to change the style of text. To do this simply specify additional text properties in your SCSS.


.text-small {
    font-weight: 600;
    font-style: italic;
    letter-spacing: 0.01em;
}

Helpers #

Text have several helper classes that change the font-weight.

Text Thin

Text Semibold

Text Strong


<p class="text-thin">...</p>
<p class="text-semibold">...</p>
<p class="text-strong">...</p>

That's what each of them means:

  • thin — light or thin weight with font-weight: 300;
  • semibold — semibold weight with font-weight: 600;
  • strong — bold weight with font-weight: bold.

Note: the font weight classes will not work if they are not in the font you are using in your project.

In addition to the helper classes for the font weight, there are a few more.

Text Italic

Text Caps

Text Mono

Text Nowrap


<p class="text-italic">...</p>
<p class="text-caps">...</p>
<p class="text-mono">...</p>
<p class="text-nowrap">...</p>