Header

Provides a short summary of content.
Example
Theme
Default
Default
Light
Dark
Scale
Medium
Large
Medium
Small
"You can only die once, so make sure it's worth it"
<div class="ts-header">"You can only die once, so make sure it's worth it"</div>
Introduction

This component is very similar to Text, by default it is presented in a larger font size and can have icons.

Variations
Icon

Symbolic icon in header is default centered.

User Groups
<div class="ts-header is-icon">
    <span class="ts-icon is-users-icon"></span>
    User Groups
</div>
Side Icon

A symbolic icon can also be placed on the side.

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

The text is presented with the boldest font weight. It will look the same as default if the font does not support the boldness.

Today is Wasabi Day!
<div class="ts-header is-heavy">Today is Wasabi Day!</div>
Negative

Contains dangerous and negative emphasis.

File deleting procedure
<div class="ts-header is-negative">File deleting procedure</div>
Secondary

Used to present less important headings, e.g., subheadings.

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

Text exceeding a certain width will be truncated without line breaks or overflow. The parent container needs a fixed width.

The sun is shining brightly, and I can't see anything on the road ahead. I don't know what's ahead of me, but I feel like I'm moving towards a new world.
<div class="ts-header is-truncated">The sun is shining brightly, and I can't see anything on the road ahead. I don't know what's ahead of me, but I feel like I'm moving towards a new world.</div>
Aligns

Change the alignment of the text.

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

Compared to other components, Headers are available in more 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?
Designed by Yami Odymel from Taiwan with the love of the contributors ❤️. The source code is licensed under MIT and the documents are CC 0 public domain. Tocas UI is a design language of Caris Events, which is owned by Sorae & Co.
Translators: Yami Odymel
An organization brand logo that owns Tocas UI