Caption is a way to show topics, titles and categories or something like that.

Usage #

Caption has no background and padding unlike a label. So the caption module is useful for topics, categories and in any other cases where you want to indicate an element of some group. For example, as a category in a card.

Fall in love with space

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

<div class="card sh-150 p-6 pb-10 bg-light r-base">
    <div class="card-caption mb-2">
        <a href="#" class="caption caption-positive">...</a>
    <div class="card-head">
        <h2 class="heading-medium">...</h2>
    <div class="card-body mt-3">
        <p class="text-medium">...</p>

By default, caption has several color modifiers.

Default Primary Positive Important Dark Light

<span class="caption">Default</span>
<span class="caption caption-primary">Primary</span>
<span class="caption caption-positive">Positive</span>
<span class="caption caption-important">Important</span>
<span class="caption caption-dark">Dark</span>
<span class="caption caption-light">Light</span>

The caption module can use with links.

<a href="#" class="caption">Default</a>
<a href="#" class="caption caption-primary">Primary</a>
<a href="#" class="caption caption-positive">Positive</a>
<a href="#" class="caption caption-important">Important</a>
<a href="#" class="caption caption-dark">Dark</a>
<a href="#" class="caption caption-light">Light</a>

Caption has a few sizes and appearance modifiers.

Caps Semibold Strong Small

<span class="caption caption-positive caption-caps">Caps</span>
<span class="caption caption-positive caption-semibold">Semibold</span>
<span class="caption caption-positive caption-strong">Strong</span>
<span class="caption caption-positive caption-small">Small</span>

If you use a caption in a line with other elements, you can separate them from each other using the row module. You can add a modifier to the flex-baseline so that all elements are on the baseline. See also the flex module.

Space Text Label

<div class="row row-3 flex-baseline">
    <a href="#" class="caption caption-positive">Space</a>
    <time>May 20, 2021</time>
    <span class="label">Label</span>

Colors #

Override the existing colors

To change the color of a specific caption, simply override its color variables. You can do this in your custom SCSS. See also how to customize the framework.

.caption {
    --caption-color: var(--palette-orange-base);

Now the caption looks different than the default one. It has a pink color.

Default Caps Semibold Strong Small

<span class="caption">Default</span>
<span class="caption caption-caps">Caps</span>
<span class="caption caption-semibold">Semibold</span>
<span class="caption caption-strong">Strong</span>
<span class="caption caption-small">Small</span>

Add a color

You can add a new color to the caption by creating a color class in your custom SCSS and specifying the variable colors from the palette.

.caption-violet {
    --caption-color: var(--palette-violet-base);

Now you have a new caption with the specified color variables.

Violet Caps Semibold Strong Small

<span class="caption caption-violet">Default</span>
<span class="caption caption-violet caption-caps">Caps</span>
<span class="caption caption-violet caption-semibold">Semibold</span>
<span class="caption caption-violet caption-strong">Strong</span>
<span class="caption caption-violet caption-small">Small</span>

Variants #

Create variants

You can create your own modifiers with different caption parameters. To do this, add the necessary caption classes and their variables to your custom SCSS. See also how to customize the framework.

.caption-large {
    --caption-font-size: var(--type-scale-20);

In HTML it will look like this:

Default Primary Positive Important Dark Light

<span class="caption caption-large">Default</span>
<span class="caption caption-large caption-primary">Primary</span>
<span class="caption caption-large caption-positive">Positive</span>
<span class="caption caption-large caption-important">Important</span>
<span class="caption caption-large caption-dark">Dark</span>
<span class="caption caption-large caption-light">Light</span>

You can change other caption parameters besides text size in the same way.

.caption-heavy {
    --caption-font-weight: 900;

In HTML it will look like this:

Default Primary Positive Important Dark Light

<span class="caption caption-heavy">Default</span>
<span class="caption caption-heavy caption-primary">Primary</span>
<span class="caption caption-heavy caption-positive">Positive</span>
<span class="caption caption-heavy caption-important">Important</span>
<span class="caption caption-heavy caption-dark">Dark</span>
<span class="caption caption-heavy caption-light">Light</span>

Variables #

The default properties and colors of the module are shown below. These are all specified in the source of framework. This is here for clarity and to simplify modification and overriding of values.

// colors
--caption-color: var(--palette-neutral-base);

// vars
--caption-font-weight: normal;
--caption-font-size: var(--type-scale-14);
--caption-line-height: 1.3;
--caption-text-transform: none;