Skip to content
This repository has been archived by the owner on Jun 11, 2024. It is now read-only.

Wikiki/bulma-ribbon

Repository files navigation

❗❗❗ Looking for new Maintainer ❗❗❗

As you may have noticed, this package has not been updated for some time. I'm sorry, but unfortunately I'm not able to continue to maintain it, so I'm looking for someone who would like to take it over and maintain it. If you are interested, please contact me at [email protected] to discuss how to proceed.

bulma-ribbon

Bulma's extension to show a ribbon on boxes (find all my bulma's extensions here)

npm npm Build Status

Ribbon Element

Usage

<div class="columns is-multiline">
  <div class="column">
    <div class="box has-ribbon">
      <div class="ribbon">Default</div>
      Box content
    </div>
  </div>
  <div class="column">

    <div class="box has-ribbon">
      <div class="ribbon is-primary">Primary</div>
      Box content
    </div>
  </div>
  <div class="column">
    <div class="box has-ribbon">
      <div class="ribbon is-warning">Warning</div>
      Box content
    </div>
  </div>
  <div class="column">
    <div class="box has-ribbon">
      <div class="ribbon is-danger">Danger</div>
      Box content
    </div>
  </div>
</div>
<div class="columns is-multiline">
  <div class="column">
  <div class="box has-ribbon is-small">
    <div class="ribbon is-small is-primary">Small ribbon</div>
    Box content
  </div>
</div>

  <div class="column">
    <div class="box has-ribbon is-small">
      <div class="ribbon is-medium is-primary">Medium ribbon</div>
      Box content
    </div>
  </div>

  <div class="column">
    <div class="box has-ribbon is-small">
      <div class="ribbon is-large is-primary">Large ribbon</div>
      Box content
    </div>
  </div>
</div>
<div class="columns is-multiline">
  <div class="column">
    <div class="box has-ribbon-left is-small">
      <div class="ribbon is-small is-primary">Left ribbon</div>
      Box content
    </div>
  </div>

  <div class="column">
    <div class="box has-ribbon-bottom is-small">
      <div class="ribbon is-small is-primary">Bottom ribbon</div>
      Box content
    </div>
  </div>
</div>

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 called extensions
  • 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.

About

Bulma's extension to show a ribbon on boxes

Resources

License

Stars

Watchers

Forks

Packages

No packages published