<span class="ts-text">Hello, world!</span>A text can be a hyperlink with an icon indicating it opens in a new tab.
For more info, see the <a class="ts-text is-external-link">white paper</a>.A text can have an icon on the side.
<a class="ts-text is-icon-link">
<span class="ts-icon is-arrow-left-icon"></span>
Go Back
</a>A hyperlink text that only shows the underline when hovered.
<a class="ts-text is-undecorated">The link</a> only shows an underline when hovered over.A text can present as a code.
Use <span class="ts-text is-code">ts-button</span> to define a button.A text can be a field label that looks a bit bolder.
<span class="ts-text is-label">Username</span>
<div class="ts-input has-top-spaced-small">
<input type="text">
</div>A text can be a description, it's usually smaller and dimmer.
<button class="ts-button">Save Changes</button>
<div class="ts-text is-description has-top-spaced-small">
The changes you make will take effect after 24 hours.
</div>A text can be a superscript or subscript.
A friend bought a piece of fabric. When she showed it to us[8]:
"Why should I care?" I said.
We couldn't help but burst into laughter.[9]—why should it matter to anyone else?
<p>A friend bought a piece of fabric. When she showed it to us<span class="ts-text is-sup">[8]</span>:</p>
<p>"Why should I care?" I said.</p>
<p>We couldn't help but burst into laughter.<span class="ts-text is-sub">[9]</span>—why should it matter to anyone else?</p>A text can indicates a keyboard key.
Press <span class="ts-text is-key">shift</span> + <span class="ts-text is-key">H</span> to begin.A text can be highlighted.
I <span class="ts-text is-mark">can't see</span> when I close my eyes.A disabled text cannot be selected or interacted with.
<span class="ts-text is-disabled">We don't doubt we're killers without a kill.</span>A text with an asterisk indicates something is required.
<label class="ts-checkbox">
<input type="checkbox" checked />
<span class="ts-text is-required">I am over 18 years old.</span>
</label>A text with dashsed underline to hint it's editable.
Total amount: <span class="ts-text is-editable">$ 3,600</span>A text with less emphasis.
<span class="ts-text is-secondary">Program is running...</span>A text can be bold.
Press the <span class="ts-text is-bold">button</span> to reveal everything.A text with heavier weight.
<span class="ts-text is-heavy">OH NO</span>! It's wasabi day!A text can be italic.
There's a <span class="ts-text is-italic">world</span> he created himself.A text can be lined through to indicate it's no longer valid.
<span class="ts-text is-deleted">This text is no longer relevant.</span>A text can be underlined.
A giant crystal is in <span class="ts-text is-underlined">Carlydia</span>.Text can be truncated if too long, requires a fixed-width container.
<div class="ts-text is-truncated" style="max-width: 300px">
Under the blazing sun, the road ahead is completely obscured.
</div>A text presents something dangerous.
<span class="ts-text is-negative">Server is damaged!</span>A text can be uppercased or lowercased.
<div class="ts-text is-uppercased">Here comes another world.</div>
<div class="ts-text is-lowercased">Here comes another world.</div>A text can be aligned to the start, center, or end.
<div class="ts-text is-start-aligned">Start aligned</div>
<div class="ts-text is-center-aligned">Center aligned</div>
<div class="ts-text is-end-aligned">End aligned</div>A text can be justified to equalize the gaps between characters for a balanced visual appearance.
<div class="ts-text is-justify-aligned">
This paragraph uses "Justify" to automatically equalize the gaps between characters for a more balanced and comfortable visual appearance. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum metus ac consequat mollis.
</div>A text can have different sizes.
<div class="ts-text is-tiny">(Tiny) Tocas UI from Taiwan.</div>
<div class="ts-text is-small">(Small) Tocas UI from Taiwan.</div>
<div class="ts-text is-medium">(Medium) Tocas UI from Taiwan.</div>
<div class="ts-text is-large">(Large) Tocas UI from Taiwan.</div>
<div class="ts-text is-big">(Big) Tocas UI from Taiwan.</div>
<div class="ts-text is-huge">(Huge) Tocas UI from Taiwan.</div>
<div class="ts-text is-massive">(Massive) Tocas UI from Taiwan.</div>