Caption

Usage #

Caption can be used by wrapping it in a figcaption tag.

<figcaption>...</figcaption>

Image #

Here is an example of using a caption for an image.

<figure>
    <img src="...">
    <figcaption>...</figcaption>
</figure>

Video #

Here's an example of using a caption for an embed video.

<figure class="embed">
    <div class="embed-content embed-responsive">
        <iframe ...>
    </div>
    <figcaption></figcaption>
</figure>

Color #

You can change the caption text color and background color by changing the module's CSS variables:

figcaption {
    --figcaption-color: var(--palette-white);
    --figcaption-background-color: var(--palette-black);
}

Variables #

Here are the CSS variables used in the module. Setting them allows you to change the appearance and parameters of the module.

// colors
--figcaption-color: var(--text-default);
--figcaption-background-color: transparent;

// params
--figcaption-font-size: 12px;
--figcaption-line-height: var(--body-text-line);
--figcaption-font-style: normal;
--figcaption-font-weight: normal;
--figcaption-text-transform: none;
--figcaption-letter-spacing: 0;
--figcaption-space: 0.4em;
--figcaption-padding: 0;
--figcaption-border-radius: 0;