Quote

A quote is a reference to a statement made by someone else.
Example
Theme
Auto
Auto
Light
Dark
Scale
Medium
Large
Medium
Small

Taiwan is an island located in the eastern part of Asia, on the northwest side of the Pacific Ocean. It lies between the Ryukyu Islands and the Philippine Islands, with the Taiwan Strait separating it from the Eurasian continent to the west.

Wikipedia
<div class="ts-quote">
    <p>Taiwan is an island located in the eastern part of Asia, on the northwest side of the Pacific Ocean. It lies between the Ryukyu Islands and the Philippine Islands, with the Taiwan Strait separating it from the Eurasian continent to the west.</p>
    <div class="cite">Wikipedia</div>
</div>
Structure
Cite

A quote with a citation.

Choosing Nijisanji because Hololive feels more like an idol company where you work for them, while Nijisanji works with you.

from Nui Sociere
<div class="ts-quote">
    <p>Choosing Nijisanji because Hololive feels more like an idol company where you work for them, while Nijisanji works with you.</p>
    <div class="cite">from Nui Sociere</div>
</div>
Variations
Heading

A heading quote is a quote that stands out.

"Support while you can, and don't leave any regrets behind."
Said someone because their favorite virtual YouTuber graduated.
<div class="ts-quote is-heading">
    "Support while you can, and don't leave any regrets behind."
    <div class="cite">
        Said someone because their favorite virtual YouTuber graduated.
    </div>
</div>
Secondary

A quote that is less prominent.

Recently, I've been feeling a bit of burnout towards virtual YouTubers. I used to tell others, "Vtubers are different from animated characters; they interact with fans."

But thinking about it, once they become popular, they end up being just like everyone else—distant and unattainable. It's a bit disheartening. At least now, while I still care, I'll continue to support them...

Posted on /virtuelles/ by an anonymous user.
<div class="ts-quote is-secondary">
    <p>Recently, I've been feeling a bit of burnout towards virtual YouTubers. I used to tell others, "Vtubers are different from animated characters; they interact with fans."</p>
    <p>But thinking about it, once they become popular, they end up being just like everyone else—distant and unattainable. It's a bit disheartening. At least now, while I still care, I'll continue to support them...</p>
    <div class="cite">
        Posted on /virtuelles/ by an anonymous user.
    </div>
</div>
Sizes

A quote can have different sizes.

You have no idea how difficult it has been. Her creation is aimed at fans of anime and internet culture.

DigitrevX stated this in a tweet.

You have no idea how difficult it has been. Her creation is aimed at fans of anime and internet culture.

DigitrevX stated this in a tweet.

You have no idea how difficult it has been. Her creation is aimed at fans of anime and internet culture.

DigitrevX stated this in a tweet.
<div class="ts-quote is-small">
    <p>You have no idea how difficult it has been. Her creation is aimed at fans of anime and internet culture.</p>
    <div class="cite">DigitrevX stated this in a tweet.</div>
</div>
<div class="ts-quote">
    <p>You have no idea how difficult it has been. Her creation is aimed at fans of anime and internet culture.</p>
    <div class="cite">DigitrevX stated this in a tweet.</div>
</div>
<div class="ts-quote is-large">
    <p>You have no idea how difficult it has been. Her creation is aimed at fans of anime and internet culture.</p>
    <div class="cite">DigitrevX stated this in a tweet.</div>
</div>
Looking for similar components?
Designed by Yami Odymel from Taiwan, along with the ❤️ from contributors. The source code is licensed under MIT, and the documentation is under CC 0 public domain. Feel free to use, share, or contribute. Tocas UI is a design system for Caris Events, part of Sorae & Co., Ltd.
Translators: Yami Odymel
Trademark of the owner of Tocas UI