ribbons

_config.yml

@@ -119,6 +119,6 @@ docs-menu:
     pages: [index]
   components:
     title: Components
-    pages: [alerts, avatars, badges, buttons, cards, carousel, spinners, steps, tabs, toasts, tooltips, typography]
+    pages: [alerts, avatars, badges, buttons, cards, carousel, ribbons, spinners, steps, tabs, toasts, tooltips, typography]
 
 

pages/_docs/ribbons.md

+---
+title: 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 %}

pages/_includes/cards/ribbon.html

@@ -6,5 +6,5 @@
 		<div class="h-16"></div>
 	</div>
 
-	<div class="ribbon{% if include.top %} ribbon-top{% endif %}{% if include.left %} ribbon-left{% endif %}{% if include.bottom %} ribbon-bottom{% endif %}{% if include.bookmark %} ribbon-bookmark{% endif %}{% if include.color %} bg-{{ include.color }}{% endif %}">{% include ui/icon.html icon="star" class="icon-filled icon-thin" %}</div>
-</div>
\ No newline at end of file
+	<div class="ribbon{% if include.top %} ribbon-top{% endif %}{% if include.left %} ribbon-left{% endif %}{% if include.bottom %} ribbon-bottom{% endif %}{% if include.bookmark %} ribbon-bookmark{% endif %}{% if include.color %} bg-{{ include.color }}{% endif %}">{% if include.text %}{{ include.text }}{% else %}{% include ui/icon.html icon="star" %}{% endif %}</div>
+</div>

scss/ui/_ribbons.scss

@@ -5,7 +5,7 @@
   top: .75rem;
   right: -($ribbon-margin);
   z-index: 1;
-  padding: .5rem 1rem;
+  padding: .375rem 1rem;
   font-weight: 600;
   color: #fff;
   text-align: center;