Header - Tocas UI

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

"You can only die once; make sure it's worth it."

<div class="ts-header">"You can only die once; make sure it's worth it."</div>

Introduction

A header is similar to Text, but it is displayed in a larger font size by default and allows for icons.

Variations

Icon

A header can be formatted to emphasize an icon.

Friends

<div class="ts-header is-icon">
    <span class="ts-icon is-users-icon"></span>
    Friends
</div>

Side Icon

A header may contain an icon.

99.9% Uptime Guarantee

<div class="ts-header is-start-icon">
    <span class="ts-icon is-plug-icon"></span>
    99.9% Uptime Guarantee
</div>

Heavy

A header can have its text bolder.

It's wasabi day!

<div class="ts-header is-heavy">It's wasabi day!</div>

Negative

A header can tell the content is dangerous.

Deleting Files

<div class="ts-header is-negative">Deleting Files</div>

Secondary

A header can be formatted to appear less important.

Create a user from the database.

<div class="ts-header is-secondary">Create a user from the database.</div>

Truncated

A header can truncate text when it overflows, requiring a container with a fixed width.

Under the blazing sun, the road ahead is completely obscured; but a sense that you're stepping into a new world.

<div class="ts-header is-truncated">Under the blazing sun, the road ahead is completely obscured; but a sense that you're stepping into a new world.</div>

Uppercased and Lowercased

A header can have its text to be uppercased or lowercased.

Update Avatar

<div class="ts-header is-uppercased">Update Avatar</div>
<div class="ts-header is-lowercased">Update Avatar</div>

Text Aligns

A header can have its text aligned to a side.

Start Aligned

Center Aligned

End Aligned

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

Sizes

A header can have different sizes.

(Default) Tocas UI from Taiwan.

(Large) Tocas UI from Taiwan.

(Big) Tocas UI from Taiwan.

(Huge) Tocas UI from Taiwan.

(Massive) Tocas UI from Taiwan.

<div class="ts-header">(Default) Tocas UI from Taiwan.</div>
<div class="ts-header is-large">(Large) Tocas UI from Taiwan.</div>
<div class="ts-header is-big">(Big) Tocas UI from Taiwan.</div>
<div class="ts-header is-huge">(Huge) Tocas UI from Taiwan.</div>
<div class="ts-header is-massive">(Massive) Tocas UI from Taiwan.</div>

Looking for similar components?

Text