"Panel Grid Cards"
Bootstrap 4.0.0 Snippet by ratebalmsoty

Post to Facebook Tweet this

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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- ========= -->
<!-- Your HTML -->
<!-- ========= -->
<div class="ui segment" style="margin-bottom: 0em !important;">
<!-- Tarjeta de presentacion -->
<div class="ui sticky" style="float: right !important;">
<div class="ui fluid three tabular menu" style="border-style: inherit !important; ">
<div id="contact-button-card" class="ui segment text-right creacionesHF-cursor-hand" >
<span class="creacionesHF-lightgrey-text">
@Null01
</span>
</div>
</div>
</div>
<div class="ui container">
<div class="ui grid">
<div class="sixteen wide column">
<div class="ui three stackable cards">
<div class="card">
<div class="ui left piled segment">
<img src="https://semantic-ui.com/images/avatar2/large/matthew.png" class="ui tiny left floated image">
<h3 class="ui header text-center" style="margin-top: 0px;" >¿Qué es Lorem Ipsum?</h3>
<div class="floated right text-center description">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
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
<script type="text/javascript" >
$('.ui.sticky').sticky();
$('#contact-button-card').click(function () {
$('#modal-contact-me')
.modal('setting', 'transition', 'vertical flip')
.modal('show');
});
$(document).foundation();
setInterval(function () {
$('.ui.grid .sixteen.wide.column .ui.three.stackable.cards .card').transition({
animation: 'tada',
duration: 1000,
interval: 200
});
}, 1000 * 15);
setInterval(function () {
$('.ui.grid .sixteen.wide.column .ui.four.stackable.cards .card').transition({
animation: 'jiggle',
duration: 800,
interval: 200
});
}, 1000 * 7);
</script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit
Information Cards
Responsive Data Cards (Bootstrap 4)
Bootstrap 4 and CCS3 Product Cards with Transition

Questions / Comments: