Form Elements

Newsletter sign up

Images

.c-image  .c-image--square
.c-image  .c-image--square  .c-image--overlay
data-border-color="tertiary"
.c-image  .c-image--rect
	<div class="c-image--slider">

		<div class="js-image-slider">
			<? $i = 0; while($i < 6): ?>

				<div class="c-image  c-image--square">
					<img src="propeller/themes/propeller/assets/src/img/01.jpg" alt="">
				</div>

			<? $i++; endwhile; ?>
		</div>

	</div>

Full Width Slider

Typography

Primary Font Family:     museo-sans, sans-serif
Secondary Font Family:   US101, sans-serif
Default Font size:       18px
Default Font colour:     #0F0F0F / $c-black / $c-secondary
.t-heading--huge
Hello World
h1, .t-heading--large

Hello World

h2, .t-heading--big

Hello World

h3, .t-heading--regular

Hello World

h4, .t-heading--small

Hello World

.t-heading
Hello World
<p>

Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Sed porttitor lectus nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin eget tortor risus. Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.

<p class="t-small">

Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Sed porttitor lectus nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin eget tortor risus. Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.

<p class="t-colour--primary">

Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Sed porttitor lectus nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin eget tortor risus. Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.

<p class="t-large">

Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur aliquet quam id dui posuere blandit.

.t-bold

Hello World

.t-underlined

Hello World

.t-italic

Hello World

.t-capitalised

Hello World

.t-align--right

Hello World

.t-align--center

Hello World

a
Click Me I'm a link!

Colours

Primary

Secondary

Tertiary

Quarternary

Quinary

Senary

Septenary

Text Area

We are the leading specialist for 'live-fire' cooking wood and charcoals

We’re located within the Bermondsey ‘Food Mile’ in South-East London. We supply Chefs, Cooks and Restaurants across the U.K. Our products are carefully made to ensure a healthy balance between man and beast. The art of coppicing for wood & charcoal making ensures a varied and vibrant woodland environment.

Hello World
<div class="textarea">
	<h2 class="t-heading--large">We are the leading specialist....</h2>
	<div class="seperator  seperator--pushed  seperator--secondary">
		<?= file_get_contents(get_template_directory() . '/assets/img/black_brush_stroke.svg'); ?>
	</div>
	<p>
		We’re located within the Bermondsey ....
	</p>
	<a class="c-cta" href="/">Read Our Story</a>
<div>
			
<div class="textarea  textarea--padded  bg--tertiary  t-colour--primary">
	<h2 class="t-heading--big">CONSULTANCY SERVICES - ....</h2>
	<div class="seperator  seperator--pushed  seperator--primary">
		<?= file_get_contents(get_template_directory() . '/assets/img/black_brush_stroke.svg'); ?>
	</div>
	<p class="t-small">
		From simple grills to wood fired ovens.....
	</p>
	<a class="c-cta c-cta--black" href="/">Read Our Story</a>
</div>
			

CONSULTANCY SERVICES - CHARCOAL & WOOD MERCHANTS SERVICE TO THE RESTAURANT INDUSTRY LONDON AND NATIONWIDE

From simple grills to wood fired ovens, fire pits and Texan BBQ’s. Onto supporting and fuelling festivals & events like: Meatopia, Wilderness and Somersault . We’ve taken all that’s good and native, along with exploring beyond our shores for the best we can find there too. It’s an exciting part of our business and one which we shall continue to develop.

Hello World

CTAs

.c-cta
.c-cta.is-active
.c-cta--light
.c-cta--black

Buttons

.c-btn
.c-btn--arrow

Alternative Grid Layout

<div class="alternative-grid  alternative-grid--bg">
	<? $i = 0; while($i < 9): ?>
		<div class="alternative-grid__item">
			<div class="c-image  c-image--square">
				<img src="...." alt="...">
			</div>
		</div>
	<? $i++; endwhile; ?>
	<div class="alternative-grid__bg" style="background...">
	</div>
</div>
			
<div class="alternative-grid  alternative-grid--four">
	<? $i = 0; while($i < 8): ?>
		<div class="alternative-grid__item">
			<div class="c-image  c-image--square">
				<img src="...." alt="...">
			</div>
		</div>
	<? $i++; endwhile; ?>
	<div class="alternative-grid__bg" style="background...">
	</div>
</div>
			

Panel Boxes

.panel
Hello world this container has a width of 300px.
.panel--wide
Hello world, this is the wider container and has a width of 600px.

Hero Sliders

IN SMOKE WE TRUST

After eighty years of playing with electricity, gas and sous vide machines, live-fire cooking has returned. Amen.

IN SMOKE WE TRUST

After eighty years of playing with electricity, gas and sous vide machines, live-fire cooking has returned. Amen.

		<div class="hero  hero--large  js-hero">
			<div class="hero__slides   js-hero-slides">
				<div class="hero__slide" style="background-image:url('/propeller/themes/propeller/assets/src/img/hero_image_one.png')">
					<div class="hero__overlay  hero__overlay--with-text"></div>
					<div class="hero__text-shadow"></div>
					<div class="hero__text">
						<h1 class="t-heading--huge  t-colour--primary">IN SMOKE WE TRUST</h1>
						<p class="t-large  t-colour--senary  t-bold">After eighty years of playing with electricity, gas and sous vide machines, live-fire cooking has returned. Amen.</p>
					</div>
				</div>
				<div class="hero__slide  hero__slide--video  is-video">
					<iframe class="js-video  js-vimeo" src="https://player.vimeo.com/video/163721649?loop=1&title=0&byline=0&portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
					<div class="hero__overlay  hero__overlay--with-text"></div>
					<div class="hero__text-shadow"></div>
				</div>
				<div class="hero__slide" style="background-image:url('/propeller/themes/propeller/assets/src/img/hero_image_two.png')">
					<div class="hero__overlay  hero__overlay--with-text"></div>
					<div class="hero__text-shadow"></div>
					<div class="hero__text">
						<h1 class="t-heading--huge  t-colour--primary">IN SMOKE WE TRUST</h1>
						<p class="t-large  t-colour--senary  t-bold">After eighty years of playing with electricity, gas and sous vide machines, live-fire cooking has returned. Amen.</p>
					</div>
				</div>
			</div>
			<div class="hero__buttons">
				<div class="hero__button  hero__button--left">
					<a href="javascript:" class="c-btn  c-btn--arrow  js-button-left"></a>
				</div>
				<div class="hero__button  hero__button--right">
					<a href="javascript:" class="c-btn  c-btn--arrow  js-button-right"></a>
				</div>
			</div>
		</div>
	

Hello World!

And hello to you too!

Hello World!

Grid Layout

5 Columns

4 Columns

3 Columns

Staff Member Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec euismod risus, id blandit augue. Morbi quis eros quis lacus laoreet egestas. Phasellus pellentesque, tellus in sagittis sagittis, est odio pharetra massa, quis lobortis quam felis non orci. Curabitur eu feugiat nisl.

Staff Member Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec euismod risus, id blandit augue. Morbi quis eros quis lacus laoreet egestas. Phasellus pellentesque, tellus in sagittis sagittis, est odio pharetra massa, quis lobortis quam felis non orci. Curabitur eu feugiat nisl.

Staff Member Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec euismod risus, id blandit augue. Morbi quis eros quis lacus laoreet egestas. Phasellus pellentesque, tellus in sagittis sagittis, est odio pharetra massa, quis lobortis quam felis non orci. Curabitur eu feugiat nisl.

Staff Member Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec euismod risus, id blandit augue. Morbi quis eros quis lacus laoreet egestas. Phasellus pellentesque, tellus in sagittis sagittis, est odio pharetra massa, quis lobortis quam felis non orci. Curabitur eu feugiat nisl.

Card Layout

Staff Member Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec euismod risus, id blandit augue. Morbi quis eros quis lacus laoreet egestas. Phasellus pellentesque, tellus in sagittis sagittis, est odio pharetra massa, quis lobortis quam felis non orci. Curabitur eu feugiat nisl.

<div class="c-card">
	<div class="c-image  c-image--square">
		<img src="/propeller/themes/propeller/assets/src/img/01.jpg" alt="">
	</div>
	<h4 class="c-card__heading  t-heading--regular">Staff Member Name</h4>
	<div class="seperator  seperator--pushed">
		<?= file_get_contents(get_stylesheet_directory() . '/assets/img/black_brush_stroke.svg'); ?>
	</div>
	<p class="c-card__info">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec euismod risus, id blandit augue.
		Morbi quis eros quis lacus laoreet egestas. Phasellus pellentesque, tellus in sagittis sagittis, est odio pharetra massa, quis lobortis quam felis non orci.
		Curabitur eu feugiat nisl.
	</p>
</div>
			

Backgrounds

<div class="bg  bg--white-texture" style="margin-bottom: 25px;">
	<div style="height:400px;">
	</div>
</div>
			
<div class="bg  bg--green-texture" style="margin-bottom: 25px;">
	<div style="height:400px;">
	</div>
</div>
			
<div class="bg  bg--black-texture" style="margin-bottom: 25px;">
	<div style="height:400px;">
	</div>
</div>
			
<div class="bg  bg--white-texture" style="margin-bottom: 25px;">
	<div class="bg__before  bg__before--white-texture"></div>
	<div style="height:400px;">
	</div>
</div>
			
<div class="bg  bg--black-texture  bg--pushed  bg--pushed-bottom" style="margin-bottom: 25px;">
	<div class="bg__before  bg__before--black-texture"></div>
	<div class="bg__after  bg__after--black-texture"></div>
	<div style="height:400px;">
	</div>
</div>
			
<div class="bg  bg--black-texture" style="margin-bottom: 25px;">
	<div class="bg__before  bg__before--black-alternative-texture"></div>
	<div class="bg__after  bg__after--black-alternative-texture"></div>
	<div style="height:400px;">
	</div>
</div>
			
<div class="bg  bg--green-texture" style="margin-bottom: 25px;">
	<div class="bg__before  bg__before--green-texture"></div>
	<div class="bg__after  bg__after--green-texture"></div>
	<div style="height:400px;">
	</div>
</div>
			

Article Cards

Summer Season: Wilderness...

Read More
By Mark

Summer Season: Wilderness...

Read More
By Mark

Summer Season: Wilderness...

Nulla porttitor accumsan tincidunt. Nulla porttitor accumsan tincidunt. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit.


Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.

Read More
By Mark

Text Slider

Testimonials

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rhoncus enim turpis, ac tincidunt mauris pharetra pulvinar. Sed sit amet ultricies orci. Nunc at finibus massa. Nulla augue metus, dapibus sed tortor vel, commodo scelerisque lectus. Morbi vulputate ac nunc a interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rhoncus enim turpis, ac tincidunt mauris pharetra pulvinar. Sed sit amet ultricies orci. Nunc at finibus massa. Nulla augue metus, dapibus sed tortor vel, commodo scelerisque lectus. Morbi vulputate ac nunc a interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rhoncus enim turpis, ac tincidunt mauris pharetra pulvinar. Sed sit amet ultricies orci. Nunc at finibus massa. Nulla augue metus, dapibus sed tortor vel, commodo scelerisque lectus. Morbi vulputate ac nunc a interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rhoncus enim turpis, ac tincidunt mauris pharetra pulvinar. Sed sit amet ultricies orci. Nunc at finibus massa. Nulla augue metus, dapibus sed tortor vel, commodo scelerisque lectus. Morbi vulputate ac nunc a interdum.