List - Tocas UI

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

Orenji

Caris

Shirone

<div class="ts-list is-unordered">
    <div class="item">Orenji</div>
    <div class="item">Caris</div>
    <div class="item">Shirone</div>
</div>

Structure

Nested List

Lists can be placed inside of other lists.

Alternative Girls

Yuki

Tsumugi

Asahina

<div class="ts-list is-unordered">
    <div class="item">
        Alternative Girls
        <div class="ts-list is-unordered">
            <div class="item">Yuki</div>
            <div class="item">Tsumugi</div>
            <div class="item">Asahina</div>
        </div>
    </div>
</div>

Variations

Unordered

A list can be unordered and mark items with a bullet.

Nanami

Yuri

Sara

<div class="ts-list is-unordered">
    <div class="item">Nanami</div>
    <div class="item">Yuri</div>
    <div class="item">Sara</div>
</div>

Ordered

A list can be ordered numerically.

Inami

Kurimiya

Utaha

<div class="ts-list is-ordered">
    <div class="item">Inami</div>
    <div class="item">Kurimiya</div>
    <div class="item">Utaha</div>
</div>

Sizes

A list can vary in size.

Hinako

Ruka

Kaizo

Hinako

Ruka

Kaizo

Hinako

Ruka

Kaizo

<div class="ts-list is-small is-unordered">
    <div class="item">Hinako</div>
    <div class="item">Ruka</div>
    <div class="item">Kaizo</div>
</div>
<div class="ts-list is-unordered">
    <div class="item">Hinako</div>
    <div class="item">Ruka</div>
    <div class="item">Kaizo</div>
</div>
<div class="ts-list is-large is-unordered">
    <div class="item">Hinako</div>
    <div class="item">Ruka</div>
    <div class="item">Kaizo</div>
</div>

CSS Variables

	Description	Default Value	Target
--gap	The size of the gap between items.	`0rem`	`.ts-list`

Looking for similar components?

Meta