Caption

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.

<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>
    <div class="card-head">
        <h2 class="heading-medium">...</h2>
    </div>
    <div class="card-body mt-3">
        <p class="text-medium">...</p>
    </div>
</div>

By default, caption has several color modifiers.

<span class="caption">Default</span>
<span class="caption caption-info">Info</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-info">Info</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.

<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.

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

Colors #

For the caption module, you can add a new color or override existing colors. See also how to work with colors for modules.

Override existing colors

Any default color in a module can be overridden. To add a new color for a module, first make sure that it is in the color palette. If not, add a color to $palette.

// =Palette
$palette: map-extend($palette, (
    pink: (
        base: ##FF579A
    )
));

Any default color in a module can be overridden by extending $colors.

// =Colors
$colors: map-extend($colors, (
    caption: (
        default: (
            base: (
                color: palette(pink, base)
            )
        )
    )
));

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

<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 color

To add a new color for a module, first make sure that it is in the color palette. If not, add a new color to $palette.

// =Palette
$palette: map-extend($palette, (
    purple: (
        base: ##8957FF
    )
));

Now extend the $colors of the module with a new modifier and add color from the palette.

// =Colors
$colors: map-extend($colors, (
    caption: (
        default: (
            purple: (
                color: palette(purple, base)
            )
        )
    )
));

Now Superkube will automatically generate a new caption-purple color modifier.

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

Variants #

You can add your own size or change an existing one by extending the type scale and module properties. See also how to work with text size scales for modules.

// =Scales
$scales: map-extend($scales, (
    type: (
        caption: (
            large: 21px
        )
    )
));

<span class="caption caption-large">Default</span>
<span class="caption caption-large caption-info">Info</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>

By extending $variants you can create your own variant of caption with custom parameters besides text size. See also how to work with variants for modules

// =Variants
$variants: map-extend($variants, (
    caption: (
        heavy: (
            font-weight: 900
        )
    )
));

<span class="caption caption-heavy">Default</span>
<span class="caption caption-heavy caption-info">Info</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 SCSS variables. This is here for clarity and to simplify modification and overriding of values

// =Type
$scales: (
    type: (
        caption: (
            caps: 13px,
            small: 13px,
            default: 14px
        )
    )
);

// =Colors
$colors: (
    caption: (
        default: (
            base: (
                color: palette(neutral, base)
            ),
            info: (
                color: palette(active, dark)
            ),
            positive: (
                color: palette(positive, dark)
            ),
            important: (
                color: palette(negative, dark)
            ),
            dark: (
                color: palette(black)
            ),
            light: (
                color: palette(white)
            )
        )
    )
);

// =Variants
$variants: (
    caption: (
        default: (
            font-weight: normal
        ),
        semibold: (
            font-weight: 600
        ),
        strong: (
            font-weight: bold
        ),
        caps: (
            text-transform: uppercase
        )
    )
);