Form Elements

Newsletter sign up

.c-form__field

.c-form__field--half

.c-form__textarea

Sign me up for all the latest news and events via email. I am happy for my data to be used to tailor my customer experience.

Restaurants

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

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

Hello World

.c-cta.is-active

Hello World

.c-cta--light

Hello World

.c-cta--black

Hello World

Buttons

.c-btn

01 02 03 04

.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