Divider

Divider 用來做為區隔線,與 <hr> 相似,但 Divider 可以搭配文字、簡易圖形。預設上下間隔各 20 pixel。類別名稱為 .divider,其他模式元件也以此為前綴詞。

OR
<div class="divider"></div> <div class="divider">OR</div> <div class="divider"> <i class="icon fas fa-bullseye"></i> </div>

間格距離設定

Divider 與 HR 相同,可以有不同間距可以選擇。使用方式為 .sz:*

Zero
Quarter
Half
2X
3X
4X
<div class="divider sz:0"></div> <div class="divider sz:quarter"></div> <div class="divider sz:half"></div> <div class="divider sz:2x"></div> <div class="divider sz:3x"></div> <div class="divider sz:4x"></div>

可用於深色背景時的區隔線配色。

OR

垂直分隔線

類別名稱為 .divider-vertical


OR

<div class="divider-vertical"></div> <div class="divider-vertical">OR</div> <div class="divider-vertical"> <i class="icon fas fa-bullseye"></i> </div>

Dot Divider

用圓點做為區隔線使用,使用類別為 .divider-dots。與 Divider 不同的是 Dot Divider 是作為裝飾使用,無法置入文字或圖形。

<div class="divider-dots"></div>

間格距離設定

與 Divider 相同的使用方式。

<div class="divider-dots sz:0"></div> <div class="divider-dots sz:quarter"></div> <div class="divider-dots sz:half"></div> <div class="divider-dots sz:2x"></div> <div class="divider-dots sz:3x"></div> <div class="divider-dots sz:4x"></div>

Light 模式

可用於深色背景時的區隔線配色,需要加上 .clr:light

<div class="divider-dots clr:light"></div>

垂直區隔線

使用類別為 .divider-dots-vertical

<div class="divider-dots-vertical"></div>