Bulma Ribbon

A versatile ribbon extension for Bulma elements.

The Ribbon extension allows you to easily add information banners or labels to containers. Simply add the .has-ribbon class to your container and the .ribbon element inside it.

Positioning

Place ribbons in any corner of a container.

Top Right

Default (Top-Right)

Top Left

Top-Left

Bottom Right

Bottom-Right

Bottom Left

Bottom-Left

<div class="box has-ribbon">
    <div class="ribbon is-primary">New</div>
    <p>Content goes here</p>
</div>

Colors & Outlined

Supports all Bulma colors and an outlined variant.

Primary
Primary Light
Outlined
Info Light
Danger
Danger Light
Success
Success Light

Sizes

Available in four sizes.

Small

Small Ribbon

Normal

Normal Ribbon

Medium

Medium Ribbon

Large

Large Ribbon

<div class="ribbon is-small">Small</div>
<div class="ribbon is-medium">Medium</div>
<div class="ribbon is-large">Large</div>