Stats

Display countless countable things

Note: Stats sections have been introduced starting with the Marquez Email Template.

Stats sections in our products come in several shapes:

  • Basic
  • Boxed
  • With Background Image

All Stats sections are 3 column layouts, styled in various ways.
They can be used to show numbers in a bold way. For example, projects, clients, or number of users or follwers.


Basic Stats

Basic Stats are made up of three columns separated with a subtle border. You can customise the text and background styles.
On mobile, the columns stack vertically, and the no-border-on-mobile class removes the separators.

Example

Basic Stats

Basic With Text Centered

Having centered text in a Stats section requires more work than just centering text (paddings, widths), so we provide a stand-alone variation for that. It might not look very different, but if you want centered stats, this variation will save you some headaches.

Example

Basic Stats Centered

With Background Image

This Stats section uses the same layout for the columns and separators, but it uses a background image instead of a solid colour. Of course, the background image works in all versions of Outlook, as well as in Windows 10 Mail.

Example

Stats With Background Image

Boxed Stats

Two column Stats section, with a background colour on each column.

Example

Stats Boxed

Boxed Stats With Background Image

Similar to the Boxed Stats, but with a background image and a semi-transparent background colour for the actual boxes. Although the background image is supported in Outlook and Windows 10 Mail, the semi-transparent box background colour is coded with rgba CSS, and will fallback to a solid colour where it is not supported.

Example

Stats Boxed With Background Image

Customisation

You can easily change the looks of a Stats section:

  • Background colour — change the HEX colour inside bgcolor="" on the parent row table. For the semi-transparent overlayed boxes, change the rgba values in the inline CSS.
  • Background image — change the image src in the background="" attribute, and in the src="" of the <v:image> tag (for Outlook). In Outlook, the height of the section will be forced by the height:000px CSS on the <v:image> and <v:rect> tags.
  • Text — font size, colour, weight, spacing, all can be changed through the inline CSS
  • Top/bottom spacing — change the value in the height="" attribute, as well as the font-size and line-height CSS values, on the <td class="spacer" ...> near the top and bottom of the section

Next Up: Social →