"Cards horizontal as links"
Bootstrap 4.0.0 Snippet by olivierlabbe

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-sm-3 ">
<div class="wrimagecard wrimagecard-topimage">
<a href="#">
<div class="wrimagecard-topimage_header" style="background-color: rgba(119, 178, 88, 0.1)">
<center><img src="http://www.serpro.gov.br/++resource++serpro.portalserprotema/img/logo-serpro.png" class="img-responsive"></img> </center>
</div>
<div class="wrimagecard-topimage_title">
<h4>Serpro
<div class="pull-right badge" id="WrControls"></div></h4>
</div>
</a>
</div>
</div>
<div class="col-md-2 col-sm-3">
<div class="wrimagecard wrimagecard-topimage">
<a href="#">
<div class="wrimagecard-topimage_header" style="background-color: rgba(119, 178, 88, 0.1)">
<center><img src="http://www.correios.com.br/++theme++correios.site.tema/images/logo_correios.png" class="img-responsive"></img> </center>
</div>
<div class="wrimagecard-topimage_title">
<h4>Correios
<div class="pull-right badge" id="WrControls"></div></h4>
</div>
</a>
</div>
</div>
<div class="col-md-2 col-sm-3">
<div class="wrimagecard wrimagecard-topimage">
<a href="#">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.wrimagecard{
margin-top: 0;
margin-bottom: 1.5rem;
text-align: left;
position: relative;
background: #fff;
box-shadow: 12px 15px 20px 0px rgba(46,61,73,0.15);
border-radius: 4px;
transition: all 0.3s ease;
}
.wrimagecard .fa{
position: relative;
font-size: 70px;
}
.wrimagecard-topimage_header{
padding: 20px;
}
.wrimagecard-topimage_header img {
width: 10rem;
height: 5rem;
}
a.wrimagecard:hover, .wrimagecard-topimage:hover {
box-shadow: 2px 4px 8px 0px rgba(46,61,73,0.2);
}
.wrimagecard-topimage a {
width: 100%;
height: 100%;
display: block;
}
.wrimagecard-topimage_title {
padding: 20px 24px;
height: 80px;
padding-bottom: 0.75rem;
position: relative;
}
.wrimagecard-topimage a {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: