bulma-ribbon
Bulma's extension to show a ribbon on boxes (find all my bulma's extensions here)
Usage
Default Box content Primary Box content Warning Box content Danger Box content Small ribbon Box content Medium ribbon Box content Large ribbon Box content Left ribbon Box content Bottom ribbon Box content
Modifiers
You can use standards color modifiers and you can change the ribbon's position using the following modifiers in replacement of has-ribbon class:
- has-ribbon-left
- has-ribbon-bottom
You can use the is-outlined
modifier to remove background and just keep the border of the ribbon
Variables
This extension uses the following variables
Name | Description | Default value |
---|---|---|
$ribbon-color | Default ribbon text color | $grey-darker |
$ribbon-background-color | Default background color of the ribbon | $white |
$ribbon-border | Ribbon default border color | .1rem solid $grey-lighter |
Demo
You can find a demo here
Integration
- Clone the bulma repo
- Under the
sass
folder, create a new folder calledextensions
- In this new folder, create a new file
ribbon.sass
- Copy the code form the
bulma-ribbon repo
's ribbon.sass file into your new file - In the same folder create a new file
_all.sass
(this is not required, but will help when you add more extensions) - In this file add this code:
@charset "utf-8"
@import "ribbon.sass"
At the end of the bulma.sass
file, add this line: @import "sass/extensions/_all"
Now, you can just build the bulma project with npm run build
, and the output will be available in the css folder
.