Bulma's extension to show a ribbon on boxes

  • By null
  • Last update: Oct 23, 2022
  • Comments: 8

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.

Github

https://github.com/Wikiki/bulma-ribbon

Comments(8)

  • 1

    Bump loader-utils from 1.1.0 to 1.4.1

    Bumps loader-utils from 1.1.0 to 1.4.1.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    v1.4.0

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    v1.3.0

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    v1.2.3

    1.2.3 (2018-12-27)

    Bug Fixes

    • interpolateName: don't interpolated hashType without hash or contenthash (#140) (3528fd9)

    v1.2.2

    1.2.2 (2018-12-27)

    Bug Fixes

    • fixed a hash type extracting in interpolateName (#137) (f8a71f4)

    v1.2.1

    1.2.1 (2018-12-25)

    ... (truncated)

    Changelog

    Sourced from loader-utils's changelog.

    1.4.1 (2022-11-07)

    Bug Fixes

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    1.2.3 (2018-12-27)

    Bug Fixes

    • interpolateName: don't interpolated hashType without hash or contenthash (#140) (3528fd9)

    1.2.2 (2018-12-27)

    Bug Fixes

    • fixed a hash type extracting in interpolateName (#137) (f8a71f4)

    1.2.1 (2018-12-25)

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by evilebottnawi, a new releaser for loader-utils since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 2

    The automated release is failing 🚨

    :rotating_light: The automated release from the master branch failed. :rotating_light:

    I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

    You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

    Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

    Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

    If you are not sure how to resolve this, here is some links that can help you:

    If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.


    The push permission to the Git repository is required.

    semantic-release cannot push the version tag to the branch master on remote Git repository with URL git+https://github.com/Wikiki/bulma-ribbon.git.

    Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment and make sure the repositoryUrl is configured with a valid Git URL.


    Good luck with your project ✨

    Your semantic-release bot :package::rocket:

  • 3

    Bump qs from 6.3.2 to 6.3.3

    Bumps qs from 6.3.2 to 6.3.3.

    Changelog

    Sourced from qs's changelog.

    6.3.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Fix] utils.merge`: avoid a crash with a null target and a truthy non-array source
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] Clean up license text so it’s properly detected as BSD-3-Clause
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] use safer-buffer instead of Buffer constructor
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • ff235b4 v6.3.3
    • 4310742 [Fix] parse: ignore __proto__ keys (#428)
    • da1eee0 [Dev Deps] backport from main
    • 2c103b6 [actions] backport actions from main
    • aa4580e [Robustness] stringify: avoid relying on a global undefined (#427)
    • f8510a1 [meta] fix README.md (#399)
    • 4c036ce [Fix] fix for an impossible situation: when the formatter is called with a no...
    • 180bfa5 [meta] Clean up license text so it’s properly detected as BSD-3-Clause
    • e0b2c4b [Tests] use safer-buffer instead of Buffer constructor
    • f7139bf [Fix] utils.merge: avoid a crash with a null target and an array source
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 4

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 5

    Bump loader-utils from 1.1.0 to 1.4.2

    Bumps loader-utils from 1.1.0 to 1.4.2.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.2

    1.4.2 (2022-11-11)

    Bug Fixes

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    v1.4.0

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    v1.3.0

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    v1.2.3

    1.2.3 (2018-12-27)

    Bug Fixes

    • interpolateName: don't interpolated hashType without hash or contenthash (#140) (3528fd9)

    v1.2.2

    1.2.2 (2018-12-27)

    Bug Fixes

    ... (truncated)

    Changelog

    Sourced from loader-utils's changelog.

    1.4.2 (2022-11-11)

    Bug Fixes

    1.4.1 (2022-11-07)

    Bug Fixes

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    1.2.3 (2018-12-27)

    Bug Fixes

    • interpolateName: don't interpolated hashType without hash or contenthash (#140) (3528fd9)

    1.2.2 (2018-12-27)

    Bug Fixes

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by evilebottnawi, a new releaser for loader-utils since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 6

    Bump copy-props from 2.0.4 to 2.0.5

    Bumps copy-props from 2.0.4 to 2.0.5.

    Release notes

    Sourced from copy-props's releases.

    2.0.5

    Fix

    • Avoids prototype pollution (#7)

    Doc

    • Update license years.
    • Transfer ownership to Gulp Team (#6)

    Build

    • Update dependencies: each-props (>=1.3.2), is-plain-object (>=5.0.0).

    Test

    • Expand test versions to v11〜v14.
    Changelog

    Sourced from copy-props's changelog.

    Changelog

    3.0.1 (2021-10-31)

    Bug Fixes

    • ci: Rename prettierignore typo & avoid formatting web (192badf)
    • Update dependencies (ba8a51c)

    3.0.0 (2021-09-25)

    ⚠ BREAKING CHANGES

    • Normalize repository, dropping node <10.13 support (#8)

    Miscellaneous Chores

    • Normalize repository, dropping node <10.13 support (#8) (85b1165)
    Commits
    • 40b7974 2.0.5
    • 2c738f5 Fix: Avoids prototype pollution (#7)
    • 4cac863 Merge: Transfer ownership to Gulp Team (#6)
    • 54a791d Doc: Transfer ownership to Gulp Team
    • 196fc9e Merge: Update dependencies and expand ci test versions (#5)
    • e89907f Test: Update npm to v4 when nodejs is v5 because of npm install error.
    • e970322 Test: Run coveralls when nodejs >= 6 because of its supports
    • 063e534 Test: Add nodejs v11-v14 into ci test versions
    • 72270af Doc: Update license years
    • f60b928 Build: Update versions of dependencies
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 7

    Bump chownr from 1.0.1 to 1.1.4

    Bumps chownr from 1.0.1 to 1.1.4.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 8

    Bump handlebars from 4.0.11 to 4.7.7

    Bumps handlebars from 4.0.11 to 4.7.7.

    Changelog

    Sourced from handlebars's changelog.

    v4.7.7 - February 15th, 2021

    • fix weird error in integration tests - eb860c0
    • fix: check prototype property access in strict-mode (#1736) - b6d3de7
    • fix: escape property names in compat mode (#1736) - f058970
    • refactor: In spec tests, use expectTemplate over equals and shouldThrow (#1683) - 77825f8
    • chore: start testing on Node.js 12 and 13 - 3789a30

    (POSSIBLY) BREAKING CHANGES:

    • the changes from version 4.6.0 now also apply in when using the compile-option "strict: true". Access to prototype properties is forbidden completely by default, specific properties or methods can be allowed via runtime-options. See #1633 for details. If you are using Handlebars as documented, you should not be accessing prototype properties from your template anyway, so the changes should not be a problem for you. Only the use of undocumented features can break your build.

    That is why we only bump the patch version despite mentioning breaking changes.

    Commits

    v4.7.6 - April 3rd, 2020

    Chore/Housekeeping:

    Compatibility notes:

    • Restored Node.js compatibility

    Commits

    v4.7.5 - April 2nd, 2020

    Chore/Housekeeping:

    • Node.js version support has been changed to v6+ Reverted in 4.7.6

    Compatibility notes:

    • Node.js < v6 is no longer supported Reverted in 4.7.6

    Commits

    v4.7.4 - April 1st, 2020

    Chore/Housekeeping:

    Compatibility notes:

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.