Wrap - Tocas UI

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

<div class="ts-wrap">
    <button class="ts-button">Button</button>
    <button class="ts-button">Button</button>
    <button class="ts-button">Button</button>
</div>

Introduction

Items in a Wrap have gaps and will wrap when they overflow. Use Grid for items to fill remaining space.

Variations

Vertical

A wrap can arrange its items vertically.

<div class="ts-wrap is-vertical">
    <button class="ts-button">Button</button>
    <button class="ts-button">Button</button>
    <button class="ts-button">Button</button>
</div>

Horizontal Aligns

A wrap can have its items aligned to the start, center, or end.

<div class="ts-wrap is-start-aligned">
    <button class="ts-button">Start aligned</button>
</div>
<div class="ts-wrap is-center-aligned">
    <button class="ts-button">Center aligned</button>
</div>
<div class="ts-wrap is-end-aligned">
    <button class="ts-button">End aligned</button>
</div>

Vertical Aligns

A wrap can have its items aligned at the top, middle, or bottom.

Consectetur adipiscing elit. In fermentum metus dolor.

Top aligned

Consectetur adipiscing elit. In fermentum metus dolor.

Middle aligned

Consectetur adipiscing elit. In fermentum metus dolor.

Bottom aligned

Consectetur adipiscing elit. In fermentum metus dolor.

<div class="ts-wrap is-top-aligned">
    <div class="ts-box has-padded" style="width: 30%">
        Consectetur adipiscing elit. In fermentum metus dolor.
    </div>
    <div class="ts-box has-padded" style="width: 30%">
        Top aligned
    </div>
    <div class="ts-box has-padded" style="width: 30%">
        Consectetur adipiscing elit. In fermentum metus dolor.
    </div>
</div>
<div class="ts-wrap is-middle-aligned">
    <div class="ts-box has-padded" style="width: 30%">
        Consectetur adipiscing elit. In fermentum metus dolor.
    </div>
    <div class="ts-box has-padded" style="width: 30%">
        Middle aligned
    </div>
    <div class="ts-box has-padded" style="width: 30%">
        Consectetur adipiscing elit. In fermentum metus dolor.
    </div>
</div>
<div class="ts-wrap is-bottom-aligned">
    <div class="ts-box has-padded" style="width: 30%">
        Consectetur adipiscing elit. In fermentum metus dolor.
    </div>
    <div class="ts-box has-padded" style="width: 30%">
        Bottom aligned
    </div>
    <div class="ts-box has-padded" style="width: 30%">
        Consectetur adipiscing elit. In fermentum metus dolor.
    </div>
</div>

Density

A wrap can adjust the gap between items.

<div class="ts-wrap is-relaxed">
    <button class="ts-button">Item</button>
    <button class="ts-button">Item</button>
</div>
<div class="ts-wrap">
    <button class="ts-button">Item</button>
    <button class="ts-button">Item</button>
</div>
<div class="ts-wrap is-compact">
    <button class="ts-button">Item</button>
    <button class="ts-button">Item</button>
</div>

Compositions

Chips

Separate the chips automatically.

Yami Odymel

Henry Wu

Sean

Ming Tsay

Mac Taylor

Tsundere Chen

<div class="ts-wrap is-compact">
    <div class="ts-chip">
        <img src="user.png" /> Yami Odymel
    </div>
    <div class="ts-chip">
        <img src="user.png" /> Henry Wu
    </div>
    <div class="ts-chip">
        <img src="user.png" /> Sean
    </div>
    <div class="ts-chip">
        <img src="user.png" /> Ming Tsay
    </div>
    <div class="ts-chip">
        <img src="user.png" /> Mac Taylor
    </div>
    <div class="ts-chip">
        <img src="user.png" /> Tsundere Chen
    </div>
</div>

Form Fields

Keep a consistent gap between form fields.

Username

Password

<div class="ts-wrap is-vertical">
    <div class="ts-text is-label">Username</div>
    <div class="ts-input is-start-icon">
        <span class="ts-icon is-user-icon"></span>
        <input type="text" />
    </div>
    <div class="ts-text is-label">Password</div>
    <div class="ts-input is-start-icon">
        <span class="ts-icon is-lock-icon"></span>
        <input type="password" />
    </div>
</div>

CSS Variables

	Description	Default Value	Target
--gap	The width of the gap between items.	`1rem`	`.ts-wrap`

Looking for similar components?

Grid