箱型容器
帶有邊框的基礎架構容器並可與其他元素混搭使用。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
好吃的千層蛋糕!

在 5 月之前於線上網路門市訂購,現在還特別加贈限量環保袋。

<div class="ts-box">
    <img class="ts-image" src="image.png">
    <div class="ts-content">
        <div class="ts-header is-heavy">好吃的千層蛋糕!</div>
        <p>在 5 月之前於線上網路門市訂購,現在還特別加贈限量環保袋。</p>
    </div>
</div>
概要

箱型容器看起來有點像是一張卡片,但箱型容器並沒有內距。這就是為什麼通常箱型容器會與內容區塊表格圖片這種貼邊元素一起使用。

由於容器沒有預設內距,這讓多個元件搭配上使用更容易。如果元件只有純文字,正常情況下則可以直接使用敘述卡片則會讓結構較為單純。

內容
象徵圖示

箱型容器裡可以在其角落擺放一個圖示作為其象徵。當容器的高度太矮時,其象徵圖示會被裁切。

任何已發布或是計畫中之產品及服務,皆不得用來刻意偏頗大眾想法、喜好、甚至混淆視聽,且該產品及服務不得擁有自我立場。

<div class="ts-box">
    <div class="ts-content">
        <p>任何已發布或是計畫中之產品及服務,皆不得用來刻意偏頗大眾想法、喜好、甚至混淆視聽,且該產品及服務不得擁有自我立場。</p>
    </div>
    <div class="symbol">
        <span class="ts-icon is-circle-exclamation-icon"></span>
    </div>
</div>
外觀
水平的

容器裡的元素排列預設為上下垂直,但若排版需要則可以將其改為左右水平排列。

Zedd - Papercut (Audio) ft. Troye Sivan

Get "True Colors" on iTunes: http://smarturl.it/ZeddTrueColors

<div class="ts-box is-horizontal">
    <div class="ts-image is-covered">
        <img style="width: 90px; height: 100%;" src="image.png">
    </div>
    <div class="ts-content">
        <div class="ts-header">
            Zedd - Papercut (Audio) ft. Troye Sivan
        </div>
        <p>Get "True Colors" on iTunes: http://smarturl.it/ZeddTrueColors</p>
    </div>
</div>
最小寬度的

由於此元件預設為流動寬度,若希望寬度以內容為主,則可以將其設為最小寬度。

<div class="ts-box is-collapsed">
    <div class="ts-content">
        <p>這是一個來自台灣的社群網站,在這裡我們並沒有「讚」或是「已讀」。</p>
    </div>
</div>
標記的

讓容器的某個邊緣有特別標記的樣式。

上部標記
下部標記
左邊標記
右部標記
<div class="ts-box is-top-indicated">
    <div class="ts-content">上部標記</div>
</div>
<div class="ts-box is-bottom-indicated">
    <div class="ts-content">下部標記</div>
</div>
<div class="ts-box is-left-indicated">
    <div class="ts-content">左邊標記</div>
</div>
<div class="ts-box is-right-indicated">
    <div class="ts-content">右部標記</div>
</div>
語意

讓容器擁有邊緣標記的同時,更改其標記顏色語意。這可以用來強調這個容器呈現的內容是否危險、安全或是需讓人注意的。

負面的
正面的
警告的
<div class="ts-box is-negative is-top-indicated">
    <div class="ts-content">負面的</div>
</div>
<div class="ts-box is-positive is-top-indicated">
    <div class="ts-content">正面的</div>
</div>
<div class="ts-box is-warning is-top-indicated">
    <div class="ts-content">警告的</div>
</div>
抬升的

透過陰影讓容器看起來有浮起的感覺,如果有一個需要備受矚目的中心內容(如:登入表單)這會是個好選擇。

抬升的
非常抬升的
<div class="ts-box is-elevated">
    <div class="ts-content">抬升的</div>
</div>
<div class="ts-box is-very-elevated">
    <div class="ts-content">非常抬升的</div>
</div>
直角的

讓邊角以直角呈現而不再圓潤。

直角箱型容器
<div class="ts-box is-squared">
    <div class="ts-content">直角箱型容器</div>
</div>
空虛的

透過加粗虛線描繪外框,通常用以呈現空的區塊。

上傳圖片或影音
將圖片拖拉至此處進行上傳
<div class="ts-box is-hollowed">
    <div class="ts-content is-vertically-padded">
        <div class="ts-center">
            <div class="ts-header is-heavy">上傳圖片或影音</div>
            <div class="ts-text is-secondary">將圖片拖拉至此處進行上傳</div>
        </div>
    </div>
</div>
組合應用
資訊概要

透過搭配網格系統、象徵圖示可以營造出系統儀表板頂部常有的統計數據概要資訊。

42,689
32
本月拜訪次數
8,652
351
總會員數
<div class="ts-grid is-2-columns">
    <div class="column">
        <div class="ts-box">
            <div class="ts-content">
                <div class="ts-statistic">
                    <div class="value">42,689</div>
                    <div class="comparison is-increased">32</div>
                </div>
                本月拜訪次數
            </div>
            <div class="symbol">
                <span class="ts-icon is-eye-icon"></span>
            </div>
        </div>
    </div>
    <div class="column">
        <div class="ts-box">
            <div class="ts-content">
                <div class="ts-statistic">
                    <div class="value">8,652</div>
                    <div class="comparison is-increased">351</div>
                </div>
                總會員數
            </div>
            <div class="symbol">
                <span class="ts-icon is-users-icon"></span>
            </div>
        </div>
    </div>
</div>
連結預覽卡片

在箱型容器裡擺放貼邊圖片和文字與標題就可以達成像 Facebook、Twitter 那樣的連結預覽卡片。

yami.io/rog-and-hololive/
華碩自稱「中國公司」,中國分部發言誓死阻撓日本工商
在微博上的《ROG玩家国度》小編便發文了,誓死也會阻止這次日本華碩與 Hololive 的工商互動。多數中國網友表示期待且「買不買華碩就看這次了」。
<div class="ts-box" style="max-width: 360px">
    <img class="ts-image" src="image.png">
    <div class="ts-content is-secondary">
        <div class="ts-text is-description">yami.io/rog-and-hololive/</div>
        <div class="ts-header is-truncated is-heavy">華碩自稱「中國公司」,中國分部發言誓死阻撓日本工商</div>
        <div class="ts-text is-2-lines is-description">在微博上的《ROG玩家国度》小編便發文了,誓死也會阻止這次日本華碩與 Hololive 的工商互動。多數中國網友表示期待且「買不買華碩就看這次了」。</div>
    </div>
</div>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n