github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

add ribbon over image demo & docs

pull/2697/head
REJack 2020-05-17 00:54:42 +02:00
parent 9f5c6bcfd8
commit c26ef4e556
2 changed files with 46 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/components/ribbons.md
View File

@ -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>
```

32
pages/UI/ribbons.html
View File

@ -800,6 +800,38 @@
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-sm-4">
<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>
</div>
<div class="col-sm-4">
<div class="position-relative">
<img src="../../dist/img/photo2.png" alt="Photo 2" class="img-fluid">
<div class="ribbon-wrapper ribbon-xl">
<div class="ribbon bg-warning text-lg">
Ribbon
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="position-relative" style="min-height: 180px;">
<img src="../../dist/img/photo3.jpg" alt="Photo 3" class="img-fluid">
<div class="ribbon-wrapper ribbon-xl">
<div class="ribbon bg-danger text-xl">
Ribbon
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.card-body -->
</div>