"card promo"
Bootstrap 3.0.0 Snippet by evarevirus

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="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.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="promoBox info-box info-ribbon">
<aside><p>Ribbon Text</p></aside>
<h4>Hero Text Goes Here Yo!</h4>
<p>This is where I would type real copy if this wasn't just in codepen!</p>
</div>
<div class="promoBox warning-box danger-ribbon">
<aside><p>Ribbon Text</p></aside>
<h4>Hero Text Goes Here Yo!</h4>
<p>This is where I would type real copy if this wasn't just in codepen!</p>
</div>
<div class="promoBox success-ribbon">
<aside><p>Ribbon Text</p></aside>
<h4>Hero Text Goes Here Yo!</h4>
<p>This is where I would type real copy if this wasn't just in codepen!</p>
</div>
<div class="promoBox success-box info-ribbon">
<aside><p>Ribbon Text</p></aside>
<h4>Hero Text Goes Here Yo!</h4>
<p>This is where I would type real copy if this wasn't just in codepen!</p>
</div>
<div class="promoBox danger-box warning-ribbon">
<aside><p>Ribbon Text</p></aside>
<h4>Hero Text Goes Here Yo!</h4>
<p>This is where I would type real copy if this wasn't just in codepen!</p>
</div>
<div class="promoBox">
<aside><p>Ribbon Text</p></aside>
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
* { font-family: Helvetica, Arial, sans-serif; }
.promoBox {
display: inline-block;
position: relative;
margin: 5px;
padding: 10px;
width: 300px;
border: 2px solid #ddd;
-webkit-border-radius: 8px;
border-radius: 8px;
overflow: hidden;
background: #ffffff;
background: -moz-linear-gradient(-45deg, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6));
background: -webkit-linear-gradient(-45deg, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
background: -o-linear-gradient(-45deg, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
background: -ms-linear-gradient(-45deg, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
background: linear-gradient(135deg, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=1 );
-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
}
.promoBox aside {
position: absolute;
width: 230px;
right: 0;
margin: 0 -65px 0 0;
-webkit-transform: rotate(35deg);
-khtml-transform: rotate(35deg);
-moz-transform: rotate(35deg);
-ms-transform: rotate(35deg);
transform: rotate(35deg);
-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Gaia Bootstrap Template Pro
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: