Image - Tocas UI

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

<div class="ts-image">
    <img src="image.png" width="150">
</div>

Introduction

An image takes up the full width of its container. Specify the width and height in the <img> element to adjust its size.

States

Disabled

A disabled image is not interactive and cannot be used.

<div class="ts-image is-disabled">
    <img src="image.png" width="150">
</div>

Variations

Rounded

A rounded image has slightly rounded corners.

<div class="ts-image is-rounded">
    <img src="image.png" width="150">
</div>

Circular

An image can be displayed in a circular shape, only works with square images.

<div class="ts-image is-circular">
    <img src="image.png" width="150">
</div>

Bordered

An image can have a border, usually used with white images to show the boundary.

<div class="ts-image is-bordered">
    <img src="image.png" width="150">
</div>

Centered

An image can be centered horizontally.

<div class="ts-image is-centered">
    <img src="image.png" width="150">
</div>

Covered

A covered image will not be distorted regardless of its aspect ratio.

<div class="ts-image is-covered">
    <img src="image.png" width="100" height="100">
</div>

Aspect Ratios

An image can be displayed in a 1:1, 4:3, or 16:9 aspect ratio, with the overflow cropped.

<div class="ts-image is-1-by-1">
    <img src="image.png" width="200">
</div>
<div class="ts-image is-4-by-3">
    <img src="image.png" width="200">
</div>
<div class="ts-image is-16-by-9">
    <img src="image.png" width="200">
</div>

Spaced

An image can be spaced before or after.

Compared to calling ourselves a "tech company",

our operation model is more like a "school." While Caris Events provides internet services,

we focus on ensuring that people can learn and gain valuable experiences during development.

We place great importance on whether a product can change lives by helping people achieve their goals.

Compared to calling ourselves a "tech company",
<div class="ts-image is-start-spaced">
    <img src="image.png" width="35">
</div>
our operation model is more like a "school." While Caris Events provides internet services,
<div class="ts-image is-end-spaced">
    <img src="image.png" width="35">
</div>
we focus on ensuring that people can learn and gain valuable experiences during development.
<div class="ts-image is-spaced">
    <img src="image.png" width="35">
</div>
We place great importance on whether a product can change lives by helping people achieve their goals.

Looking for similar components?

Imageset