Label - Front Documentation | Front - Responsive Website Template

Contextual variations

Add any of the below mentioned modifier classes to change the appearance of a label.

By default, label styles are pilled.

Result
HTML

Primary Secondary Success Danger Warning Info Indigo Light White Dark White

                  
                    <span class="u-label u-label--primary">Primary</span>
                    <span class="u-label u-label--secondary">Secondary</span>
                    <span class="u-label u-label--success">Success</span>
                    <span class="u-label u-label--danger">Danger</span>
                    <span class="u-label u-label--warning">Warning</span>
                    <span class="u-label u-label--info">Info</span>
                    <span class="u-label u-label--indigo">Indigo</span>
                    <span class="u-label u-label--light">Light</span>
                    <span class="u-label u-label--white">White</span>
                    <span class="u-label u-label--dark">Dark</span>
                    <span class="u-label u-label--white">White</span>

Links

Using the contextual .u-label-* classes on an <a> element quickly provide actionable labels with hover and focus states.

Result
HTML

Primary Secondary Success Danger Warning Info Indigo Light White Dark White

                  
                    <a href="#" class="u-label u-label--primary">Primary</a>
                    <a href="#" class="u-label u-label--secondary">Secondary</a>
                    <a href="#" class="u-label u-label--success">Success</a>
                    <a href="#" class="u-label u-label--danger">Danger</a>
                    <a href="#" class="u-label u-label--warning">Warning</a>
                    <a href="#" class="u-label u-label--info">Info</a>
                    <a href="#" class="u-label u-label--indigo">Indigo</a>
                    <a href="#" class="u-label u-label--light">Light</a>
                    <a href="#" class="u-label u-label--white">White</a>
                    <a href="#" class="u-label u-label--dark">Dark</a>
                    <a href="#" class="u-label u-label--white">White</a>

Sizes

Add .u-label--sm or .u-label--xs for additional sizes.

Result
HTML

Medium size Medium size

                  
                    <a href="#" class="u-label u-label--primary">Medium size</a>
                    <a href="#" class="u-label u-label--secondary">Medium size</a>

Result
HTML

Small size Small size

                  
                    <a href="#" class="u-label u-label--sm u-label--primary">Small size</a>
                    <a href="#" class="u-label u-label--sm u-label--secondary">Small size</a>

Result
HTML

Extra small size Extra small size

                  
                    <a href="#" class="u-label u-label--xs u-label--primary">Extra small size</a>
                    <a href="#" class="u-label u-label--xs u-label--secondary">Extra small size</a>