Ribbons

Download

You can fetch Trowel Ribbons with npm, yarn or bower.

# With bower
$ bower install --save trowel-ribbons

# With npm
$ npm install --save trowel-ribbons

# With yarn
$ yarn add trowel-ribbons

You can also download a zip archive right here.

Installation

Scss

The main scss file to include to your main .scss file is located at the ./src/scss/ribbons.scss. As a Trowel Component, it also requires two dependencies to compile the scss code. Here an scss installation snippet.

// Trowel core (need to be imported first)
@import './path/to/dependencies/trowel-core/src/trowel';

// Trowel Ribbons
@import './path/to/dependencies/trowel-ribbons/src/scss/ribbons';

Twig template

The twig template ready to be include or embed is located at ./src/twig/ribbon.html.twig.

Usage

default

<span class="ribbon">
  <span class="ribbon__band">
    <span class="ribbon__content">default</span>
  </span>
</span>

On the right

By default the ribbon is oriented on the left, but with the .ribbon--right class you can flip the orientation.

default

<span class="ribbon ribbon--right">
  <span class="ribbon__band">
    <span class="ribbon__content">default</span>
  </span>
</span>

If you don't need a right orientation, or you want to change the default orientation just overwrite the trowel variable `$ribbons--position`.

Themes

By default, you have access to 5 themes :

<span class="ribbon">
  <span class="ribbon__band">
    <span class="ribbon__content">default</span>
  </span>
</span>

<span class="ribbon ribbon--primary">
  <span class="ribbon__band">
    <span class="ribbon__content">primary</span>
  </span>
</span>

<span class="ribbon ribbon--success">
  <span class="ribbon__band">
    <span class="ribbon__content">success</span>
  </span>
</span>

<span class="ribbon ribbon--warning">
  <span class="ribbon__band">
    <span class="ribbon__content">warning</span>
  </span>
</span>

<span class="ribbon ribbon--danger">
  <span class="ribbon__band">
    <span class="ribbon__content">danger</span>
  </span>
</span>

Twig usage

Instead of writing html, you can embed the twig template :

{% embed "path/to/trowel-ribbons/src/twig/ribbon.html.twig" %}
  {% block content %}default{% endblock %}
{% endembed %}

If you want to add some modifiers on the block selector (.ribbon), you can set the array modifiers with as many modifiers as you need :

{% embed "path/to/trowel-ribbons/src/twig/ribbon.html.twig" with {
  "modifiers": ["primary"]
} %}
  {% block content %}primary{% endblock %}
{% endembed %}

Sass reference

Syntax variables

You can override the global syntax config for a specific component with the following variables

Component variables