add ribbon over image demo & docs

2020-05-17 00:54:42 +02:00
parent 9f5c6bcfd8
commit c26ef4e556
2 changed files with 46 additions and 0 deletions
--- a/docs/components/ribbons.md
+++ b/docs/components/ribbons.md
@@ -163,3 +163,17 @@ The ribbon comes in three sizes to display more text or use larger font sizes, d
 ```
  </div>
 </div>
+
+##### Image Example Code
+{: .text-bold .text-dark .mt-5}
+
+```html
+<div class="position-relative">
+    <img src="../../dist/img/photo1.png" alt="Photo 1" class="img-fluid">
+    <div class="ribbon-wrapper ribbon-lg">
+        <div class="ribbon bg-success text-lg">
+            Ribbon
+        </div>
+    </div>
+</div>
+```