Skip to content

ribbon_group

The ribbon_group macro is used to render multiple ribbon elements positioned vertically next to each other.

Definition

{% ribbon(ribbons, options) %}

Input parameters

ribbons

object[] represents an array of ribbon objects, each containing following ribbon options:

Option key Type Default Required Description
text string "" yes Text content of the ribbon
options object null no An object containing ribbon atttributes

options

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 true no This parameter enabled modifying a ribbon position. By default it is set to true for ribbons rendered in a group
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.

options (optional)

object represents an object of input attributes

Option key Type Default Required Description
options.position string "" no Position modifier for the ribbon group, currently supported values are: absolute

Example

In this example we render a simple ribbon group of two elements

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

{{ ribbon_group([
    {
        text: 'Promotion',
    },
    {
        text: 'New'
    }
]) }}

Example

In this example we render a ribbon group of one element with a primary variant and a second one with rounded corders and absolute positioning.

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

{{ ribbon_group([
    {
        text: 'Promotion',
        options: {
            variant: 'primary'
        }
    },
    {
        text: 'New',
        options: {
            roundedCorners: true,
            position: 'absolute'
        }
    }
]) }}

Example

In this example we render a ribbon group with absolute positioning applied to the whole group

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

{{ ribbon_group(
    [
        {
            text: 'Promotion',
        },
        {
            text: 'New'
        }
    ],
    {
        position: 'absolute'
    }
) }}

Macro source code

{% macro ribbon_group(ribbons, options = {}) %}
    {% from "@macros/ribbon.twig" import ribbon %}

    <div class="ribbon-group {% if options.position %}ribbon-group_{{options.position}}{% endif %}">
        {% for ribbonObj in ribbons %}
            {% if ribbonObj.options is defined %}
                {% set ribbonOptions = { isRenderedInGroup: true}|merge(ribbonObj.options) %}
            {% else %}
                {% set ribbonOptions = { isRenderedInGroup: true } %}
            {% endif %}

            {{ ribbon(ribbonObj.text, ribbonOptions) }}
        {% endfor %}
    </div>
{% endmacro %}

Ribbon reference