Corner Ribbons



  • _corner-ribbons.scss
  • README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/elements/corner-ribbons

Module Overview

  • Name: corner-ribbon
  • Components: null
  • Modifiers: [colors], [sizes]


<div class="corner-ribbon" data-ribbon="Sale"></div>


You can choose which colors to create a ribbon for in the module's configuration.

<div class="corner-ribbon-pink" data-ribbon="Pink"></div>


You can choose which sizes to create a ribbon for in the module's configuration.

<div class="corner-ribbon-large" data-ribbon="Large"></div>


The corner-ribbons can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

Property Name Default Value Description
text-color white The color of the corner-ribbon text.
colors [green, pink, purple, blue] The different colors that should be created.
sizes [default, small, large] The different sizes that should be created.

To change one of the above values, pass your new value(s) to the corner-ribbons() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

The options are recursive, so you always have access to the default options which you don't overwrite. Learn more.

@include corner-ribbons((
    'colors' : (
        'orange' : #ff6600
    'sizes' (
        'small' : 0.85em