Facts and stats block

The facts and stats block showcases short snippets of text and data for easy scanning.

Single item square Two items horizontal Three items horizontal

Single item square

This block floats to the left or right of other page elements, allowing text to wrap around it.

Code

The code is the same for both News and Page content type and Story and Layout content type.

Replace fa-chart-line with Font Awesome icons of your choice. To float right, change float-left with float-right and mr-lg-4 with ml-lg-4.

<style type="text/css">	
@media only screen and ( max-width: 767px ) {
/******reducing the size of the icon for smaller screens********/
	.stats-icon {
		font-size: 3em;
	}
}
</style>

<div class="float-left text-center text-info col-lg-5 mr-lg-4 mb-3 p-3 bg-primary" id="facts-stats">
	<h2 class="mt-0 text-info" style="font-size: 70px;">fast fact</h2>
	<p>More information</p>
	<p class="my-0"><i class="stats-icon fal fa-chart-line fa-6x mb-3">&nbsp;</i></p>
</div>

Single item horizontal

This block spans the width of the page and goes between paragraphs or sections.

70%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at laoreet ante, ac scelerisque nibh.

News and Page content type version

Code

Replace fa-wheat with Font Awesome icons of your choice.

<style type="text/css">	
@media only screen and ( max-width: 767px ) {
/******reducing the size of the icon for smaller screens********/
	.stats-icon {
		font-size: 3em;
	}
}
</style>

<div class="px-5 py-3 mb-4 bg-secondary text-info">
	<div class="row">
		<div class="col-md-6 px-lg-4 py-auto">
			<h2 class="mt-0 text-info" style="font-size: 100px;">Fast Fact</h2>
			<p>More information</p>
		</div>

		<div class="col-md-6 my-auto py-3">
			<p class="my-0 text-center" style="font-size: 20px;"><i class="text-info stats-icon fal fa-wheat fa-10x">&nbsp;</i></p>
		</div>
	</div>
</div>

Story and Layout content type

Code

Place the code in a Copy Block. Replace fa-wheat with Font Awesome icons of your choice.

<style type="text/css">	
@media only screen and ( max-width: 767px ) {
/******reducing the size of the icon for smaller screens********/
	.stats-icon {
		font-size: 3em;
	}
}
</style>

<div class="px-5 mb-5 bg-secondary text-info">
	<div class="row">
		<div class="col-md-6 my-auto p-3">
			<h2 class="mt-0 text-info" style="font-size: 100px;">Fast Fact</h2>
			<p>More information</p>
		</div>

		<div class="col-md-6 my-auto py-4">
			<p class="my-0 text-center" style="font-size: 25px;"><i class="text-info stats-icon fal fa-wheat fa-10x">&nbsp;</i></p>
		</div>
	</div>
</div>

Two items horizontal

This block spans the width of the page and goes between paragraphs or sections.

70%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at laoreet ante, ac scelerisque nibh.

70%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at laoreet ante, ac scelerisque nibh.

News and Page content type version

Code

Replace fa-chart-line, fa-wheat with Font Awesome icons of your choice.

<style type="text/css">	
@media only screen and ( max-width: 767px ) {
/******reducing the size of the icon for smaller screens********/
	.stats-icon {
		font-size: 3em;
	}
}
</style>

<div class="row">
	<div class="col-md-6">
		<div class="col-md-12 text-center mb-3 p-3 bg-info">
			<p class="my-0 text-primary"><i class="stats-icon fal fa-chart-line fa-6x mb-3">&nbsp;</i></p>
			<h2 class="mt-0 text-primary" style="font-size: 70px;">Fast Fact 1</h2>
			<p class="text-secondary">More info</p>
		</div>
	</div>

	<div class="col-md-6">
		<div class="col-md-12 text-center mb-3 p-3 bg-primary text-info">
			<h2 class="mt-0 text-info" style="font-size: 70px;">Fast Fact 2</h2>
			<p>More info</p>
			<p class="my-0"><i class="stats-icon fal fa-wheat fa-6x mb-3">&nbsp;</i></p>
		</div>
	</div>
</div>

Story and Layout content type

Code

Place the code in a Copy Block. Replace fa-chart-line, fa-wheat with Font Awesome icons of your choice.

<style type="text/css">	
@media only screen and ( max-width: 767px ) {
/******reducing the size of the icon for smaller screens********/
	.stats-icon {
		font-size: 3em;
	}
}
</style>

<div class="row">
	<div class="col-sm-6">
		<div class="col-sm-12 text-center mb-3 p-3 bg-info">
			<p class="my-0 text-primary"><i class="stats-icon fal fa-chart-line fa-6x mb-3">&nbsp;</i></p>
			<h2 class="mt-0" style="color: #4b2e83; font-size: 70px;">Fast Fact 1</h2>
			<p style="color: #85754d;">More information</p>
		</div>
	</div>

	<div class="col-sm-6">
		<div class="col-sm-12 text-center mb-3 p-3 bg-primary text-info">
			<h2 class="mt-0 text-info" style="font-size: 70px;">Fast Fact 2</h2>
			<p>More info</p>
			<p class="my-0"><i class="stats-icon fal fa-wheat fa-6x mb-3">&nbsp;</i></p>
		</div>
	</div>
</div>

Three items horizontal

This block spans the width of the page and goes between paragraphs or sections.

News and Page content type version

Live example

85%

of farmers in India reported the system was beneficial

25%

increase in wheat yield

40%

savings in irrigation water in Pakistan and a 15% increase in crop yield

Code

Replace fa-chart-line, fa-wheat and fa-tint with Font Awesome icons of your choice.

<style type="text/css">
	@media only screen and ( min-width: 640px ) {
	/******hiding fast facts border for mobile********/
	.facts {
	border-right: 1px solid white;
	}
	}
</style>

<div class="row p-4 my-4 bg-info">
	<div class="facts col-sm-4 text-center px-5">
		<h2 class="my-1"><i class="fas fa-chart-line mb-3">&nbsp;</i><br>
		fast fact</h2>
		<h3 class="mt-0 h4">More information</h3>
	</div>

	<div class="facts col-sm-4 text-center px-3">
		<h2 class="my-1"><i class="fas fa-wheat mb-3">&nbsp;</i><br>
		fast fact</h2>
		<h3 class="mt-0 h4">More information</h3>
	</div>

	<div class="col-sm-4 text-center px-3">
		<h2 class="my-1"><i class="fas fa-tint mb-3">&nbsp;</i><br>
		fast fact</h2>
		<h3 class="mt-0 h4">More information</h3>
	</div>
</div>

Story and Layout content type version

Live example

Code

Place the code in a Custom Block. Replace fa-chart-line, fa-wheat and fa-tint with Font Awesome icons of your choice.

<style type="text/css">
	@media only screen and ( min-width: 640px ) {
	/******hiding fast facts border for mobile********/
	.facts {
	border-right: 1px solid white;
	}
	}
</style>

<div class="row p-5 mt-5 bg-info">
	<div class="facts col-sm-4 text-center px-5">
		<h2 class="my-1"><i class="fas fa-chart-line mb-3">&nbsp;</i><br>
		fast fact</h2>
		<h3 class="mt-0 h4">More information</h3>
	</div>

	<div class="facts col-sm-4 text-center px-3">
		<h2 class="my-1"><i class="fas fa-wheat mb-3">&nbsp;</i><br>
		fast fact</h2>
		<h3 class="mt-0 h4">More information</h3>
	</div>

	<div class="col-sm-4 text-center px-3">
		<h2 class="my-1"><i class="fas fa-tint mb-3">&nbsp;</i><br>
		fast fact</h2>
		<h3 class="mt-0 h4">More information</h3>
	</div>
</div>