Badge

WIP

HTML
View
Context
Assets
Info
Notes


        
        <span class="badge badge-pill bg-primary">14</span>
<span class="badge badge-pill bg-secondary ">Tags</span>
<span class="badge badge-pill bg-danger ">KO</span>


        <span class="badge badge-pill bg-primary">14</span>
<span class="badge badge-pill bg-secondary ">Tags</span>
<span class="badge badge-pill bg-danger ">KO</span>


        
            
            /* No context defined. */

File:

Content:


                                @charset 'UTF-8';

.badge-pill {
  border-radius: 10rem;
  padding-left: 0.6em;
  padding-right: 0.6em;
}

URL: /components/raw/badge/_badge.scss
Filesystem Path: src/components/01-atoms/badge/_badge.scss
Size: 106 Bytes

Content:
.coucou { color: blue; }
URL: /components/raw/badge/test.scss
Filesystem Path: src/components/01-atoms/badge/test.scss
Size: 27 Bytes

Handle: @badge
Preview:
- With layout
- Component only
Filesystem Path: src/components/01-atoms/badge/badge.html

You can use the class: .badge-pill to make it rounded.
The coloring classes (.badge-default, .badge-primary, …) are also available.