---
title: Component Library
subsection: Living Styleguide
description: This styleguide shows a true representation of the CSS on the current international site.
docs: true
---


	<!-- Logo -->
	<div class="sg-page">
		<div class="l-container">
			<h2 class="sg-sectionHeading">Logos</h2>
			<div class="sg-logos">
				<h3>Large – Red</h3>
				<img alt="JUST EAT" src="{{ baseUrl }}/assets/dist/img/logos/je-logo-large.png" title="JUST EAT">
				<h3>Small – Red</h3>
				<img alt="JUST EAT" src="{{ baseUrl }}/assets/dist/img/logos/just-eat-logo.png" title="JUST EAT">
				<h3>Large – White</h3>
				<img alt="JUST EAT" src="{{ baseUrl }}/assets/dist/img/logos/je-whiteout-retina.png" title="JUST EAT">
			</div>
		</div>
	</div>


	<!-- Swatches -->
	<div class="sg-page">
		<div class="l-container">
			<h2 class="sg-sectionHeading">Swatches</h2>

			<ul class="g g--gutter">
				<li class="g-col g-span6 g-span4--mid">
					<div class="sg-swatch sg-color-primary">
						<div class="sg-swatch-color"></div>
						<code>$color-primary</code>
					</div>
				</li>
				<li class="g-col g-span6 g-span4--mid">
					<div class="sg-swatch sg-color-secondary">
						<div class="sg-swatch-color"></div>
						<code>$color-secondary</code>
					</div>
				</li>
				<li class="g-col g-span6 g-span4--mid">
					<div class="sg-swatch sg-color-highlight">
						<div class="sg-swatch-color"></div>
						<code>$color-highlight</code>
					</div>
				</li>
				<li class="g-col g-span6 g-span4--mid">
					<div class="sg-swatch sg-color-text">
						<div class="sg-swatch-color"></div>
						<code>$color-text</code>
					</div>
				</li>
				<li class="g-col g-span6 g-span4--mid">
					<div class="sg-swatch sg-color-background">
						<div class="sg-swatch-color"></div>
						<code>$color-bg</code>
					</div>
				</li>
				<li class="g-col g-span6 g-span4--mid">
					<div class="sg-swatch sg-color-border">
						<div class="sg-swatch-color"></div>
						<code>$color-border</code>
					</div>
				</li>
				<li class="g-col g-span6 g-span4--mid">
					<div class="sg-swatch sg-color-link">
						<div class="sg-swatch-color"></div>
						<code>$color-link-default</code>
					</div>
				</li>
				<li class="g-col g-span6 g-span4--mid">
					<div class="sg-swatch sg-color-link-hover">
						<div class="sg-swatch-color"></div>
						<code>$color-link-hover</code>
					</div>
				</li>
			</ul>

		</div>
	</div>


	<!-- Typography -->
	<div class="sg-page">
		<div class="l-container">
			<h2 class="sg-sectionHeading">Typography</h2>

			<!-- Headings -->
			<h3 class="sg-interfaceType sg-interfaceType--subtle">Primary typeface</h3>
			<div class="g g--gutter">
				<div class="g-span4--mid g-col sg-typeSpecimen sg-typeSpecimen--primary sg-typeSpecimen--giant">
					ABC
				</div>

				<div class="g-span8--mid g-col">
					<div class="sg-typeSpecimen sg-typeSpecimen--primary">ABCDEFGHIJKLMNOPQRSTUVWXYZ <br>
						abcdefghijklmnopqrstuvwxyz <br>
						0123456789 (.,:;?!£$@*&)
					</div>
				</div>
			</div>

			<!-- Body -->
			<h3 class="sg-interfaceType sg-interfaceType--subtle">Secondary typeface</h3>
			<div class="g g--gutter">
				<div class="g-span4--mid g-col sg-typeSpecimen sg-typeSpecimen--secondary sg-typeSpecimen--giant">
					ABC
				</div>

				<div class="g-span8--mid g-col">
					<div class="sg-typeSpecimen sg-typeSpecimen--secondary">ABCDEFGHIJKLMNOPQRSTUVWXYZ <br>
						abcdefghijklmnopqrstuvwxyz <br>
						0123456789 (.,:;?!£$@*&)
					</div>
				</div>
			</div>

			<!-- Add any more that you need -->

		</div>
	</div>


	<!-- Typography examples -->
	<div class="sg-page">
		<div class="l-container">
			<h2 class="sg-sectionHeading">Typography examples</h2>
			<div class="g g--gutter">
				<div class="g-span6 g-col">
					<h3 class="sg-interfaceType sg-interfaceType--subtle">Headings</h3>
					<h1>Heading 1</h1>
					<h2>Heading 2</h2>
					<h3>Heading 3</h3>
					<h4>Heading 4</h4>
					<h5>Heading 5</h5>
					<h6>Heading 6</h6>
				</div>
				<div class="g-span6 g-col">
					<h3 class="sg-interfaceType sg-interfaceType--subtle">Paragraphs</h3>
					<p>Donec sed odio dui. Curabitur <a href="">blandit tempus</a> porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur <b>purus sit amet fermentum</b>.</p>
					<p>Donec sed odio dui. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum.</p>
				</div>
			</div>

			<h3 class="sg-interfaceType sg-interfaceType--subtle">Typeface sizes</h3>
			<div class="g g--gutter">
				<div class="g-span6 g-col">
					<div class="sg-type sg-type-smaller"><div class="sg-type-item">Example text</div> <code>$type-smaller</code></div>
					<div class="sg-type sg-type-small"><div class="sg-type-item">Example text</div> <code>$type-small</code></div>
					<div class="sg-type sg-type-base"><div class="sg-type-item">Example text</div> <code>$type-base</code></div>
				</div>
				<div class="g-span6 g-col">
					<div class="sg-type sg-type-large"><div class="sg-type-item">Example text</div> <code>$type-large</code></div>
					<div class="sg-type sg-type-larger"><div class="sg-type-item">Example text</div> <code>$type-larger</code></div>
					<div class="sg-type sg-type-largest"><div class="sg-type-item">Example text</div> <code>$type-largest</code></div>
					<div class="sg-type sg-type-jumbo"><div class="sg-type-item">Example text</div> <code>$type-jumbo</code></div>
				</div>
			</div>

			<h3 class="sg-interfaceType sg-interfaceType--subtle">Blockquote</h3>
			<blockquote>
				<p>Of all the gin joints in all the towns in all the world, she walks into mine.</p>
				<small>Rick Blaine</small>
			</blockquote>

		</div>
	</div>


	<!-- Components -->
	<div class="sg-page">
		<div class="l-container">
			<h2 class="sg-sectionHeading">Components</h2>

			<h3 class="sg-interfaceType sg-interfaceType--subtle">Buttons</h3>
			<a href="#" class="btn">Normal button</a>
			<br>
			<br>
			<a href="#" class="btn btn--primary">Primary button</a>


		</div>
	</div>


	<!-- Forms -->
	<div class="sg-page">
		<div class="l-container">
			<h2 class="sg-sectionHeading">Form elements</h2>

			<form action="#" class="form form--horizontal">
				<fieldset class="form-fieldset">
					<div class="form-controlGroup">
						<label for="text" class="form-label">Text</label>
						<div class="form-controlGroup-inputWrapper">
							<input type="text" id="text" placeholder="Joe Bloggs" class="form-input" required/>
						</div>
					</div>
					<div class="form-controlGroup">
						<label for="comments" class="form-label">Textarea</label>
						<div class="form-controlGroup-inputWrapper">
							<textarea id="comments" rows="3" cols="50" class="form-input form-input--textarea"></textarea>
						</div>
					</div>
					<div class="form-controlGroup">
						<label for="choice" class="form-label">Choice</label>
						<div class="form-controlGroup-inputWrapper">
							<select id="choice" class="form-input form-input--select">
								<option>Option 1</option>
								<option>Option 2</option>
								<option>Option 3</option>
								<option>Option 4</option>
								<option>Option 5</option>
							</select>
						</div>
					</div>

					<div class="g g--gutter">
						<div class="form-controlGroup g-span6 g-col">
							<label class="form-label">Checkboxes</label>
							<div class="form-controlGroup-inputWrapper">
								<div class="control">
									<input id="check1" type="checkbox" value="check1">
									<label for="check1">
										This is a checkbox
									</label>
								</div>
								<label class="control control--custom control--checkbox">
									<input type="checkbox" value="check4">
									<span class="control-indicator"></span>
									This is a custom checkbox
								</label>
							</div>
						</div>

						<div class="form-controlGroup g-span6 g-col">
							<label class="form-label">Radio buttons</label>
							<div class="form-controlGroup-inputWrapper">
								<label class="control">
									<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
									This is a radio
								</label>
								<label class="control control--custom control--radio">
									<input type="radio" name="optionsRadios" id="optionsRadios4" value="option4">
									<span class="control-indicator"></span>
									This is a custom radio button
								</label>
							</div>
						</div>
					</div>
				</fieldset>

				<h3 class="sg-interfaceType sg-interfaceType--subtle">Validation information</h3>
				<fieldset class="form-fieldset">
					<div class="form-controlGroup has-success">
						<label for="textSuccess" class="form-label">Input with success</label>
						<div class="form-controlGroup-inputWrapper">
							<input type="text" id="textSuccess" class="form-input" value="A value"/>
							<div class="form-message">
								Yay!
							</div>
						</div>
					</div>
					<div class="form-controlGroup has-error">
						<label for="textError" class="form-label">Input with error</label>
						<div class="form-controlGroup-inputWrapper">
							<input type="text" id="textError" class="form-input" value="A value"/>
							<div class="form-message">
								Please correct the error
							</div>
						</div>
					</div>
					<div class="form-controlGroup has-warning">
						<label for="textWarning" class="form-label">Input with warning</label>
						<div class="form-controlGroup-inputWrapper">
							<input type="text" id="textWarning" class="form-input" value="A value"/>
							<div class="form-message">
								Something may have gone wrong
							</div>
						</div>
					</div>
					<div class="form-controlGroup has-info">
						<label for="textInfo" class="form-label">Input with info</label>
						<div class="form-controlGroup-inputWrapper">
							<input type="text" id="textInfo" class="form-input" value="A value"/>
							<div class="form-message">
								Username is taken
							</div>
						</div>
					</div>
				</fieldset>

				<div class="form-actions">
					<div class="form-message has-warning is-hidden">
						Some fields need attention
					</div>

					<input type="submit" value="Submit" class="btn btn--primary" />
					<input type="reset" class="btn" value="Cancel" />
				</div>

			</form>
		</div>
	</div>


	<!-- Icons -->
	<div class="sg-page">
		<div class="l-container">
			<h2 class="sg-sectionHeading">Icons</h2>

			<h3 class="sg-interfaceType sg-interfaceType--subtle">Interface icons</h3>
			<ul class="g g--gutter">
				<li class="g-col g-span6 g-span4--mid">
					<div class="icon-sg icon-social-instagram"></div>
					<code>.icon-social-instagram</code>
				</li>
				<li class="g-col g-span6 g-span4--mid">
					<div class="icon-sg icon-social-twitter"></div>
					<code>.icon-social-twitter</code>
				</li>
				<li class="g-col g-span6 g-span4--mid">
					<div class="icon-sg icon-social-pinterest"></div>
					<code>.icon-social-pinterest</code>
				</li>
				<li class="g-col g-span6 g-span4--mid">
					<div class="icon-sg icon-social-facebook"></div>
					<code>.icon-social-facebook</code>
				</li>
				<li class="g-col g-span6 g-span4--mid">
					<div class="icon-sg icon-social-youtube"></div>
					<code>.icon-social-youtube</code>
				</li>
				<li class="g-col g-span6 g-span4--mid">
					<div class="icon-sg icon-email"></div>
					<code>.icon-email</code>
				</li>
			</ul>

			<h3 class="sg-interfaceType sg-interfaceType--subtle">Favicons</h3>

			<div class="sg-favicon">
				<img src="{{ baseUrl }}/assets/dist/img/icons/core/favicon.ico" alt="" width="16">
				<code>16x16</code>
			</div>
			<div class="sg-favicon">
				<img src="{{ baseUrl }}/assets/dist/img/icons/core/touch-icon-iphone-precomposed.png" alt="" width="57">
				<code>57x57 (iPhone app icon)</code>
			</div>
			<div class="sg-favicon">
				<img src="{{ baseUrl }}/assets/dist/img/icons/core/touch-icon-ipad-precomposed.png" alt="" width="72">
				<code>72x72 (iPad app icon)</code>
			</div>
			<div class="sg-favicon">
				<img src="{{ baseUrl }}/assets/dist/img/icons/core/touch-icon-iphone-retina-precomposed.png" alt="" width="114">
				<code>114x114 (iPhone app icon retina)</code>
			</div>
			<div class="sg-favicon">
				<img src="{{ baseUrl }}/assets/dist/img/icons/core/touch-icon-ipad-retina-precomposed.png" alt="" width="144">
				<code>144x144 (iPad app icon retina)</code>
			</div>

		</div>
	</div>


	<!-- Please add more to this to keep your styleguide useful -->

	<!-- Add more here :) -->
	<!-- <div class="sg-page">
		<div class="l-container">
			<h2 class="sg-sectionHeading">More stuff</h2>

		</div>
	</div> -->