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
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
<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
aClick 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 WorldCTAs
Buttons
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
.panel--wide
Hero Sliders
<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>
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.
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...
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.