List - Tocas UI

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

Orenji

Caris

Haneda Shirone

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

Structure

Nested List

Lists can be placed inside of other lists.

Alternative Girls

Miyaka Yuki

Hiiragi Tsumugi

Asahina Nono

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

Variations

Unordered

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

Nanami Shirone

Miyakaze Yuri

Tsumugi Sara

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

Ordered

A list can be ordered numerically.

Inami Saki

Kurimiya Nozomi

Utaha

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

Sizes

A list can vary in size.

Houkigi Hinako

Odate Ruka

Kaizo Momo

Houkigi Hinako

Odate Ruka

Kaizo Momo

Houkigi Hinako

Odate Ruka

Kaizo Momo

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

CSS Variables

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

Looking for similar components?

Meta