---
title: Ribbons
page-header: Ribbons
done: true
---

{% assign col-class = "col-sm-6 col-lg-4 col-xl-3" %}

<div class="row">
	<div class="{{ col-class }}">{% include cards/ribbon.html %}</div>
	<div class="{{ col-class }}">{% include cards/ribbon.html top=true %}</div>
	<div class="{{ col-class }}">{% include cards/ribbon.html top=true left=true %}</div>
	<div class="{{ col-class }}">{% include cards/ribbon.html bottom=true %}</div>
	<div class="{{ col-class }}">{% include cards/ribbon.html left=true %}</div>
	<div class="{{ col-class }}">{% include cards/ribbon.html left=true bottom=true %}</div>
	<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true %}</div>
	<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true bottom=true %}</div>
	<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true left=true %}</div>
	<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true left=true bottom=true %}</div>
	<div class="{{ col-class }}">{% include cards/ribbon.html color="red" %}</div>
	<div class="{{ col-class }}">{% include cards/ribbon.html color="green" bottom=true %}</div>
	<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="teal" left=true %}</div>
	<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="yellow" left=true bottom=true %}</div>
	<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="pink" left=true top=true %}</div>
	<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="purple" top=true %}</div>
	<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="teal-lt" left=true %}</div>
	<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="yellow-lt" left=true bottom=true %}</div>
	<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="pink-lt" left=true top=true %}</div>
	<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="purple-lt" top=true %}</div>
</div>
