Mdb Cards

From Foundation
Jump to navigation Jump to search

Extended Cards

Material design components are a brand-new feature to Foundation, they're not included in the current version (1.4.23), watch this space for 1.4.24


photo6.jpg

Alison Belmont

Graffiti Artist

Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Primary
img%20(147).jpg
Culinary

Cheat day inspirations

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.

Button
men.jpg

Billy Coleman

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Danger
<div class="row">
<div class="col-md-4">
<div class="card card-cascade wider mb-4"> <!-- Card image -->
<div class="view view-cascade overlay"><div class="card-img-top">https://mdbootstrap.com/img/Photos/Others/photo6.jpg</div>
<div class="mask rgba-white-slight waves-effect waves-light"></div>
</div>
<div class="card-body card-body-cascade text-center"> <!-- Title -->
<h4 class="card-title"><strong>Alison Belmont</strong></h4>
<h5 class="blue-text pb-2"><strong>Graffiti Artist</strong></h5>
<p class="card-text">Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
<div type="button" class="btn btn-primary waves-effect waves-light">Primary</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-cascade narrower mb-4">
<div class="view view-cascade overlay"><div class="card-img-top">https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg</div>
<div class="mask rgba-white-slight waves-effect waves-light"></div>
</div>
<div class="card-body card-body-cascade text-center">
<h5 class="pink-text pb-2 pt-1"><i class="fas fa-utensils"></i> Culinary</h5>
<h4 class="card-title">Cheat day inspirations</h4>
<p class="card-text">Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.</p>
<div class="btn btn-unique waves-effect waves-light">Button</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-cascade mb-4">
<div class="view view-cascade overlay"><div class="card-img-top">https://mdbootstrap.com/img/Photos/Others/men.jpg</div>
<div class="mask rgba-white-slight waves-effect waves-light"></div>
</div>
<div class="card-body card-body-cascade text-center">
<h4 class="card-title"><strong>Billy Coleman</strong></h4>
<h6 class="font-weight-bold indigo-text py-2">Web developer</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.</p>
<div type="button" class="btn btn-danger waves-effect waves-light">Danger</div>
</div>
</div>
</div>
</div>

Support

Please use the discussion page to ask questions.



TOP

Retrieved from ‘https://foundationextension.com/index.php?title=Mdb_Cards&oldid=463