BU Blocks Style Guide

Global Stat BlockLink

In-Progress New Issue

The Stats Block allows you to add a group of 1 to 4 stats. EAch stat by default is presented as a number and a circle. A basic example would have a "75%" with an encompassing circle that would be filled three forth of its circumference.

Stats Block (parent)

The Stats Block is composed of a parent block .wp-block-stats and 1 to 4 child blocks .wp-block-stat.

Options

Number of Stats: 1 to 4 stats only 1 if set to .alignleft or .alignright; (1 by default).
Aligment options
- None
- Align Left
- Align Right
- Align Wide

Stat Block (child)

That Stat Block is composed of 3 potential lines of text ( text-pre, number, text-post), as well as 2 circle graphs that fill clockwise.

Fields

pre/post text: These two are optional fields that sit above and below the number. They should be limited a word or two.
Number: This field sits at the center of the Stat, if left unfilled it would show the percentage value of the second circle with a percentage mark (i.e. "75%"). Technically anything can go in this feld, its not locked to numeric values or percentages. That way the author can have more atypical stats (i.e. "no.1", 1/2", "254!", "1 in 3". in any case the value should only be a handful of characters long, since the space in the circle is limited.

Options

Number Size: the class.has-number-size-1-4 controls the text size for the number field. 1 being the largest, 4 being the smallest; 2 would be the default.
Circle 1 Fill: A percentage value that adjust the fill amount of the first circle. By default this is set to 100.
***Circle 2 Fill:***A percentage value that adjust the fill amount of the first circle. By default this is set to 0.
Circle 1 and 2 Color: Both Circles can be assigned a color independently, (i.e. .has-circle1-color-primary and .has-circle2-color-tertiary.)

Example Source: blocks/stat/style.scss, line 16 View Source

Markup blocks/stat/bu-blocks-block-stat.hbs

<div class="wp-block-stats butoday-block-stats has-1-stats alignleft">
			<figure class="wp-block-stats-figure">
				<div class="wp-block-stats-row">
					<div class="wp-block-stat has-number-size-4 has-circle2-color-primary">
						<div class="wp-block-stat-container-outer">
							<div class="wp-block-stat-container-inner">
								<div class="wp-block-stat-text-pre">pretext</div>
								<div class="wp-block-stat-number">1,000</div>
								<div class="wp-block-stat-text-post">post-text</div>
								<svg class="wp-block-stat-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
									<circle class="wp-block-stat-circle1" style="stroke-dashoffset: calc( 302 * ( 1 - ( 100 * 0.01 ) ) )"/>
									<circle class="wp-block-stat-circle2" style="stroke-dashoffset: calc( 302 * ( 1 - ( 75 * 0.01 ) ) )"/>
								</svg>
							</div>
						</div>
					</div>
				</div>
				<figcaption class="wp-block-stats-caption">Lorem Ipsum Dolor Sit Amet Consectetur Adipisicing</figcaption>
			</figure>
		</div>
		
		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligula eu sapien consequat eleifend. Donec nec dolor erat, condimentum sagittis sem. Praesent porttitor porttitor risus, dapibus rutrum ipsum gravida et. Integer lectus nisi, facilisis sit amet eleifend nec, pharetra ut augue. Integer quam nunc, consequat nec egestas ac, volutpat ac nisi. Sed consectetur dignissim dignissim. Donec pretium est sit amet ipsum fringilla feugiat. Aliquam erat volutpat. Maecenas scelerisque, orci sit amet cursus tincidunt, libero nisl eleifend tortor, vitae cursus risus mauris vitae nisi. Cras</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligula eu sapien consequat eleifend. Donec nec dolor erat, condimentum sagittis sem. Praesent porttitor porttitor risus, dapibus rutrum ipsum gravida et. Integer lectus nisi, facilisis sit amet eleifend nec, pharetra ut augue. Integer quam nunc, consequat nec egestas ac, volutpat ac nisi. Sed consectetur dignissim dignissim. Donec pretium est sit amet ipsum fringilla feugiat. Aliquam erat volutpat. Maecenas scelerisque, orci sit amet cursus tincidunt, libero nisl eleifend tortor, vitae cursus risus mauris vitae nisi. Cras</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligula eu sapien consequat eleifend. Donec nec dolor erat, condimentum sagittis sem. Praesent porttitor porttitor risus, dapibus rutrum ipsum gravida et. Integer lectus nisi, facilisis sit amet eleifend nec, pharetra ut augue. Integer quam nunc, consequat nec egestas ac, volutpat ac nisi. Sed consectetur dignissim dignissim. Donec pretium est sit amet ipsum fringilla feugiat. Aliquam erat volutpat. Maecenas scelerisque, orci sit amet cursus tincidunt, libero nisl eleifend tortor, vitae cursus risus mauris vitae nisi. Cras</p>
		
		
		<div class="wp-block-stats butoday-block-stats has-1-stats">
			<figure class="wp-block-stats-figure">
				<div class="wp-block-stats-row">
					<div class="wp-block-stat has-number-size-4 has-circle2-color-primary">
						<div class="wp-block-stat-container-outer">
							<div class="wp-block-stat-container-inner">
								<div class="wp-block-stat-text-pre">pretext</div>
								<div class="wp-block-stat-number">1,000</div>
								<div class="wp-block-stat-text-post">post-text</div>
								<svg class="wp-block-stat-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
									<circle class="wp-block-stat-circle1" style="stroke-dashoffset: calc( 302 * ( 1 - ( 100 * 0.01 ) ) )"/>
									<circle class="wp-block-stat-circle2" style="stroke-dashoffset: calc( 302 * ( 1 - ( 75 * 0.01 ) ) )"/>
								</svg>
							</div>
						</div>
					</div>
				</div>
				<figcaption class="wp-block-stats-caption">Lorem Ipsum Dolor Sit Amet Consectetur Adipisicing</figcaption>
			</figure>
		</div>
		
		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligula eu sapien consequat eleifend. Donec nec dolor erat, condimentum sagittis sem. Praesent porttitor porttitor risus, dapibus rutrum ipsum gravida et. Integer lectus nisi, facilisis sit amet eleifend nec, pharetra ut augue. Integer quam nunc, consequat nec egestas ac, volutpat ac nisi. Sed consectetur dignissim dignissim. Donec pretium est sit amet ipsum fringilla feugiat. Aliquam erat volutpat. Maecenas scelerisque, orci sit amet cursus tincidunt, libero nisl eleifend tortor, vitae cursus risus mauris vitae nisi. Cras</p>
		
		
		<div class="wp-block-stats butoday-block-stats has-2-stats">
			<figure class="wp-block-stats-figure">
				<div class="wp-block-stats-row">
					<div class="wp-block-stat has-number-size-1 has-circle1-color-primary">
						<div class="wp-block-stat-container-outer">
							<div class="wp-block-stat-container-inner">
								<div class="wp-block-stat-number">#1</div>
								<div class="wp-block-stat-text-post">a</div>
								<svg class="wp-block-stat-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
									<circle class="wp-block-stat-circle1" style="stroke-dashoffset: calc( 302 * ( 1 - ( 100 * 0.01 ) ) )"/>
									<circle class="wp-block-stat-circle2" style="stroke-dashoffset: calc( 302 * ( 1 - ( 0 * 0.01 ) ) )"/>
								</svg>
							</div>
						</div>
					</div>
		
					<div class="wp-block-stat has-number-size-4 has-circle2-color-secondary">
						<div class="wp-block-stat-container-outer">
							<div class="wp-block-stat-container-inner">
								<div class="wp-block-stat-number">1,000</div>
								<div class="wp-block-stat-text-post">b</div>
								<svg class="wp-block-stat-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
									<circle class="wp-block-stat-circle1" style="stroke-dashoffset: calc( 302 * ( 1 - ( 100 * 0.01 ) ) )"/>
									<circle class="wp-block-stat-circle2" style="stroke-dashoffset: calc( 302 * ( 1 - ( 75 * 0.01 ) ) )"/>
								</svg>
							</div>
						</div>
					</div>
				</div>
				<figcaption class="wp-block-stats-caption">Lorem Ipsum Dolor Sit Amet Consectetur Adipisicing</figcaption>
			</figure>
		</div>
		
		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligula eu sapien consequat eleifend. Donec nec dolor erat, condimentum sagittis sem. Praesent porttitor porttitor risus, dapibus rutrum ipsum gravida et. Integer lectus nisi, facilisis sit amet eleifend nec, pharetra ut augue. Integer quam nunc, consequat nec egestas ac, volutpat ac nisi. Sed consectetur dignissim dignissim. Donec pretium est sit amet ipsum fringilla feugiat. Aliquam erat volutpat. Maecenas scelerisque, orci sit amet cursus tincidunt, libero nisl eleifend tortor, vitae cursus risus mauris vitae nisi. Cras</p>
		
		
		<div class="wp-block-stats butoday-block-stats has-3-stats">
			<figure class="wp-block-stats-figure">
				<div class="wp-block-stats-row">
					<div class="wp-block-stat has-number-size-1 has-circle1-color-primary">
						<div class="wp-block-stat-container-outer">
							<div class="wp-block-stat-container-inner">
								<div class="wp-block-stat-number">#1</div>
								<div class="wp-block-stat-text-post">a</div>
								<svg class="wp-block-stat-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
									<circle class="wp-block-stat-circle1" style="stroke-dashoffset: calc( 302 * ( 1 - ( 100 * 0.01 ) ) )"/>
									<circle class="wp-block-stat-circle2" style="stroke-dashoffset: calc( 302 * ( 1 - ( 0 * 0.01 ) ) )"/>
								</svg>
							</div>
						</div>
					</div>
		
					<div class="wp-block-stat has-number-size-4 has-circle2-color-secondary">
						<div class="wp-block-stat-container-outer">
							<div class="wp-block-stat-container-inner">
								<div class="wp-block-stat-number">1,000</div>
								<div class="wp-block-stat-text-post">b</div>
								<svg class="wp-block-stat-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
									<circle class="wp-block-stat-circle1" style="stroke-dashoffset: calc( 302 * ( 1 - ( 100 * 0.01 ) ) )"/>
									<circle class="wp-block-stat-circle2" style="stroke-dashoffset: calc( 302 * ( 1 - ( 75 * 0.01 ) ) )"/>
								</svg>
							</div>
						</div>
					</div>
		
					<div class="wp-block-stat has-number-size-3 has-circle2-color-tertiary">
						<div class="wp-block-stat-container-outer">
							<div class="wp-block-stat-container-inner">
								<div class="wp-block-stat-number">262</div>
								<div class="wp-block-stat-text-post">c</div>
								<svg class="wp-block-stat-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
									<circle class="wp-block-stat-circle1" style="stroke-dashoffset: calc( 302 * ( 1 - ( 100 * 0.01 ) ) )"/>
									<circle class="wp-block-stat-circle2" style="stroke-dashoffset: calc( 302 * ( 1 - ( 33 * 0.01 ) ) )"/>
								</svg>
							</div>
						</div>
					</div>
				</div>
				<figcaption class="wp-block-stats-caption">Lorem Ipsum Dolor Sit Amet Consectetur Adipisicing</figcaption>
			</figure>
		</div>
		
		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligula eu sapien consequat eleifend. Donec nec dolor erat, condimentum sagittis sem. Praesent porttitor porttitor risus, dapibus rutrum ipsum gravida et. Integer lectus nisi, facilisis sit amet eleifend nec, pharetra ut augue. Integer quam nunc, consequat nec egestas ac, volutpat ac nisi. Sed consectetur dignissim dignissim. Donec pretium est sit amet ipsum fringilla feugiat. Aliquam erat volutpat. Maecenas scelerisque, orci sit amet cursus tincidunt, libero nisl eleifend tortor, vitae cursus risus mauris vitae nisi. Cras</p>
		
		
		<div class="wp-block-stats butoday-block-stats has-4-stats">
			<figure class="wp-block-stats-figure">
				<div class="wp-block-stats-row">
					<div class="wp-block-stat has-number-size-1 has-circle1-color-primary">
						<div class="wp-block-stat-container-outer">
							<div class="wp-block-stat-container-inner">
								<div class="wp-block-stat-number">#1</div>
								<div class="wp-block-stat-text-post">a</div>
								<svg class="wp-block-stat-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
									<circle class="wp-block-stat-circle1" style="stroke-dashoffset: calc( 302 * ( 1 - ( 100 * 0.01 ) ) )"/>
									<circle class="wp-block-stat-circle2" style="stroke-dashoffset: calc( 302 * ( 1 - ( 0 * 0.01 ) ) )"/>
								</svg>
							</div>
						</div>
					</div>
		
					<div class="wp-block-stat has-number-size-4 has-circle2-color-secondary">
						<div class="wp-block-stat-container-outer">
							<div class="wp-block-stat-container-inner">
								<div class="wp-block-stat-number">1,000</div>
								<div class="wp-block-stat-text-post">b</div>
								<svg class="wp-block-stat-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
									<circle class="wp-block-stat-circle1" style="stroke-dashoffset: calc( 302 * ( 1 - ( 100 * 0.01 ) ) )"/>
									<circle class="wp-block-stat-circle2" style="stroke-dashoffset: calc( 302 * ( 1 - ( 75 * 0.01 ) ) )"/>
								</svg>
							</div>
						</div>
					</div>
		
					<div class="wp-block-stat has-number-size-3 has-circle2-color-tertiary">
						<div class="wp-block-stat-container-outer">
							<div class="wp-block-stat-container-inner">
								<div class="wp-block-stat-number">262</div>
								<div class="wp-block-stat-text-post">c</div>
								<svg class="wp-block-stat-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
									<circle class="wp-block-stat-circle1" style="stroke-dashoffset: calc( 302 * ( 1 - ( 100 * 0.01 ) ) )"/>
									<circle class="wp-block-stat-circle2" style="stroke-dashoffset: calc( 302 * ( 1 - ( 33 * 0.01 ) ) )"/>
								</svg>
							</div>
						</div>
					</div>
		
					<div class="wp-block-stat has-number-size-2 has-circle1-color-secondary has-circle2-color-quaternary">
						<div class="wp-block-stat-container-outer">
							<div class="wp-block-stat-container-inner">
								<div class="wp-block-stat-number">33%</div>
								<div class="wp-block-stat-text-post">d</div>
								<svg class="wp-block-stat-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
									<circle class="wp-block-stat-circle1" style="stroke-dashoffset: calc( 302 * ( 1 - ( 66 * 0.01 ) ) )"/>
									<circle class="wp-block-stat-circle2" style="stroke-dashoffset: calc( 302 * ( 1 - ( 33 * 0.01 ) ) )"/>
								</svg>
							</div>
						</div>
					</div>
				</div>
				<figcaption class="wp-block-stats-caption">Lorem Ipsum Dolor Sit Amet Consectetur Adipisicing</figcaption>
			</figure>
		</div>