Render a label with the .label class.
<!-- Example label -->
<span class="label">Default Label</span>
label element is architected (with regard, specifically, to its sizing) in LV-Foundation is very different from the way in which it is architected in Foundation by default.
By default, a label will size itself responsively with regard to its neighboring context. Take, for example:
<!-- Labels change size with their parents by default -->
<p>This is a label inside a paragraph.<span class="label">Default Label</span></p>
<h3>This is a label inside an h3.<span class="label">Default Label</span></h3>
This is a label inside a paragraph.Default Label
If you would like to render your label with a fixed size, you may do so with any of the standard accompanying size classes, as seen with buttons.
<!-- Example sized labels -->
<span class="label tiny">Tiny Label</span>
<span class="label small">Small Label</span>
<span class="label medium">Medium Label</span>
<span class="label large">Large Label</span>
You may also add priorital / contextual colors to your labels.
<!-- Example priorital labels -->
<span class="label small secondary">Secondary Label</span>
<span class="label small tertiary">Tertiary Label</span>
<!-- Example contextual labels -->
<span class="label small success">Success Label</span>
<span class="label small warning">Warning Label</span>
<span class="label small alert">Alert Label</span>
<span class="label small info">Info Label</span>
Labels can be used on dark backgrounds using the .ghost class. See the ghosting section
for use of .ghost-children and more explanation.
<!-- Example ghosting labels -->
<div class="bg-off-black padding-medium ghost-children">
<span class="label small ghost">Default Label</span>
<span class="label small success ghost">Success Label</span>
<span class="label small warning ghost">Warning Label</span>
<span class="label small alert ghost">Alert Label</span>
<span class="label small info ghost">Info Label</span>
<span class="label small secondary ghost">Secondary Label</span>
<span class="label small tertiary ghost">Tertiary Label</span>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Labels
Labels are useful inline components that can be dropped into body copy to call out certain sections or to attach metadata. For example, you can attach a label that notes when something was updated.