Imageset - Tocas UI

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

<div class="ts-imageset is-3-images">
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
</div>

Variations

Images

Specifying the number of images in a set, from is-1-images to is-4-images.

<div class="ts-imageset is-4-images">
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
</div>

Portrait

Images can be arranged in a portrait layout.

<div class="ts-imageset is-4-images is-portrait">
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
</div>

Rounded

An imageset can have its images with rounded corners.

<div class="ts-imageset is-3-images is-rounded">
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
</div>

Density

An imageset can adjust the gap between images.

<div class="ts-imageset is-portrait is-3-images is-relaxed" style="max-width: 300px">
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
</div>
<div class="ts-imageset is-portrait is-3-images" style="max-width: 300px">
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
</div>
<div class="ts-imageset is-portrait is-3-images is-compact" style="max-width: 300px">
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
</div>

Looking for similar components?

Image