<ul class="badge-bullets">
<li class="bullet">
<div class="bullet-icon" data-for-badge="1"></div>
<div class="bullet-content">
<p>Lorem dolor sit amet consectetur adipisicing elit Doloremque, minus, blanditiis.</p>
</div>
</li>
<li class="bullet">
<div class="bullet-icon" data-for-badge="2"></div>
<div class="bullet-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</li>
<li class="bullet">
<div class="bullet-icon" data-for-badge="3"></div>
<div class="bullet-content">
<p>Lorem ipsum sit amet consectetur adipisicing elit Doloremque, minus, blanditiis.</p>
</div>
</li>
</ul>
@import "bourbon";
@import "neat";
$xx-small-width: rem(320);
$x-small-width: rem(480);
$small-width: rem(640);
$medium-width: rem(800);
$large-width: rem(960);
$x-large-width: rem(1200);
$xx-large-width: rem(1400);
$xxx-small: new-breakpoint(max-width $xx-small-width 1); // Up to 320
$xx-small: new-breakpoint(min-width $xx-small-width 1); // 320 and up
$x-small: new-breakpoint(min-width $x-small-width 4); // 480 and up
$small: new-breakpoint(min-width $small-width 12); // 640 and up
$medium: new-breakpoint(min-width $medium-width 12); // 800 - 959
$large: new-breakpoint(min-width $large-width 12); // 960 - 1199
$x-large: new-breakpoint(min-width $x-large-width 12); // 1200 - 1399
$xx-large: new-breakpoint(min-width $xx-large-width 12); // 1400 and up
.badge-bullets {
$base-line-height: 1.5em !default;
$action-color: #d97d2e !default;
$dark-gray: #333 !default;
$base-font-color: $dark-gray !default;
$icon-bullet-size: 3.125em;
margin: 1em;
margin-bottom: $base-line-height;
overflow: auto;
padding: 0;
display: flex;
align-content: center;
flex-wrap: wrap;
@include media($large-width) {
flex-wrap: nowrap;
}
.bullet {
flex-basis: 20em;
flex-grow: 1;
margin-bottom: 2em;
}
.bullet-icon {
background: $action-color;
border-radius: 50%;
float: left;
@include media($large-width) {
float: none;
}
line-height: $icon-bullet-size;
height: $icon-bullet-size;
width: $icon-bullet-size;
text-align: center;
@include media($large-width) {
margin: 0 auto;
}
}
.bullet-icon:before {
content: attr(data-for-badge);
color: #FFFFFF;
font-size: 32px;
font-weight: bold;
}
.bullet-content {
font-size: 1.125em;
margin-left: $icon-bullet-size * 1.4;
@include media($large-width) {
margin-left: 0;
text-align: center;
}
}
p {
margin: 0;
color: $base-font-color;
line-height: $base-line-height;
}
li {
list-style: none;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.