引言

表明某段敘述來自他人所說。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小

臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約3.6萬平方公里, 為世界第38大島嶼,其中7成為山地與丘陵,平原則主要集中於西部沿海,地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。

維基百科
<div class="ts-quote">
    <p>臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約3.6萬平方公里, 為世界第38大島嶼,其中7成為山地與丘陵,平原則主要集中於西部沿海,地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。</p>
    <div class="cite">維基百科</div>
</div>
結構
來源

表明引言的來源。

選擇 Nijisanji 是因為 Hololive 更像是一間偶像公司,而妳替他們工作。但 Nijisanji 是娛樂性質取向的直播,他們會和你一起工作。

擷取自 ニュイ・ソシエール
<div class="ts-quote">
    <p>選擇 Nijisanji 是因為 Hololive 更像是一間偶像公司,而妳替他們工作。但 Nijisanji 是娛樂性質取向的直播,他們會和你一起工作。</p>
    <div class="cite">擷取自 ニュイ・ソシエール</div>
</div>
外觀
標題的

使一個引言作為前導標題那樣令人矚目。

「還能推 (支持) 的時候就儘管去推,不要留下任何的遺憾」。
去年有人因為自己喜愛的虛擬 YouTuber 因為畢業(停止簽約)而如此說道。
<div class="ts-quote is-heading">
    「還能推 (支持) 的時候就儘管去推,不要留下任何的遺憾」。
    <div class="cite">
        去年有人因為自己喜愛的虛擬 YouTuber 因為畢業(停止簽約)而如此說道。
    </div>
</div>
次要的

以另一種方式敘述引言。

最近感覺自己對虛擬 Youtuber 一絲絲退燒的感覺…原本跟其他人推坑的時候都說:「Vtuber 跟聲優啊動畫人物不一樣他們會『回應粉絲』所以你會覺得很有親切感 」。

不過想想每個紅了之後也都一模一樣了,都遠到沒有足夠貢獻就接近不了的存在…實在有點心灰意冷,至少現在還有愛的時候繼續支持下去…

一位匿名網友在 /virtuelles/ 發表,由於太經典後續被作為複製文使用。
<div class="ts-quote is-secondary">
    <p>最近感覺自己對虛擬 Youtuber 一絲絲退燒的感覺…原本跟其他人推坑的時候都說:「Vtuber 跟聲優啊動畫人物不一樣他們會『回應粉絲』所以你會覺得很有親切感 」。</p>
    <p>不過想想每個紅了之後也都一模一樣了,都遠到沒有足夠貢獻就接近不了的存在…實在有點心灰意冷,至少現在還有愛的時候繼續支持下去…</p>
    <div class="cite">
        一位匿名網友在 /virtuelles/ 發表,由於太經典後續被作為複製文使用。
    </div>
</div>
尺寸

更改引言的文字大小。

我不是想把這塑造成創世之舉,但你不清楚這有多麼地困難。她的出生是針對那些喜愛動漫、網路文化的人,而不是特別針對你或是你的觀眾。如果妳還有什麼問題那可能在妳自己。

DigitrevX 在某則推文上如此表示。

我不是想把這塑造成創世之舉,但你不清楚這有多麼地困難。她的出生是針對那些喜愛動漫、網路文化的人,而不是特別針對你或是你的觀眾。如果妳還有什麼問題那可能在妳自己。

DigitrevX 在某則推文上如此表示。

我不是想把這塑造成創世之舉,但你不清楚這有多麼地困難。她的出生是針對那些喜愛動漫、網路文化的人,而不是特別針對你或是你的觀眾。如果妳還有什麼問題那可能在妳自己。

DigitrevX 在某則推文上如此表示。
<div class="ts-quote is-small">
    <p>我不是想把這塑造成創世之舉,但你不清楚這有多麼地困難。她的出生是針對那些喜愛動漫、網路文化的人,而不是特別針對你或是你的觀眾。如果妳還有什麼問題那可能在妳自己。</p>
    <div class="cite">DigitrevX 在某則推文上如此表示。</div>
</div>
<div class="ts-quote">
    <p>我不是想把這塑造成創世之舉,但你不清楚這有多麼地困難。她的出生是針對那些喜愛動漫、網路文化的人,而不是特別針對你或是你的觀眾。如果妳還有什麼問題那可能在妳自己。</p>
    <div class="cite">DigitrevX 在某則推文上如此表示。</div>
</div>
<div class="ts-quote is-large">
    <p>我不是想把這塑造成創世之舉,但你不清楚這有多麼地困難。她的出生是針對那些喜愛動漫、網路文化的人,而不是特別針對你或是你的觀眾。如果妳還有什麼問題那可能在妳自己。</p>
    <div class="cite">DigitrevX 在某則推文上如此表示。</div>
</div>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標