引言 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

臺灣是位於亞洲東部、太平洋西北側的島嶼，地處琉球群島與菲律賓群島之間，西隔臺灣海峽與歐亞大陸相望；面積約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 在某則推文上如此表示。

<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>

在尋找相似的元件嗎？