3-column stats

Stylized stats split across three columns on a desktop, collapsing to one column on smaller screens. As first seen on https://med.ubc.ca

You can view a live preview or take a look at the code required for this pattern. When viewing the code, you can copy it so that you can then paste it into your own site. Below the preview/code, you’ll see instructions on how to use block patterns on CMS.

Live Preview
OpenClose

80+

Training Sites Across BC

4,500+

Trainees

9/10

of UBC MD graduates who attend UBC for residency training are practising in B.C. communities

*2017/18 numbers

Read more By The Numbers
Code
OpenClose
<!-- wp:group {"metadata":{"name":"3-column stats"},"className":"","layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:columns {"style":{"spacing":{"margin":{"top":"0","bottom":"0"},"blockGap":{"top":"0","left":"var:preset|spacing|60"}}}} -->
<div class="wp-block-columns" style="margin-top:0;margin-bottom:0"><!-- wp:column {"style":{"border":{"right":{"color":"#b4d0e2","width":"1px"},"top":{},"bottom":{},"left":{}}}} -->
<div class="wp-block-column" style="border-right-color:#b4d0e2;border-right-width:1px"><!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"},"margin":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"className":"","layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:paragraph {"align":"center","style":{"color":{"text":"#2254b1"},"elements":{"link":{"color":{"text":"#2254b1"}}},"typography":{"fontSize":"50px","fontStyle":"normal","fontWeight":"700"},"spacing":{"margin":{"bottom":"var:preset|spacing|50"}}}} -->
<p class="has-text-align-center has-text-color has-link-color" style="color:#2254b1;margin-bottom:var(--wp--preset--spacing--50);font-size:50px;font-style:normal;font-weight:700">80+</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#2254b1"},"elements":{"link":{"color":{"text":"#2254b1"}}},"typography":{"fontSize":"22px","fontStyle":"normal","fontWeight":"300"},"spacing":{"margin":{"top":"var:preset|spacing|30"}}}} -->
<p class="has-text-align-center has-text-color has-link-color" style="color:#2254b1;margin-top:var(--wp--preset--spacing--30);font-size:22px;font-style:normal;font-weight:300">Training Sites Across BC</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"border":{"right":{"color":"#b4d0e2","width":"1px"},"top":{},"bottom":{},"left":{}}}} -->
<div class="wp-block-column" style="border-right-color:#b4d0e2;border-right-width:1px"><!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"},"margin":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"className":"","layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:paragraph {"align":"center","style":{"color":{"text":"#2254b1"},"elements":{"link":{"color":{"text":"#2254b1"}}},"typography":{"fontSize":"50px","fontStyle":"normal","fontWeight":"700"},"spacing":{"margin":{"bottom":"var:preset|spacing|50"}}}} -->
<p class="has-text-align-center has-text-color has-link-color" style="color:#2254b1;margin-bottom:var(--wp--preset--spacing--50);font-size:50px;font-style:normal;font-weight:700">4,500+</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#2254b1"},"elements":{"link":{"color":{"text":"#2254b1"}}},"typography":{"fontSize":"22px","fontStyle":"normal","fontWeight":"300"},"spacing":{"margin":{"top":"var:preset|spacing|30"}}}} -->
<p class="has-text-align-center has-text-color has-link-color" style="color:#2254b1;margin-top:var(--wp--preset--spacing--30);font-size:22px;font-style:normal;font-weight:300">Trainees</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"},"margin":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"className":"","layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:paragraph {"align":"center","style":{"color":{"text":"#2254b1"},"elements":{"link":{"color":{"text":"#2254b1"}}},"typography":{"fontSize":"50px","fontStyle":"normal","fontWeight":"700"},"spacing":{"margin":{"bottom":"var:preset|spacing|50"}}}} -->
<p class="has-text-align-center has-text-color has-link-color" style="color:#2254b1;margin-bottom:var(--wp--preset--spacing--50);font-size:50px;font-style:normal;font-weight:700">9/10</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#2254b1"},"elements":{"link":{"color":{"text":"#2254b1"}}},"typography":{"fontSize":"22px","fontStyle":"normal","fontWeight":"300","lineHeight":"1.4"},"spacing":{"margin":{"top":"var:preset|spacing|30"}}}} -->
<p class="has-text-align-center has-text-color has-link-color" style="color:#2254b1;margin-top:var(--wp--preset--spacing--30);font-size:22px;font-style:normal;font-weight:300;line-height:1.4">of UBC MD graduates who attend UBC for residency training are practising in B.C. communities</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:group {"metadata":{"name":"Stats Link"},"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}},"className":"","layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="margin-top:0;margin-bottom:0"><!-- wp:paragraph -->
<p><em>*2017/18 numbers</em></p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}}} -->
<div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20)"><!-- wp:button {"style":{"border":{"radius":"0px","width":"1px"},"spacing":{"padding":{"left":"var:preset|spacing|30","right":"var:preset|spacing|30","top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"borderColor":"primary-blue","className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-border-color has-primary-blue-border-color wp-element-button" style="border-width:1px;border-radius:0px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)">Read more <em>By The Numbers</em> <i class="icon fa fa-external-link" aria-hidden="true"> </i></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

Prerequisites

There are no prerequisites to use this block pattern. You can copy and paste this code into your site and it should work immediately.

Switch between the live preview and the code view to see what this might look like on your site and how to get it there

Available on every CMS website

How do I use block patterns on my site on CMS?

Block Patterns in WordPress are HTML with CSS (provided by special HTML comments). That means you’re able to simply copy a block (or selection of blocks) from one place, and paste them somewhere else, and they should look identical. In order to get the above block pattern on your site, try the following:

  1. Click the ‘Code’ tab above
  2. Click the ‘Copy to Clipboard’ icon in the top right of the code that is shown
  3. On your own site, add a new paragraph block to a post or a page
  4. Paste (ctrl+v on Windows, cmd+v on macOS) what you have on your clipboard
  5. Done!
View All Patterns

alternative options

Here are some block patterns similar to this one

  • Stat Box

    A simple way to show a quick stat and description with an optional icon.

  • Stat Highlight

    A stylized way to show a number and some text. Perhaps as a statistic, or a title for a post in an archive.