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

add card with image overlay demo

pull/3139/head
REJack 2020-11-24 09:27:57 +01:00
parent 290738e916
commit fe3bce3398
1 changed files with 46 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
pages/widgets.html
View File

@ -3078,6 +3078,52 @@
<!-- /.col --> <!-- /.col -->
</div> </div>
<!-- /.row --> <!-- /.row -->
<h5 class="mb-2">Card with Image Overlay</h5>
<div class="card card-success">
<div class="card-body">
<div class="row">
<div class="col-md-12 col-lg-6 col-xl-4">
<div class="card mb-2 bg-gradient-dark">
<img class="card-img-top" src="../dist/img/photo1.png">
<div class="card-img-overlay d-flex flex-column justify-content-end">
<h5 class="card-title text-primary text-white">Card Title</h5>
<p class="card-text text-white pb-2 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
<a href="#" class="text-white">Last update 2 mins ago</a>
</div>
</div>
</div>
<div class="col-md-12 col-lg-6 col-xl-4">
<div class="card mb-2">
<img class="card-img-top" src="../dist/img/photo2.png">
<div class="card-img-overlay d-flex flex-column justify-content-center">
<h5 class="card-title text-white mt-5 pt-2">Card Title</h5>
<p class="card-text pb-2 pt-1 text-white">
Lorem ipsum dolor sit amet, <br>
consectetur adipisicing elit <br>
sed do eiusmod tempor
</p>
<a href="#" class="text-white">Last update 2 mins ago</a>
</div>
</div>
</div>
<div class="col-md-12 col-lg-6 col-xl-4">
<div class="card mb-2">
<img class="card-img-top" src="../dist/img/photo3.jpg">
<div class="card-img-overlay">
<h5 class="card-title text-primary">Card Title</h5>
<p class="card-text pb-1 pt-1 text-white">
Lorem ipsum dolor <br>
sit amet, consectetur <br>
adipisicing elit sed <br>
do eiusmod tempor </p>
<a href="#" class="text-primary">Last update 2 mins ago</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- /.container-fluid --> </div><!-- /.container-fluid -->
</section> </section>
<!-- /.content --> <!-- /.content -->