Foundation Labels
.labelClasses are used to provide some additional information:
Example
<h2>Example <span class="label">New</span></h2>
<h3>Example <span class="label">New</span></h3>
<h4>Example <span class="label">New</span></h4>
<h3>Example <span class="label">New</span></h3>
<h4>Example <span class="label">New</span></h4>
Try it Yourself »
The following classes can set the color of labels:.secondary, .success, .info, .warningor
.alert:
Example
<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>
<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>
Try it Yourself »
Rounded Label
.radiusand.roundClasses can add rounded corners to labels:
Example
<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>
<span class="label radius">Radius Label</span>
<span class="label round">Round Label</span>
<span class="label success round">5</span>
Try it Yourself »
Label Size
You can use CSS to modify the size of the tags:
Example
<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>
<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>
Try it Yourself »