Labels
Basic
Use .c-label.
In review
div
.c-label In review
<div>
<div class="c-label">
In review
</div>
</div>Colors
A label can have different colors. Add .-color-* modifier.
Slate
Mint
Denim
Ash
Lava
Sky
Aqua
.c-label.-color-slate Slate
.c-label.-color-mint Mint
.c-label.-color-denim Denim
.c-label.-color-ash Ash
.c-label.-color-lava Lava
.c-label.-color-sky Sky
.c-label.-color-aqua Aqua
.c-label.-color-metal Metal
.c-label.-color-metal-light Metal light
<div class="c-label -color-slate">
Slate
</div>
<div class="c-label -color-mint">
Mint
</div>
<div class="c-label -color-denim">
Denim
</div>
<div class="c-label -color-ash">
Ash
</div>
<div class="c-label -color-lava">
Lava
</div>
<div class="c-label -color-sky">
Sky
</div>
<div class="c-label -color-aqua">
Aqua
</div>
<div class="c-label -color-metal">
Metal
</div>
<div class="c-label -color-metal-light">
Metal light
</div>Widths
To make a label be in fixed width, add .-width-fixed modifier class.
Original design
Control
Waiting for adoption
Draft
Edit Requested
div
.c-label.-width-fixed.-color-slate Original design
div
.c-label.-width-fixed.-color-mint Control
div
.c-label.-width-fixed.-color-denim Waiting for adoption
div
.c-label.-width-fixed.-color-ash Draft
div
.c-label.-color-lava.-width-fixed Edit Requested
<div>
<div class="c-label -width-fixed -color-slate">
Original design
</div>
</div>
<div>
<div class="c-label -width-fixed -color-mint">
Control
</div>
</div>
<div>
<div class="c-label -width-fixed -color-denim">
Waiting for adoption
</div>
</div>
<div>
<div class="c-label -width-fixed -color-ash">
Draft
</div>
</div>
<div>
<div class="c-label -color-lava -width-fixed">
Edit Requested
</div>
</div>Labels with icons
A label can include an icon. Add .-with-icon modifier class.
div
.c-label.-color-slate.-width-fixed.-with-icon
i.kzicon.kzicon-round
| Preparing round
div
.c-label.-color-lava.-width-fixed.-with-icon
i.kzicon.kzicon-round
| Paused
<div>
<div class="c-label -color-slate -width-fixed -with-icon">
<i class="kzicon kzicon-round"></i>Preparing round
</div>
</div>
<div>
<div class="c-label -color-lava -width-fixed -with-icon">
<i class="kzicon kzicon-round"></i>Paused
</div>
</div>Labels with prefixs
Add .-with-prefix and .-prefix-(mint|eggplant|sky-dark|lemon-light|tangerine) modifier class.
Network
オープン
Targeting
ターゲティング
Specialized
特化型
Private
プライベート
My team
マイチーム
div
.c-label.-with-prefix.-prefix-mint.u-text-uppercase Network
.c-label.-with-prefix.-prefix-mint.u-text-uppercase オープン
div
.c-label.-with-prefix.-prefix-eggplant.u-text-uppercase Targeting
.c-label.-with-prefix.-prefix-eggplant.u-text-uppercase ターゲティング
div
.c-label.-with-prefix.-prefix-sky-dark.u-text-uppercase Specialized
.c-label.-with-prefix.-prefix-sky-dark.u-text-uppercase 特化型
div
.c-label.-with-prefix.-prefix-lemon-light.u-text-uppercase Private
.c-label.-with-prefix.-prefix-lemon-light.u-text-uppercase プライベート
div
.c-label.-with-prefix.-prefix-tangerine.u-text-uppercase My team
.c-label.-with-prefix.-prefix-tangerine.u-text-uppercase マイチーム
<div>
<div class="c-label -with-prefix -prefix-mint u-text-uppercase">
Network
</div>
<div class="c-label -with-prefix -prefix-mint u-text-uppercase">
オープン
</div>
</div>
<div>
<div class="c-label -with-prefix -prefix-eggplant u-text-uppercase">
Targeting
</div>
<div class="c-label -with-prefix -prefix-eggplant u-text-uppercase">
ターゲティング
</div>
</div>
<div>
<div class="c-label -with-prefix -prefix-sky-dark u-text-uppercase">
Specialized
</div>
<div class="c-label -with-prefix -prefix-sky-dark u-text-uppercase">
特化型
</div>
</div>
<div>
<div class="c-label -with-prefix -prefix-lemon-light u-text-uppercase">
Private
</div>
<div class="c-label -with-prefix -prefix-lemon-light u-text-uppercase">
プライベート
</div>
</div>
<div>
<div class="c-label -with-prefix -prefix-tangerine u-text-uppercase">
My team
</div>
<div class="c-label -with-prefix -prefix-tangerine u-text-uppercase">
マイチーム
</div>
</div>