Badges

Badges, labels and ribbons.

Get Started

1

Badges

Badge shapes

Badges are handy if you want to show users useful notifications. They are perfect in a list block for example. Bulkit badges have two main shapes : square, wich is default, and rounded. Add the .rounded class to a .b-badge element to make its edges rounded.

SHOW CODE

<span class="b-badge is-primary">5</span>

<span class="b-badge rounded is-primary">5</span>
                                        

Solid colors

Bulkit badges can have several solid colors. Available classes are .is-primary, .is-secondary, is-accent, .is-success, .is-warning, .is-danger, and .is-info. Add one of these classes to a .b-badge element to change its color.

Outlined colors

Bulkit badges can be outlined. Add the.badge-outlined class to a .b-badge to make a badge outlined. Several colors are available. Available classes are .is-primary, .is-secondary, is-accent, .is-success, .is-warning, .is-danger, and .is-info. Add one of these classes to a .b-badge element to change its color.

2

Bulma badges

Basic badge

Bulma badges are an extension to the main framework. They are positionned via pseudo elements. Add the .badge class to an html element like a button to create a badge on its top right corner. Then, use the data-badge="" attribute to set its value.

Span
Span
SHOW CODE

<button class="button badge" data-badge="">Button</button>

<span class="badge" data-badge="">Span</span>
                                        

Badge colors

Bulma badges can have several solid colors. Available classes are .badge-primary, .badge-secondary, badge-accent, .badge-success, .badge-warning, .badge-danger, and .badge-info. Add one of these classes to a .badge element to change its color.

SHOW CODE

<button class="button badge badge-primary" data-badge="">Primary</button>
                                        

Outlined badges

Bulma badges can be outlined. Add the .is-badge-outlined class to a .badge element to make it oulined. Colors apply the same way than in the above example.

SHOW CODE

<button class="button badge badge-primary is-badge-outlined" data-badge="">Primary</button>
                                        

Badge sizes

Badges are available in different sizes : .is-badge-small, .is-badge-medium, .is-badge-large.

SHOW CODE

<button class="button is-badge-small badge" data-badge="">Small</button>

<button class="button badge" data-badge="">Small</button>

<button class="button is-badge-medium badge" data-badge="">Small</button>

<button class="button is-badge-large badge" data-badge="">Small</button>
                                        
3

Ribbons

Ribbons

Ribbons are also an extension of Bulma framework. Ribbons extend Bulma's .box component. It display a small ribbon with text in a chosen corner. Add the .has-ribbon class to a box to display a ribbon in the top right corner. Ribbons have many colors. Available classes are .is-primary, .is-secondary, is-accent, .is-success, .is-warning, .is-danger, and .is-info. Add one of these classes to a .ribbon element to change its color.

Default

Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti probatus ex.

Primary

Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti probatus ex.

Secondary

Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti probatus ex.

Accent

Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti probatus ex.

Success

Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti probatus ex.

Warning

Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti probatus ex.

Danger

Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti probatus ex.

Info

Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti probatus ex.

SHOW CODE

<div class="box has-ribbon">
    <div class="ribbon is-primary">Primary</div>
    <strong>Box content</strong>
    <p class="pt-20">Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti probatus ex.</p>
</div>
                                        

Ribbon sizes

4 sizes are available. Available classes are .is-small, .is-medium, and .is-large.

Small

Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti probatus ex.

Normal

Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti probatus ex.

Medium

Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti probatus ex.

Large

Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti probatus ex.

Ribbon positions

2 additionnal positions are available. Left by replacing .has-ribbon with .has-ribbon-left, and bottom by replacing .has-ribbon with .has-ribbon-bottom. Note that with left and bottom position, you might have to repoistion your content to avoid overflow.

Default

Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti probatus ex.

Left

Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti probatus ex.

Bottom

Box content
Lorem ipsum dolor sit amet, omnes essent legendos no vix, qui everti probatus ex.

4

Labels and Tags

Basic tags

Tag labels can be square, rounded and outlined.

Tag label
Tag label
Tag label
Tag label
SHOW CODE

<span class="tag">Tag label</span>

<span class="tag squared">Tag label</span>

<span class="tag is-outlined">Tag label</span>

<span class="tag squared is-outlined">Tag label</span>
                                        

Tag colors

Tags can have many colors. Available classes are .is-primary, .is-secondary, is-accent, .is-success, .is-warning, .is-danger, and .is-info.

Default
Primary
Secondary
Accent
Success
Warning
Danger
Info
Default
Primary
Secondary
Accent
Success
Warning
Danger
Info
SHOW CODE

<span class="tag squared is-primary">Primary</span>
                                        

Outlined tag colors

Add the .is-outlined class to a .tag element to make it outlined. Tags can have many colors. Available classes are .is-primary, .is-secondary, is-accent, .is-success, .is-warning, .is-danger, and .is-info.

Default
Primary
Secondary
Accent
Success
Warning
Danger
Info
Default
Primary
Secondary
Accent
Success
Warning
Danger
Info
SHOW CODE

<span class="tag squared is-outlined is-primary">Primary</span>
                                        

Tag sizes

Tags are available in 3 sizes, default, .is-medium and .is-large.

Default
Medium
Large
Default
Medium
Large
Default
Medium
Large
Default
Medium
Large

Tag delete

A .delete element can be nested inside a tag.

SHOW CODE

<span class="tag squared is-primary">Normal <button class="delete is-small"></button></span>

<span class="tag squared is-secondary is-medium">Medium <button class="delete is-small"></button></span>

<span class="tag squared is-accent is-large">Large <button class="delete"></button></span>
                                        

Tag list

Tags can be organized like a list. Wrap the .tag elements into a .tags parent element.

One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve
SHOW CODE

<div class="tags">
    <span class="tag is-secondary">One</span>
    <span class="tag is-primary">Two</span>
    <span class="tag is-accent">Three</span>
    <span class="tag is-secondary">Four</span>
    <span class="tag is-accent">Five</span>
    <span class="tag is-secondary">Six</span>
    <span class="tag is-primary">Seven</span>
    <span class="tag is-accent">Eight</span>
    <span class="tag is-primary">Nine</span>
    <span class="tag is-secondary">Ten</span>
    <span class="tag is-accent">Eleven</span>
    <span class="tag is-secondary">Twelve</span>
</div>
                                        

Tag groups

Tags can be grouped to show more complex informations. Check the code examples for more details about structure.

npm 0.5.0
build passing
release 1.4.3
Alex Smith
Alex Smith
Alex Smith
Alex Smith
Alex Smith
Alex Smith
SHOW CODE