Mask - Tocas UI

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

<div class="ts-image">
    <img src="image.png" style="max-width: 450px">
    <div class="ts-mask is-centered">
        <div class="ts-loading is-large" style="color: #FFF"></div>
    </div>
</div>

Variations

Partially

A mask can cover only part of its content's height, not the entire area.

Top Mask

And here's the description.

Middle Mask

And here's the description.

Bottom Mask

And here's the description.

<div class="ts-image">
    <img src="image.png" style="max-width: 450px">
    <div class="ts-mask is-top">
        <div class="ts-content" style="color: #FFF">
            <div class="ts-header">Top Mask</div>
            And here's the description.
        </div>
    </div>
</div>
<div class="ts-image">
    <img src="image.png" style="max-width: 450px">
    <div class="ts-mask is-middle">
        <div class="ts-content" style="color: #FFF">
            <div class="ts-header">Middle Mask</div>
            And here's the description.
        </div>
    </div>
</div>
<div class="ts-image">
    <img src="image.png" style="max-width: 450px">
    <div class="ts-mask is-bottom">
        <div class="ts-content" style="color: #FFF">
            <div class="ts-header">Bottom Mask</div>
            And here's the description.
        </div>
    </div>
</div>

Centered

A mask can center its content, typically used with Loading.

<div class="ts-image">
    <img src="image.png" style="max-width: 450px">
    <div class="ts-mask is-centered">
        <div class="ts-loading is-large" style="color: #FFF"></div>
    </div>
</div>

Faded

A mask background can be faded and placed at the top or bottom of its container.

Top Mask

And here's the description.

Bottom Mask

And here's the description.

<div class="ts-image">
    <img src="image.png" style="max-width: 450px">
    <div class="ts-mask is-faded is-top">
        <div class="ts-content" style="color: #FFF">
            <div class="ts-header">Top Mask</div>
            And here's the description.
        </div>
    </div>
</div>
<div class="ts-image">
    <img src="image.png" style="max-width: 450px">
    <div class="ts-mask is-faded is-bottom">
        <div class="ts-content" style="color: #FFF">
            <div class="ts-header">Bottom Mask</div>
            And here's the description.
        </div>
    </div>
</div>

Secondary

A secondary mask has a transparent background.

On-Sale

Buy this cake for just NT$3,000!

<div class="ts-image">
    <img src="image.png" style="max-width: 450px">
    <div class="ts-mask is-secondary is-bottom">
        <div class="ts-content" style="color: #333">
            <div class="ts-header">On-Sale</div>
            Buy this cake for just NT$3,000!
        </div>
    </div>
</div>

Blurring

A mask with a blurred background.

<div class="ts-image">
    <img src="image.png" style="max-width: 450px">
    <div class="ts-mask is-blurring"></div>
</div>

Compositions

Close Button

A close button on the top-right corner of an image.

<div class="ts-image is-rounded">
    <img src="image.png" width="150">
    <div class="ts-mask is-secondary is-top">
        <div class="ts-content is-compact is-end-aligned has-leading-none">
            <button class="ts-close"></button>
        </div>
    </div>
</div>

Metadata

A metadata at the bottom of an image.

32 KB

<div class="ts-image is-rounded">
    <img src="image.png" width="150">
    <div class="ts-mask is-secondary is-bottom">
        <div class="ts-content is-compact is-end-aligned">
            <div class="ts-badge">32 KB</div>
        </div>
    </div>
</div>