Badge Styles

Badge - Basic

Primary

Secondary

Tertiary

Alert

Info

Success

Support

Dark

White


                
                                            <div class="badge badge--primary">Primary</div>
                        <div class="badge badge--secondary">Secondary</div>
                        <div class="badge badge--tertiary">Tertiary</div>
                        <div class="badge badge--alert">Alert</div>
                        <div class="badge badge--info">Info</div>
                        <div class="badge badge--success">Success</div>
                        <div class="badge badge--support">Support</div>
                        <div class="badge badge--dark">Dark</div>
                        <div class="badge badge--white">White</div>

Badge Documentation

Use

Badges are purely to be used to accent information, and should never be used as a link.

Content should be limited to one or two words only.

Variations

To specify the badge type please use the CSS class badge--{ NAME OF badge TYPE } as a modifier to the badge class. Badge type names are listed above