Text: Metrics in Pills

Shortcode
How to Use

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 */
  }
}

How to use Flatresources

Using Flatresources with your Flatsome website is easy as a breeze.

First, copy the provided Shortcode and paste it to the text page editor or directly to the UX Builder.

1. Copy and paste the Shortcode

Pasting the Shortcode using UX Builder import function

Pasting the Shortcode to the page text editor

2. Add the custom CSS code

Second, copy the CSS code (if provided) and paste it into your project to achieve the desired appearance.

There are multiple methods of adding and updating CSS code in WordPress, so let's look at each one of them.

Using a plugin (Simple Custom CSS and JS PRO)

This is our preferred method because it allows you to create multiple stylesheets to keep things neat and tidy. If you upgrade to the paid license, you will be able to apply the CSS code only to selected URLs, keep track of revisions, and much more.

Adding CSS using the Simple Custom CSS and JS plugin

WordPress Additional CSS

Appearance → Customize → Additional CSS

Flatsome Custom CSS

Flatsome → Advanced → Custom CSS

Theme style.css

Appearance → Theme Editor → style.css

Text: Metrics in Pills

Metrics

Spotlight some important metrics to impress.

98%

600+

7