Cards
SpaceMax's cards provide a flexible and extensible content container with multiple variants and options.
Open Bootstrap DocsSpaceMax Cards
Variation one
Optimized for Any Device
No matter what device it is. Each of our themes is natively responsive, resizing your content and images to fit any device or screen width. You can also adjust them in your way.
<div class="card">
<img class="card-img-top" src="img/blog-post-1.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">...</h5>
<p class="card-text pb-3">...</p>
<a href="#" class="btn btn-primary">...</a>
</div>
</div>
Variation Two
13rd July, 2019
Computer Hardware Desktops And Notebooks.
<div class="col-12 col-md-6 col-xl-3">
<div class="card box-shadow--3 card-hover--3d border--none mb-3">
<a href="#"><img src="img/news-1.jpg" class="card-img-top" alt="news"></a>
<div class="card-body d-flex flex-column px-2">
<span class="font-size--14 text-color--400 mb-1">...</span>
<a href="#" class="card-title text-hover--primary h6-font font-w--500 text-color--700 mb-0">...</a>
</div>
</div>
</div>
Variation Three
Storage
$ 0.015
Per GB Per Month
<div class="col-12 col-sm-6 col-lg-5 col-xl-4 mb-3 mb-sm-0">
<div class="card card-hover--shadow border--none box-shadow--3 bg-color--primary color--white align-items-center pt-5 pb-6 px-4">
<span class="label label--lg label-bg--light--100 font-w--400 mb-5">...</span>
<span class="icon--9x mb-3"><i class="icon icon-server-rack"></i></span>
<span class="h2-font font-w--700 mb-1">...</span>
<span class="h6-font font-w--700">...</span>
</div>
</div>
Variation Four
Onepager
White papers are published on the Web and in print by researchers, organization vendors and consultants.
Whitepaper
White papers are published on the Web and in print by researchers, organization vendors and consultants.
<div class="col-12 col-sm-6 col-lg-5 col-xl-5 mb-3 mb-sm-0">
<div class="card--v2">
<div class="card border--none flex-row align-items-end mb-3 jsElementFocus reveal focused">
<div class="card-body py-5 pl-4 pr-1">
<a href="#" class="card__title h4-font font-w--700 mb-2">...</a>
<p class="font-size--16">...</p>
</div>
<a href="#" class="icon--md bg-color--green rounded-circle color--white m-2">
<i class="icon icon-data-download"></i>
</a>
</div>
</div>
</div>
<!-- end of focued card -->
<div class="col-12 col-sm-6 col-lg-5 col-xl-5 mb-3 mb-sm-0">
<div class="card--v2">
<div class="card border--none flex-row align-items-end mb-3 jsElementFocus reveal">
<div class="card-body py-5 pl-4 pr-1">
<a href="#" class="card__title h4-font font-w--700 mb-2">...</a>
<p class="font-size--16">...</p>
</div>
<a href="#" class="icon--md bg-color--green rounded-circle color--white m-2">
<i class="icon icon-arrow-right"></i>
</a>
</div>
</div>
</div>
<!-- end of none focused card -->
Variation Five
Smart
Contracts
Computers have become ubiquitous in almost every facet of our lives. At work, desk jockeys spend.
<div class="col-12 col-sm-6 col-lg-5 col-xl-4 mb-3 mb-sm-0">
<div class="card--v3">
<div class="card bg-color--primary rounded--05 box-shadow--6 px-3 pt-5 pb-3">
<div class="card-body">
<span class="font-size--60 mb-2 color--white">
<i class="icon icon-contacts"></i>
</span>
<h3 class="font-size--30 font-w--700 mb-2"><a href="#" class="color--white" tabindex="0">...</a></h3>
<p class="mb-3 font-size--20 opacity--80">...</p>
</div>
<div class="card-footer">
<a href="#" class="font-size--26 color--white" tabindex="0"><i class="icon icon-arrow-right"></i></a>
</div>
</div>
</div>
</div>
Variation Six
Access
If you are looking at blank cassettes on the web, you may be very confused at the price.
<div class="col-12 col-sm-6 col-lg-5 col-xl-3 mb-3 mb-sm-0">
<div class="card border--none bg-white text-center box-shadow--4 py-4 px-2 d-flex align-items-center card-hover--shadow-3d">
<span class="icon--lg color--primary bg-color--primary-opacity--10 rounded--full mb-2"> <i class="icon icon-key"></i> </span>
<h3 class="h5-font font-w--700 mb-1">...</h3>
<p class="font-size--16">...</p>
</div>
</div>
Variation Seven
<div class="card card--full-image position-relative">
<img src="img/news-8.jpg" alt="news" class="card-img">
<div class="card-body d-flex flex-column p-3 px-lg-4 py-lg-3 pos-abs-bottom">
<span class="font-size--14 color--white mb-1">13rd July, 2019</span>
<a href="#" class="card-title h5-font color--white font-w--500 mb-0">...</a>
</div>
</div>
Variation Eight
<div class="col-12 col-sm-6 col-lg-4 mb-3 mb-sm-0">
<div class="card max-w--350 mx-auto">
<div class="d-flex flex-column align-items-center justify-content-center text-center p-3">
<span class="color--primary font-size--60">
<i class="icon icon-plant-vase-2"></i>
</span>
<span class="font-size--20 font-w--600 text-color--700">
Getting started
</span>
</div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item text-color--400">File structure</a>
<a href="#" class="list-group-item text-color--400">NPM and Gulp</a>
<a href="#" class="list-group-item text-color--400">Updating the colors</a>
</div>
<div class="card-body py-2">
<a href="#" class="d-flex justify-content-between align-items-center">
<div>
<i class="icon icon-folder-17 color--primary mr-1"></i>
<span class="text-color--700 font-size--18 font-w--500">37 topics</span>
</div>
<i class="icon icon-small-right arrow_right color--primary"></i>
</a>
</div>
</div>
</div>
Variation Nine
<div class="article">
<div class="card">
<div class="article__thumbnail">
<div class="article__thumbnail-image" style="background-image: url("img/blog-page-img-3.jpg"); background-repeat: no-repeat; height: 202.203px;">
<img src="img/blog-page-img-3.jpg" alt="thumbnail" class="card-img-top background-image-holder" style="display: none;">
</div>
</div>
<!-- end of image -->
<div class="article-author">
<a href="#" class="article-author__avatar" style="background-image: url("img/author-avatar-3.png"); background-repeat: no-repeat;">
<img src="img/author-avatar-3.png" class="background-image-holder" alt="author" style="display: none;">
</a>
<div>
<a href="#" class="article-author__name">Sam Tyler</a>
</div>
</div>
<!-- end of author avatar & name -->
<div class="card-body">
<a href="#" class="article__title">
<h2>5 tips for offshore software development</h2>
</a>
<span class="article__date">25 Aug 2018</span>
</div>
<!-- end of body content -->
</div>
</div>
SpaceMax Card Hover
13rd July, 2019
Card 3D Hover
13rd July, 2019
Box Shadow Hover.
13rd July, 2019
3D with Shadow Hover.
<div class="col-12 col-md-6 col-xl-3">
<div class="card box-shadow--3 card-hover--3d border--none mb-3">
<a href="#"><img src="img/news-1.jpg" class="card-img-top" alt="news"></a>
<div class="card-body d-flex flex-column px-2">
<span class="font-size--14 text-color--400 mb-1">...</span>
<a href="#" class="card-title text-hover--primary h6-font font-w--500 text-color--700 mb-0">...</a>
</div>
</div>
</div>
<!-- end of 3D Hover -->
<div class="col-12 col-md-6 col-xl-3">
<div class="card box-shadow--3 card-hover--shadow border--none mb-3">
<a href="#"><img src="img/news-1.jpg" class="card-img-top" alt="news"></a>
<div class="card-body d-flex flex-column px-2">
<span class="font-size--14 text-color--400 mb-1">...</span>
<a href="#" class="card-title text-hover--primary h6-font font-w--500 text-color--700 mb-0">...</a>
</div>
</div>
</div>
<!-- end of Box Shadow Hover -->
<div class="col-12 col-md-6 col-xl-3">
<div class="card box-shadow--3 card-hover--shadow-3d border--none mb-3">
<a href="#"><img src="img/news-1.jpg" class="card-img-top" alt="news"></a>
<div class="card-body d-flex flex-column px-2">
<span class="font-size--14 text-color--400 mb-1">...</span>
<a href="#" class="card-title text-hover--primary h6-font font-w--500 text-color--700 mb-0">...</a>
</div>
</div>
</div>
<!-- end of Box 3D+Shadow Hover -->
Class Reference
.card-hover--3d
.card-hover--shadow
.card-hover--shadow-3d