此版本 (4.2) 已經過時,點擊此處檢視最新版本 (5.0)
台灣正體

圖示項目

帶有標題和文字並以一個象徵圖示點綴的項目。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
我的最愛
檢視已經收藏且供稍後觀看的項目。
<div class="ts-iconset">
    <span class="ts-icon is-heart-icon"></span>
    <div class="content">
        <div class="title">我的最愛</div>
        <div class="text">檢視已經收藏且供稍後觀看的項目。</div>
    </div>
</div>
外觀
圓形的

使圖示以圓形呈現。

促銷活動
查看我們最新的促銷商品!
<div class="ts-iconset is-circular">
    <span class="ts-icon is-bullhorn-icon"></span>
    <div class="content">
        <div class="title">促銷活動</div>
        <div class="text">查看我們最新的促銷商品!</div>
    </div>
</div>
外框線的

以單純的框線描繪圖示外緣。

優惠券
看看我們所販售的優惠券。
退貨
不滿意商品?查看我們的無條件退貨機制。
<div class="ts-iconset is-outlined">
    <span class="ts-icon is-ticket-simple-icon"></span>
    <div class="content">
        <div class="title">優惠券</div>
        <div class="text">看看我們所販售的優惠券。</div>
    </div>
</div>
<div class="ts-iconset is-outlined is-circular">
    <span class="ts-icon is-truck-icon"></span>
    <div class="content">
        <div class="title">退貨</div>
        <div class="text">不滿意商品?查看我們的無條件退貨機制。</div>
    </div>
</div>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標