---
title: Ribbons
menu: docs.ribbons
---

## Default markup

{% example html columns=1 %}
{% include cards/ribbon.html %}
{% endexample %}

## Ribbon position

{% example html columns=1 %}
{% include cards/ribbon.html top=true left=true %}
{% endexample %}

## Ribbon color

{% example html columns=1 %}
{% include cards/ribbon.html color="red" %}
{% endexample %}

## Ribbon text

{% example html columns=1 %}
{% include cards/ribbon.html color="green" text="-50%" %}
{% endexample %}

## Ribbon style

{% example html columns=1 %}
{% include cards/ribbon.html bookmark=true color="orange" text="-50%" %}
{% endexample %}