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

### 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 %}