ribbon fixes

src/pages/_docs/ribbons.md

@@ -12,7 +12,7 @@ Use the `ribbon` class to add the default ribbon to any section of your interfac
 {% capture code %}
 {% include cards/ribbon.html %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=1 %}
 
 
 ## Ribbon position
@@ -29,7 +29,7 @@ Using multiple classes at once will give you more position options. For example,
 {% capture code %}
 {% include cards/ribbon.html top=true left=true %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=1 %}
 
 
 ## Ribbon color
@@ -39,7 +39,7 @@ Customize the ribbon's background color. You can click [here]({% docs_url colors
 {% capture code %}
 {% include cards/ribbon.html color="red" %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=1 %}
 
 
 ## Ribbon text
@@ -49,7 +49,7 @@ Add your own text to a ribbon to display any additional information and make it
 {% capture code %}
 {% include cards/ribbon.html color="green" text="-50%" %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=1 %}
 
 
 ## Ribbon style
@@ -59,4 +59,4 @@ Change the style of a ribbon to make it go well with your interface design.
 {% capture code %}
 {% include cards/ribbon.html bookmark=true color="orange" text="-50%" %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=1 %}

src/pages/_includes/cards/ribbon.html

@@ -2,7 +2,7 @@
 {% assign product = site.data.products[product-id] %}
 
 <div class="card">
-	<div class="card-body{% unless include.lorem %} h-8{% endunless %}">
+	<div class="card-body"{% unless include.lorem %} style="height: 5rem"{% endunless %}>
 		{% if include.lorem %}
 			<h3 class="card-title">Card with ribbon</h3>
 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur consequuntur culpa cum dolorum eveniet.</p>

src/pages/_includes/ui/ribbon.html

-<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" use-svg=true %}{% endif %}</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" use-svg=true %}{% endif %}
+</div>
\ No newline at end of file

src/scss/demo/_examples.scss

@@ -38,6 +38,7 @@
 
   pre {
     margin: 0;
+    border: 0;
     border-radius: 0 0 3px 3px;
   }