Foundation Labels

Labels

.label class is used to provide additional information about something:

例

<h2>Example <span class="label">New</span></h2>
<h3>Example <span class="label">New</span></h3>
<h4>Example <span class="label">New</span></h4>

結果：

Example New

Example New

Example New

Try it Yourself »

To color the label, add one of the contextual classes: .secondary, .success, .info, .warning or .alert:

例

<span class="label">Default Label</span>
<span class="label secondary">Secondary Label</span>
<span class="label success">Success Label</span>
<span class="label info">Info Label</span>
<span class="label warning">Success Label</span>
<span class="label alert">Alert Label</span>

結果：

Default Label Secondary Label Success Label Info Label Success Label Alert Label
Try it Yourself »

Rounded Labels

.radius and .round classes adds rounded corners to the label:

例

<span class="label">Default Label</span>
<span class="label radius">Radius Label</span>
<span class="label round">Round Label</span>
<span class="label success round">5</span>

結果：

Default Label Radius Label Round Label 5
Try it Yourself »

Sizable Labels

Use CSS to change the size of the label:

例

<h1>Example <span class="label" style="font-size:36px;">New</span></h1>
<h2>Example <span class="label" style="font-size:30px;">New</span></h2>
<h3>Example <span class="label" style="font-size:20px;">New</span></h3>
<h4>Example <span class="label">New</span></h4>

結果：

Example New

Example New

Example New

Example New

Try it Yourself »