Files

• _corner-ribbons.scss
• README.md

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

Module Overview

Examples

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

Colors

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

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

Sizes

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

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

Customizing

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
    )
));