Stat Sections

Stats

Show off some stats in a unique way. Each of our templates come with three purpose-built stat sections that are defined by the class .stat-X, where X represents the stat section type (1-3) as shown below. Alternate the number of stats per row by changing the .content-grid-X class, where X represents the number of columns (2-6). Note: Stat sections employ both the Horizon and the Counter plug-in, see each section for more information on parameters.

Example

...

CSS For Retina Displays

For stat sections that have a background image we serve a higher resolution background image by using the media queries below. Note: The CSS targeting below is just an example, refer to each individual feature section for exact CSS targeting.

								
									.stat-X{
										background-image:url(../images/slider/stat-bkg-image.jpg);
									}

									@media
									only screen and (-webkit-min-device-pixel-ratio: 2),
									only screen and (		min--moz-device-pixel-ratio: 2),
									only screen and (			-o-min-device-pixel-ratio: 2/1),
									only screen and (				min-device-pixel-ratio: 2),
									only screen and (					min-resolution: 192dpi),
									only screen and (						min-resolution: 2dppx) { 
											.stat-X{
												background-image:url(../images/slider/[email protected]);
											}
									}

Stat Section One

A simple stat section with background image. Target .stat-1 to set background color or image. Alternatively, for background use Timber background color classes.

Example

Stat Section Two

An elegant stat section. Target the .stat-2 class to set background color or image. Alternatively, for background use Timber background color classes.

Example

Stat Section Three

A creative stat section. Target the .stat-3 class to set background color or image. Alternatively, for background use Timber background color classes.

Create extra large stats by adding the .mega-stat class to the grid item wrapper.

Example