Content - Tocas UI

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

Replace Sass with CSS Variables and design a color theme system.

Color theme systems are often a major challenge in front-end development. The advent of preprocessors like Sass and Less has solved many issues by allowing you to handle colors with just a few lines of code.

<div class="ts-box">
    <div class="ts-content is-dense has-dark">
        Replace Sass with CSS Variables and design a color theme system.
    </div>
    <div class="ts-divider"></div>
    <div class="ts-content">
        Color theme systems are often a major challenge in front-end development. The advent of preprocessors like Sass and Less has solved many issues by allowing you to handle colors with just a few lines of code.
    </div>
</div>

Introduction

Content is a block section with padding, typically used with Box.

States

Active

An active content presents it's been selected.

Apple

Pineapple

Bread

<div class="ts-box">
    <div class="ts-content is-dense">Apple</div>
    <div class="ts-content is-active is-dense">Pineapple</div>
    <div class="ts-content is-dense">Bread</div>
</div>

Disabled

A content can show it's no longer available.

Caris

Leria

Iknore

<div class="ts-box">
    <div class="ts-content is-dense">Caris</div>
    <div class="ts-content is-disabled is-dense">Leria</div>
    <div class="ts-content is-dense">Iknore</div>
</div>

Variations

Secondary

A content with less emphasis.

Event Store is a concept derived from CQRS and Event Sourcing principles, and it's written in C#, it's also a microservices event storage system.

6,439,852 Views

<div class="ts-box">
    <div class="ts-content">
        Event Store is a concept derived from CQRS and Event Sourcing principles, and it's written in C#, it's also a microservices event storage system.
    </div>
    <div class="ts-divider"></div>
    <div class="ts-content is-secondary is-dense">
        <span class="ts-icon is-end-spaced is-eye-icon"></span> 6,439,852 Views
    </div>
</div>

Tertiary

A content can look less important.

This story is over.

Perhaps someone else will find a use for the ruins of this place.

<div class="ts-content is-tertiary is-vertically-very-padded">
    <div class="ts-header is-large is-center-aligned">
        This story is over.
    </div>
    <div class="ts-text is-secondary is-center-aligned">
        Perhaps someone else will find a use for the ruins of this place.
    </div>
</div>

Text Aligns

A content can have its text alignment specified.

Start aligned

Center aligned

End aligned

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

Interactive

A card can have visual feedback when user hovered or clicked on it.

Download Favorite Archive

<div class="ts-box">
    <a class="ts-content is-interactive is-dense">
        <span class="ts-icon is-end-spaced is-download-icon"></span> Download
    </a>
    <a class="ts-content is-interactive is-active is-dense">
        <span class="ts-icon is-end-spaced is-heart-icon"></span> Favorite
    </a>
    <a class="ts-content is-interactive is-dense">
        <span class="ts-icon is-end-spaced is-box-archive-icon"></span> Archive
    </a>
</div>

Padded

A content can increase its padding.

3 times the original padding

1.5 times the original padding

Only increase left and right padding

Only increase top and bottom padding

<div class="ts-box">
    <div class="ts-content is-very-padded">
        3 times the original padding
    </div>
</div>
<div class="ts-box">
    <div class="ts-content is-padded">
        1.5 times the original padding
    </div>
</div>
<div class="ts-box">
    <div class="ts-content is-horizontally-padded">
        Only increase left and right padding
    </div>
</div>
<div class="ts-box">
    <div class="ts-content is-vertically-padded">
        Only increase top and bottom padding
    </div>
</div>

Rounded

A content can have rounded corners.

Changing real-life events through the internet, not just innovating.

<div class="ts-content is-rounded is-tertiary">
    Changing real-life events through the internet, not just innovating.
</div>

Fitted

A content can remove its padding.

Remove all padding

Remove left and right padding

Remove top and bottom padding

<div class="ts-box">
    <div class="ts-content is-fitted">
        Remove all padding
    </div>
</div>
<div class="ts-box">
    <div class="ts-content is-horizontally-fitted">
        Remove left and right padding
    </div>
</div>
<div class="ts-box">
    <div class="ts-content is-vertically-fitted">
        Remove top and bottom padding
    </div>
</div>

Dense

A content can reduce its height to look tighter.

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

Micro Mages developers designed a special "offset index" system. The game's design elements are worth careful observation.

<div class="ts-box">
    <div class="ts-content is-dense">
        <div class="ts-header">Image inversion, mirroring: Compress a game to under 40 KB</div>
        Micro Mages developers designed a special "offset index" system. The game's design elements are worth careful observation.
    </div>
</div>

Compositions

Dark Section

Present a content block with a dark theme. See Color page for more information.

けものフレンズ

Welcome to ようこそジャパリパーク！
今日もドッタンバッタン大騒ぎ

<div class="ts-box">
    <div class="ts-content is-dense has-dark">
        けものフレンズ
    </div>
    <div class="ts-content">
        Welcome to ようこそジャパリパーク！<br>
        今日もドッタンバッタン大騒ぎ
    </div>
</div>

Looking for similar components?