Shortcode
[section label="*Text: Metrics in Pills" bg_color="rgb(248, 246, 244)" padding="0px" class="text-metrics-pills"]
[row style="collapse" width="full-width" v_align="middle" h_align="center"]
[col span="6" span__sm="12" span__md="12"]
[ux_image id="3631" image_size="original" height="100%"]
[/col]
[col span="6" span__sm="12" span__md="12" padding="48px 24px 48px 24px" padding__sm="72px 15px 72px 15px" padding__md="96px 24px 96px 24px"]
[row_inner style="collapse" width="custom" custom_width="506px"]
[col_inner]
[row_inner_1 style="collapse"]
[col_inner_1 span__sm="12"]
<h5 class="subheading">Metrics</h5>
<h3 class="heading">Spotlight some important metrics to impress.</h3>
[/col_inner_1]
[col_inner_1 span__sm="12" padding="18px 36px 18px 36px" margin="0px 0px 12px 0px" bg_color="rgb(255,255,255)" bg_radius="100" border="1px 1px 1px 1px" border_radius="100" border_color="rgb(235, 235, 236)"]
[ux_stack direction__sm="col" distribute="between" align="center" align__sm="center" gap__sm="0.5"]
[ux_text]
<h5 class="metric-number">98%</h5>
[/ux_text]
[ux_text]
<p><strong>Customer satisfaction</strong></p>
[/ux_text]
[/ux_stack]
[/col_inner_1]
[col_inner_1 span__sm="12" padding="18px 36px 18px 36px" margin="0px 0px 12px 0px" bg_color="rgb(255,255,255)" bg_radius="100" border="1px 1px 1px 1px" border_radius="100" border_color="rgb(235, 235, 236)"]
[ux_stack direction__sm="col" distribute="between" align="center" align__sm="center" gap__sm="0.5"]
[ux_text]
<h5 class="metric-number">600+</h5>
[/ux_text]
[ux_text]
<p><strong>Community members</strong></p>
[/ux_text]
[/ux_stack]
[/col_inner_1]
[col_inner_1 span__sm="12" padding="18px 36px 18px 36px" bg_color="rgb(255,255,255)" bg_radius="100" border="1px 1px 1px 1px" border_radius="100" border_color="rgb(235, 235, 236)"]
[ux_stack direction__sm="col" distribute="between" align="center" align__sm="center" gap__sm="0.5"]
[ux_text]
<h5 class="metric-number">7</h5>
[/ux_text]
[ux_text]
<p><strong>Industry awards</strong></p>
[/ux_text]
[/ux_stack]
[/col_inner_1]
[/row_inner_1]
[/col_inner]
[/row_inner]
[/col]
[/row]
[/section]
CSS
/*---------- Text: Metrics in Pills ----------*/
.text-metrics-pills h5.subheading {
font-size: 125%; /* 20px */
margin-bottom: 16px;
color: #392396; /* Change subheading color */
}
.text-metrics-pills h3.heading {
font-size: 250%; /* 40px */
line-height: 1.2;
margin-bottom: 48px;
}
.text-metrics-pills h5.metric-number {
font-size: 200%; /* 32px */
color: #392396; /* Change metric color */
line-height: 1.2;
}
@media screen and (max-width:549px) {
.text-metrics-pills h3.heading {
font-size: 200%; /* 32px */
}
}