Checklist - Tocas UI

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

This PC can run Windows 2077.

Get a free cat with a system upgrade.

Upgrade is not available.

<div class="ts-checklist">
    <div class="item is-positive">This PC can run Windows 2077.</div>
    <div class="item is-positive">Get a free cat with a system upgrade.</div>
    <div class="item is-negative">Upgrade is not available.</div>
</div>

Item Variations

Positive

A checklist item can be marked as positive.

Update is compatible.

The processor is compatible.

<div class="ts-checklist">
    <div class="item is-positive">Update is compatible.</div>
    <div class="item is-positive">The processor is compatible.</div>
</div>

Negative

A checklist item can be marked as negative.

The graphics card is outdated.

This version is deprecated.

<div class="ts-checklist">
    <div class="item is-negative">The graphics card is outdated.</div>
    <div class="item is-negative">This version is deprecated.</div>
</div>

Warning

A checklist item can be marked as a warning.

This application is not verified.

Think twice before speaking.

<div class="ts-checklist">
    <div class="item is-warning">This application is not verified.</div>
    <div class="item is-warning">Think twice before speaking.</div>
</div>

Added

A checklist item can be marked as added.

We've improved system stability.

Increased character movement speed.

<div class="ts-checklist">
    <div class="item is-added">We've improved system stability.</div>
    <div class="item is-added">Increased character movement speed.</div>
</div>

Removed

A checklist item can be marked as removed.

The feature has been removed.

The level has been reduced to 2.

<div class="ts-checklist">
    <div class="item is-removed">The feature has been removed.</div>
    <div class="item is-removed">The level has been reduced to 2.</div>
</div>

Info

A checklist item can be marked as information.

A new version is available for download.

This person is trying to remain neutral.

<div class="ts-checklist">
    <div class="item is-info">A new version is available for download.</div>
    <div class="item is-info">This person is trying to remain neutral.</div>
</div>

Looking for similar components?

List