中繼資料

用以標示某個主體的時間、作者或統計資料和附屬行為。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<div class="ts-meta">
    <a class="item">使用者條約</a>
    <a class="item">隱私政策</a>
    <a class="item">聯繫我們</a>
</div>
外觀
次要的

使其文字顏色變得更不顯眼。

<div class="ts-meta is-secondary">
    <a class="item">天野望</a>
    <a class="item">火井向百合</a>
    <a class="item">成海遙香</a>
</div>
文字對齊

更改文字的對齊方式。

<div class="ts-meta is-start-aligned">
    <a class="item">置起始位置</a>
    <a class="item">置起始位置</a>
</div>
<div class="ts-meta is-center-aligned">
    <a class="item">我置中</a>
    <a class="item">我置中</a>
</div>
<div class="ts-meta is-end-aligned">
    <a class="item">置結束位置</a>
    <a class="item">置結束位置</a>
</div>
尺寸

更改中繼資料的大小。

<div class="ts-meta is-small">
    <a class="item">朝武芳乃</a>
    <a class="item">常陸茉子</a>
    <a class="item">ムラサメ</a>
</div>
<div class="ts-meta">
    <a class="item">朝武芳乃</a>
    <a class="item">常陸茉子</a>
    <a class="item">ムラサメ</a>
</div>
<div class="ts-meta is-large">
    <a class="item">朝武芳乃</a>
    <a class="item">常陸茉子</a>
    <a class="item">ムラサメ</a>
</div>
組合應用
標題與資料

在部落格或是一些文章列表中,經常能看到其標題底下會有一個中繼資料的區塊。

野心更大的虛擬 YouTuber 團體邁向偶像化,而距離感也與日俱增
圖像複用、反轉、鏡射:怎麼將遊戲壓縮在 40 KB 以下還同時保持關卡獨特性?
<div class="ts-header">野心更大的虛擬 YouTuber 團體邁向偶像化,而距離感也與日俱增</div>
<div class="ts-meta is-secondary">
    <a class="item">Yami Odymel</a>
    <a class="item">20200214 日</a>
</div>
<div class="ts-divider is-section"></div>
<div class="ts-header">圖像複用、反轉、鏡射:怎麼將遊戲壓縮在 40 KB 以下還同時保持關卡獨特性?</div>
<div class="ts-meta is-secondary">
    <a class="item">Yami Odymel</a>
    <a class="item">20200118 日</a>
</div>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標