Meta - Tocas UI

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

Terms Privacy Contact Us

<div class="ts-meta">
    <a class="item">Terms</a>
    <a class="item">Privacy</a>
    <a class="item">Contact Us</a>
</div>

Variations

Secondary

A metadata with less emphasis.

Nozomi Yuri Haruka

<div class="ts-meta is-secondary">
    <a class="item">Nozomi</a>
    <a class="item">Yuri</a>
    <a class="item">Haruka</a>
</div>

Text Aligns

The metadata items can be aligned to the start, center, or end.

Start aligned Start aligned

Center aligned Center aligned

End aligned End aligned

<div class="ts-meta is-start-aligned">
    <a class="item">Start aligned</a>
    <a class="item">Start aligned</a>
</div>
<div class="ts-meta is-center-aligned">
    <a class="item">Center aligned</a>
    <a class="item">Center aligned</a>
</div>
<div class="ts-meta is-end-aligned">
    <a class="item">End aligned</a>
    <a class="item">End aligned</a>
</div>

Sizes

A metadata can have different sizes.

Yoshino Mako Murasame

<div class="ts-meta is-small">
    <a class="item">Yoshino</a>
    <a class="item">Mako</a>
    <a class="item">Murasame</a>
</div>
<div class="ts-meta">
    <a class="item">Yoshino</a>
    <a class="item">Mako</a>
    <a class="item">Murasame</a>
</div>
<div class="ts-meta is-large">
    <a class="item">Yoshino</a>
    <a class="item">Mako</a>
    <a class="item">Murasame</a>
</div>

Compositions

Post Metadata

Metadata under the post titles.

Ambitious virtual YouTuber groups are moving towards idolization

Yami Odymel 14 Feb 2020

Image inversion, mirroring: Compress a game to under 40 KB

Yami Odymel 18 Jan 2020

<div class="ts-header">Ambitious virtual YouTuber groups are moving towards idolization</div>
<div class="ts-meta is-secondary">
    <a class="item">Yami Odymel</a>
    <a class="item">14 Feb 2020</a>
</div>
<div class="ts-divider is-section"></div>
<div class="ts-header">Image inversion, mirroring: Compress a game to under 40 KB</div>
<div class="ts-meta is-secondary">
    <a class="item">Yami Odymel</a>
    <a class="item">18 Jan 2020</a>
</div>

Looking for similar components?

List