Skip to content

ribbon

The ribbon macro is used to render a single ribbon element.

Definition

{% ribbon(ribbonText, options) %}

Input parameters

ribbonText

string represents a text displayed on a ribbon.

options

object represents an object of ribbon attributes

Option key Type Default Required Description
options.variant string "" no Styling variant of the ribbon, available options are: primary.
options.roundedCorners boolean false no Prop that allows to add additional styling class that makes the corners round.
options.isRenderedInGroup boolean false no This parameter should be set to true when using this macro inside a ribbon_group macro.
options.position string "" no Position of the ribbon. If set to absolute ribbon will be positioned to the top left corner of the parent element.

Example

In this example we render a basic ribbon

{% from "@macros/ribbon.twig" import ribbon %}

{{ ribbon('30%') }}

Example

In this example we render a ribbon with rounded corners and absolute position.

{% from "@macros/ribbon.twig" import ribbon %}

{{ ribbon('30%', {
    roundedCorners: true,
    position: 'absolute'
}) }}

Macro source code

{% macro ribbon(ribbonText, options) %}
    {% if ribbonText %}
        <span
            class="
                ribbon
                {% if options.variant %} ribbon_{{options.variant}} {% endif %}
                {% if options.roundedCorners %} ribbon_rounded-corners {% endif %}
                {% if (not options.isRenderedInGroup) and (options.position) %} ribbon_{{options.position}} {% endif %}
                {{ options.classNames|join(' ') }}
            "
        >
            {{ ribbonText }}
        </span>
    {% endif %}
{% endmacro %}

Ribbon reference