• Breakpoints
  • Grid
  • Basic grid layout
  • Dynamic grid layout
  • Example grid layout
  • Restricted width
  • Themes
  • Theme 0
  • Theme 1
  • Theme 2
  • Theme 3
  • Theme 4
  • Theme 5
  • Theme 6
  • Theme 7
  • Theme 8
  • Theme 9
  • Theme with border
  • Theme with arrow
  • Sliders
  • Standard row slider
  • Non-standard responsive configurations
  • Autoplay preferences
  • Grid sliders
  • Nav slider
  • Slider additions
  • Images
  • Sizing images
  • Standard images
  • Wide images
  • Video sibling images
  • Thumb nail images
  • Fonts
  • Heinemann
  • Roboto
  • Text
  • Body copy
  • Headings
  • Example text
  • Banner
  • Option 1
  • Option 2
  • Option 3
  • Colours
  • Icons
  • General icons
  • Nav Icons
  • Roundel Icons
  • Site fees Icons
  • Key components
  • Button
  • Button colour options
  • Input
  • Select
  • Modal
  • Reveal
  • Tick/Bullet list
  • Table

Site documentation

Guide lines to the UKHHS site

Break points

Resize the window to initiate the break points.

Grid

The grid layout is fully dynamic and can accommodate any configuration of <col> widths across each of the break points based on a 12 column grid.

Basic layout

Below is the basic structure of an element with one <row> and two <col>.

<section class="element">
    <div class="innerWrap">
        <div class="rowWrap">
            <div class="row">
                <div class="col"></div>
                <div class="col"></div>
            </div>
        </div>
    </div>
</section>

Dynamic layout

To initiate varying <col> width across breakpoints additional classes need to be added. The grid works mobile first, therefore an added class will only affect a change above that specified break point. For example, class="med6" will only change the col in question to a 6 col width (50%) above the $medBp. Any <col> displayed on screen size below the $medBp will revert to the default <col> width of 100% unless an additional class is added. The <col> will similarly display the 6 col width (50%), defined by the class="med6", on all screen sizes above the $medBp unless an additional class is added defining a breakpoint above the $medBp.

The following classes will affect a change in the following screen sizes:

Above 0px - class="mob(x)"

Above $smlBp - class="sml(x)"

Above $medBp - class="med(x)"

Above $lrgBp - class="lrg(x)"

Above $xlrgBp - class="xlrg(x)"

Default width 12 column - no additional class needed. However can reset back to 12 columns with - class="sml12 / med12 / lrg12 / xlrg12"

col

11 column - class="mob11 / sml11 / med11 / lrg11 / xlrg11"

col

10 column - class="mob10 / sml10 / med10 / lrg10 / xlrg10"

col

9 column - class="mob9 / sml9 / med9 / lrg9 / xlrg9"

col

8 column - class="mob8 / sml8 / med8 / lrg8 / xlrg8"

col

7 column - class="mob7 / sml7 / med7 / lrg7 / xlrg7"

col

6 column - class="mob6 / sml6 / med6 / lrg6 / xlrg6"

col

5 column - class="mob5 / sml5 / med5 / lrg5 / xlrg5"

col

4 column - class="mob4 / sml4 / med4 / lrg4 / xlrg4"

col

3 column - class="mob3 / sml3 / med3 / lrg3 / xlrg3"

col

2 column - class="mob2 / sml2 / med2 / lrg2 / xlrg2"

col

1 column - class="mob1 / sml1 / med1 / lrg1 / xlrg1"

col

The following classes act as a display:none; and can be defined as you would the previous classes - class="mob0 / sml0 / med0 / lrg0 / xlrg0"

Example layout

Below is a grid example with multiple <col> elements showing how each <col> can change it's width and move onto a different row but not outside the parent <row>

col 1

col 2

col 3

col 4

col 5

col 6

col 7

col 8

col 9

col 10

Restrict element width

Some elements require a restricted width, for example the form elements. To enable these restricted widths an addition of class="restrict" to the parent <section class="innerWrap"> is needed, along with a defined restriction, eg: class="med85". Similarly to the class structure that defines the <col> widths in the 'Grid' section, a class can be added defining the restricted width of the element at each breakpoint. This structure again works mobile first, resulting in any breakpoint not being defined by a restricted width, reverting back to the elements default 100% width. This is again unless a lower breakpoint restriction has been defined, in which case it would retain that particular defined restriction instead.

Example restricted class structure - class="innerWrap restrict med85 lrg75"

In this instance the number at the end of each class refer to the % width of the element in question at each breakpoint.

Restricted class list

"mob5" "mob10" "mob15"......"mob95" (ranging from 5px-95px in multiples of 5px)

"sml5" "sml10" "sml15"......"sml95" (ranging from 5px-95px in multiples of 5px)

"med5" "med10" "med15"......"med95" (ranging from 5px-95px in multiples of 5px)

"lrg5" "lrg10" "lrg15"......"lrg95" (ranging from 5px-95px in multiples of 5px)

"xlrg5" "xlrg10" "xlrg15"......"xlrg95" (ranging from 5px-95px in multiples of 5px)

Col

Col

Col

Col

Col

Element themes

By default an elements theme is set to background: $white;, however additional colours can be enabled.

To enable any theme class="fullColor" must be added to the <section class="element">.

Theme 0

An addition of class="theme0" to the <section class="element">, enables background: $white;. This is used as a reset to the default white on elements inside other themes.

Theme 1

An addition of class="theme1" to the <section class="element">, enables background: lighten($seaside, 40);

Theme 2

An addition of class="theme2" to the <section class="element">, enables background: $seaside;

Theme 3

An addition of class="theme3" to the <section class="element">, enables background: $goldenSage;

Theme 4

An addition of class="theme4" to the <section class="element">, enables background: $bayLeaf;

Theme 5

An addition of class="theme5" to the <section class="element">, enables background: $teal;

Theme 6

An addition of class="theme6" to the <section class="element">, enables background: $lavendar;

Theme 7

An addition of class="theme7" to the <section class="element">, enables background: $flame;

Theme 8

An addition of class="theme8" to the <section class="element">, enables background: $razzmatazz;

Theme 9

An addition of class="theme9" to the <section class="element">, enables background: $mintGreen;

Theme with border

An addition of class="border" to the <section class="element">, enables a border of the same theme colour

Theme with arrow

An addition of class="withArw" to any of previous <section class="element">, enables a bottom arrow of the same theme colour.

Sliders

The majority of element structures (as seen in the above 'Grid' section) can become a slider with the addition of a few classes.

Standard row slider

For a standard slider class="initSlider" needs to be added to the parent <row> of the <col> elements you wish to slide, however this won't do anything on it's own. A class to define how many slides you want displayed on screen and a class to define the autoplay preferences are needed in order to initiate a slider.

Although you have restricted the amount of slides that will be displayed at one time, you are not restricted by the amount of slides(<col> elements) you can have in the slider. If the amount of slides(<col> elements) is equal to or less than the amount defined to show, the slider will become static and simply display those slides.

Show 1 slide - Add class="show1" to display 1 slide across all breakpoints.

Slide 1

Slide 2

Slide 3

Show 2 slides - Add class="show2" to display 2 slides above $smlBp and 1 slide below.

Slide 1

Slide 2

Slide 3

Show 3 slides - Add class="show3" to display 3 slides above $medBp, 2 slides above $smlBp and 1 slide below.

Slide 1

Slide 2

Slide 3

Slide 4

Show 4 slides - Add class="show4" to display 4 slides above $lrgBp, 3 slides above $medBp, 2 slides above $smlBp and 1 slide below.

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Show 5 slides - Add class="show5" to display 5 slides above $lrgBp, 4 slides above $medBp, 2 slides above $smlBp and 1 slide below.

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Non-standard responsive configurations

These are generally used for overlay elements, where smaller slides would be unsuitable to house the content within.

Add class="show1m1s2m2l" to display 2 slides above $lrgBp and 1 slide below $lrgBp.

Slide 1

Slide 2

Slide 3

Slide 4

Add class="show1m1s1m3l" to display 3 slides above $lrgBp and 1 slide below $lrgBp.

Slide 1

Slide 2

Slide 3

Slide 4

Add class="show1m1s2m3l" to display 3 slides above $lrgBp, 2 slides above $medBp and 1 slide below $medBp.

Slide 1

Slide 2

Slide 3

Slide 4

Autoplay preferences

These classes affect the autoplay speed of a slider with an addition of class="speed1", class="speed2", class="speed3"...all the way through to class="speed10". An addition of class="autoOff" sets autoplay to off. At least one of these classes is necessary to initiate a slider.

Autoplay off - Add class="autoOff" to stop autoplay

Slide 1

Slide 2

Autoplay speed 1 sec - Add class="speed1" to automatically slide every 1 second

Slide 1

Slide 2

Autoplay speed 5 sec - Add class="speed5" to automatically slide every 5 second

Slide 1

Slide 2

Autoplay speed 10 sec - Add class="speed10" to automatically slide every 10 second

Slide 1

Slide 2

Grid sliders

For a grid slider class="initSliderGrid" needs to be added to the parent <row> of the <col> elements you wish to slide.

This won't do anything on it's own and an additional class is needed to define how many slides are in the grid. Unlike the standard row sliders the number of slides(<col> elements) can not exceed the amount defined by the additional class, for example class="grid3" can only hold 3 slides.

3 col grid - Add class="grid3" to display a static 3 <col> grid above $medBp, 2 slides above $smlBp and 1 slide below.

Slide 1

Slide 2

Slide 3

4 col grid - Add class="grid4" to display a static 4 <col> grid above $medBp, 2 slides above $smlBp and 1 slide below.

Slide 1

Slide 2

Slide 3

Slide 4

5 col grid - Add class="grid5" to display a static 5 <col> grid above $medBp, 2 slides above $smlBp and 1 slide below.

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

6 col grid - Add class="grid6" to display a static 6 <col> grid above $medBp, 2 slides above $smlBp and 1 slide below.

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

7 col grid - Add class="grid7" to display a static 7 <col> grid above $medBp, 2 slides above $smlBp and 1 slide below.

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

8 col grid - Add class="grid8" to display a static 8 <col> grid above $medBp, 2 slides above $smlBp and 1 slide below.

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Adding class="lrgBtm" to class="grid3", class="grid5", class="grid7" will result in the larger slides displaying on the bottom row, rather than the top as is default.

Slide 1

Slide 2

Slide 3

Nav slider

For a nav slider, two slider elements need to exist within the same <section class="element">. Along with class="initSlider" and a display definition, eg: class="show1", add class="withNav" to the primary slider and class="sliderNav" to the secondary slider that will be used as the nav. These slider will now link to each other and clicking on the slide in the secondary slider will navigate to the same slide in the primary slider.

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

1

2

3

4

5

6

Slider additions

There are certain features that can be turned on or off on each individual slider.

Slider arrow navigation - By default, the slider navigation arrows are turned off (unless displayed on touch screens). To enable add class="withArws" to the parent <row> of the <col> elements you wish to slide.

Slider dot navigation - By default, the slider navigation dots are turned off. To enable add class="withDots" to the parent <row> of the <col> elements you wish to slide.

Slide 1

Slide 2

Slide 3

Images

In order to maintain consistency and accommodate particular elements across the site, strictly defined image aspect ratios have been defined.

Sizing images

When sizing images consider the environment they will be placed in. In order to display high quality images on retina devices (which most modern devices have) an image needs to be sized to double the size of the container width it is housed in. For example if an image displays at 300px width at it's largest size, then the image itself needs to be sized to 600px. This is due to retina screens rendering a pixel density twice that of regular screens.

Standard image

Standard images have an aspect ratio of 10:7

To be used in the majority of cases.

Width (px)

Height (px) = 0

Wide image

Wide images have an aspect ratio of 20:7

To be used for full width image such as the main banner image.

Width (px)

Height (px) = 0

Video sibling image

Wide images have an aspect ratio of 16:9

To be used when placed next to a video element to accommodate the standard 16:9 aspect ratio of a video.

Width (px)

Height (px) = 0

Thumb nail image

Wide images have an aspect ratio of 50:47

To be used in all nav sliders.

Width (px)

Height (px) = 0

Fonts

Heinemann

Heinemann Roman

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

var name = $fontHeinemannRoman

Heinemann Roman Italic

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

var name - $fontHeinemannRomanItalic

Heinemann Bold

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

var name = $fontHeinemannBold

Heinemann Bold Italic

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

var name = $fontHeinemannBoldItalic

Heinemann Black

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

var name = $fontHeinemannBold

Heinemann Black Italic

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

var name = $fontHeinemannBlackItalic

Roboto

Roboto Light

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

var name = $fontRobotoLight

Roboto Regular

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

var name = $fontRobotoRegular

Roboto Bold

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

var name = $fontRobotoBold

Roboto Black

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

var name = $fontRobotoBlack

Text

Body copy

Initialised with <p> <a> <li> tags.

Body copy styles overview:

font-size: 14px;

line-height: 160%;

font-family: $fontRobotoRegular;

color: $bodyCopy;

An addition of class="title" or <strong> affects below change:

font-family: $fontRobotoBold;

An addition of class="light" affects below change:

font-family: $fontRobotoBold;

Headings

Initialised with <h1> <h2> <h3> <h4> <h5> <h6> <p> <a> <li> tags.

For SEO purposes, no styles have been attached to the <h1> <h2> <h3> <h4> <h5> <h6> tags. Instead the following class are used to determine the styles.

An addition of class="heading" on a text tag affects the below changes:

line-height: 140%;

font-family: $fontHeinemannBold;

color: $seaside;

An addition of class="light" on a text tag affects the below changes:

font-family: $fontHeinemannRoman;

An addition of class="italic" on a text tag affects the below changes:

font-family: $fontHeinemannRomanItalic;

An addition of class="h0" on a text tag affects the below changes:

font-size: 50px;

An addition of class="h1" on a text tag affects the below changes:

Below $smlBp - font-size: 24px;

Above $smlBp - font-size: 32px;

An addition of class="h2" on a text tag affects the below changes:

Below $smlBp - font-size: 22px;

Above $smlBp - font-size: 34px;

An addition of class="h3" on a text tag affects the below changes:

font-size: 20px;

An addition of class="h4" on a text tag affects the below changes:

font-size: 16px;

Examples

Extra large headings - using class="heading h0"

Main headings and large £XXXX - using class="heading h1"

Second headings - using class="heading h2"

Third headings and footer heads - using class="heading h3"

Body copy block heading - using class="h4"

Body copy - using class=""

Option 1 - single image

This option has one <img> per slide, that will scale with the screen size. With the addition of class="minHeight" the image will stop scaling below $medBp and hold to a width: 914px; height: 320px; below $medBp and width: 771px; height: 270px; below $smlBp. The widths and heights of these have been set to reflect the aspect ratio 20:7.

Option 2 - multiple images across breakpoints

This option has multiple <img> per slide, one for each break point. This allows a specific image to display on each breakpoint with an addition of class="imgMob / imgSml / imgMed / imgLrg" on the individual <img>. Make sure, when using this option to include an image for each breakpoint (except $xlrgBp as this renders at the same size as $lrgBp).

Overlay content

Headings

Headings are laid out in the usual way by adding class="heading" to a text element with an additional class="bnrHeading", however instead of defining class="h1 / h2 ...etc", much more specific classes need to be added to allow any potential message to fit in the space available.

Example dynamic heading class structure - class="heading hMob12 hSml9 hMed8 hLrg6 hXLrg70"

The class structure is similar to that which defines the <col> widths in the 'Grid' section, in that a class for each breakpoint can be defined to affect a change to the font size of a particular heading. The class="hMed8" in the example above can be broken down as 'h' for heading, 'Med' referring to the $medBp that it is targeting and '8' meaning font-size:8vw. This means that the heading font-size will scale to 8% of the viewport(screen) width, allowing for a more responsive display. This percentage based font-size works well below the $xlrgBp, however for above the $xlrgBp, we have to revert back to px based font-size. Therefore the class="hXLrg70" in the example above refers to font-size:70px;

Dynamic heading class list

"hMob1" "hMob2" "hMob3"......"hMob12" (ranging from 1vw-12vw)

"hSml1" "hSml2" "hSml3"......"hSml12" (ranging from 1vw-12vw)

"hMed1" "hMed2" "hMed3"......"hMed12" (ranging from 1vw-12vw)

"hLrg1" "hLrg2" "hLrg3"......"hLrg12" (ranging from 1vw-12vw)

"hXLrg1" "hXLrg2" "hXLrg3"......"hXLrg100" (ranging from 1px-100px)

Roundel

Example overlay roundel code structure

<div class="floatRoundel">
    <div class="overCopy">
        <div class="textWrap">
            <p>Text here<br>max 3 lines</p>
        </div>
    </div>
    <span class="icon icon-roundel roundel"></span>
</div>

The roundel is easy to add in. Using the above code you can simply change the message within the <textWrap> element. Bare in mind the layout is designed for a limited amount of copy across three lines. Use <br> to break the message across three lines.

Join us as a holiday home owner

Text here
max 3 lines

Join us as a holiday home owner

Text here
max 3 lines

Colours

Colours are in the process of review, to be changed to the new colour palette. Below are the current colours being used.

Global colour palette

Grey

var name - $grey

hex code - #555

Light grey

var name - $lightGrey

hex code - #999

Extra light grey

var name - $extraLightGrey

hex code - #EBEBEB

Drak grey

var name - $darkGrey

hex code - #333

White

var name - $white

hex code - #fff

Black

var name - $black

hex code - #000

Body copy

var name - $bodyCopy

hex code - #575757

Main colour

var name - $mainColor = $havenBlue

hex code - #007cc3

New colour palette (Dragon Rouge)

Blush Pink

var name - $blushPink

hex code - #e06287

Razzmatazz

var name - $razzmatazz

hex code - #e0004d

Flame

var name - $flame

hex code - #dc6b2f

Honey

var name - $honey

hex code - #f1b434

Mint Green

var name - $mintGreen

hex code - #00c19f

Conifer

var name - $conifer

hex code - #97d700

Ice Blue

var name - $iceBlue

hex code - #71c5e8

Haven Blue

var name - $havenBlue

hex code - #007cc3

Lavendar

var name - $lavendar

hex code - #7474c1

Plum

var name - $plum

hex code - #93328e

Maroon Flush

var name - $maroonFlush

hex code - #a1224e

Lipstick

var name - $lipstick

hex code - #a20067

Raw Sienna

var name - $rawSienna

hex code - #cf4520

Poppy

var name - $poppy

hex code - #af272f

Teal

var name - $teal

hex code - #28939d

Apple

var name - $apple

hex code - #719949

Amazon Green

var name - $amazonGreen

hex code - #00594c

Classic Blue

var name - $classicBlue

hex code - #154ea2

Deep Burgundy

var name - $deepBurgundy

hex code - #7c2529

Blackcurrant

var name - $blackcurrant

hex code - #6d2077

Slate Grey

var name - $slateGrey

hex code - #425563

Natural Grey

var name - $naturalGrey

hex code - #8c8985

Pebble

var name - $pebble

hex code - #b1b3b3

Bay Leaf

var name - $bayLeaf

hex code - #85b09a

Golden Sage

var name - $goldenSage

hex code - #b0aa7e

Sales Red

var name - $salesRed

hex code - #da291c

Old colour palette

Seaside

var name - $seaside

hex code - #5e8cbf

Hull Blue

var name - $hullBlue

hex code - #00b8de

Breezy Blue

var name - $breezyBlue

hex code - #3dc3dc

Tern

var name - $tern

hex code - #4cb2b3

Surf

var name - $surf

hex code - #8baf9b

Samphire

var name - $samphire

hex code - #adbb36

New Fresh Green

var name - $newFreshGreen

hex code - #9ec854

Cuttlefish

var name - $cuttlefish

hex code - #d8a536

Fresh Ochre

var name - $freshOchre

hex code - #d0a93e

New Dune

var name - $newDune

hex code - #f3c753

Driftwood

var name - $driftwood

hex code - #b7ab8f

Sunset

var name - $sunset

hex code - #eb7341

Itsy Bitsy

var name - $itsyBitsy

hex code - #e074ad

Coral Crush

var name - $coralCrush

hex code - #bf4d63

Mussel

var name - $mussel

hex code - #8373a8

Classic Red

var name - $classicRed

hex code - #ed1c24

Mountain Grey

var name - $mountainGrey

hex code - #767675

Muddy Puddle

var name - $muddyPuddle

hex code - #6e6e53

Seaweed

var name - $seaweed

hex code - #717530

Olive

var name - $olive

hex code - #7b853b

Fresh Taupe

var name - $freshTaupe

hex code - #987f72

Jelly and Ice Cream

var name - $jellyAndIceCream

hex code - #a04276

Plumberry

var name - $plumberry

hex code - #7c2b83

Duck Feather Blue

var name - $duckFeatherBlue

hex code - #008da8

Off palette colours

Map region

var name - $mapRegion

hex code - #aacd85

Map region lines

var name - $mapRegionLines

hex code - #e3efcc

Map region name

var name - $mapRegionNames

hex code - #668348

Lightened and darkened variations of these colours are also used throughout the site.

Icons

General Icons

class name - .icon-arrowUp

class name - .icon-arrowDown

class name - .arrowLeft

class name - .icon-arrowRight

class name - .icon-arrowFillDown

class name - .icon-arrowFillDown

class name - .icon-arrowFillLeft

class name - .icon-arrowFillRight

class name - .icon-book

class name - .icon-calendar

class name - .icon-car

class name - .icon-chat

class name - .icon-cross

class name - .icon-dot

class name - .icon-dotOutline

class name - .icon-email

class name - .icon-filter

class name - .icon-leftQuote

class name - .icon-rightQuote

class name - .icon-minus

class name - .icon-plus

class name - .icon-phone

class name - .icon-pin

class name - .icon-play

class name - .icon-popUp

class name - .icon-print

class name - .icon-search

class name - .icon-tick

Nav Icons

class name - .icon-navMenu

class name - .icon-navClose

class name - .icon-navPark

class name - .icon-dragHandle

class name - .icon-home

class name - .icon-parks

class name - .icon-caravan

class name - .icon-buy

class name - .icon-person

class name - .icon-havenIcon

class name - .icon-goTo

Roundel Icons

class name - .icon-roundel

class name - .icon-roundelCaravan

class name - .icon-roundelFamily

class name - .icon-roundelForm

class name - .icon-roundelHandShake

class name - .icon-roundelPound

class name - .icon-roundelQuestion

class name - .icon-roundelTree

Site fees icons

class name - .icon-pounds

class name - .icon-fire

class name - .icon-waterDrop

class name - .icon-keys

Key components - structure

There are numerous recurring components throughout the site that maintain a consistant code structure

Button

Find out more

Standard button

To be used on the majority

<div class="btnWrap">
    <a href="#" class="btn">
        <p>Find out more</p>
        <span class="icon icon-arrowRight"></span>
    </a>
</div>

Inline buttons

To be used to inline 2 or more buttons

<div class="btnWrap inlineBtns">
    <a href="#" class="btn">
        <p>Find out more</p>
        <span class="icon icon-arrowRight"></span>
    </a>
    <a href="#" class="btn">
        <p>Find out more</p>
        <span class="icon icon-arrowRight"></span>
    </a>
</div>

Double click overlay button

To be used inside a <div class="col overlay"> element

<div class="btnWrap">
    <a class="btn cta1">
        <p>Button information</p>
    </a>
    <a class="btn cta2">
        <p>Find out more</p>
        <span class="icon icon-arrowRight"></span>
    </a>
    <a href="#" class="clickThrough"></a>
</div>

Double click submit button

To be used with form elements to check there are no errors before submit

<div class="btnWrap">
    <a class="btn submit">
        <p>Submit</p>
        <span class="icon icon-arrowRight"></span>
    </a>
    <a href="#" class="clickThrough"></a>
</div>

Button colour options

An addition of any of the classes listed in the dropdown below to class="btn" with enable a colour change.

Find out more

Input

Standard input

<div class="field inputWrap">
    <input type="" name="">
</div>

Select

Standard select

<div class="field selectWrap">
    <span class="icon fieldIcon icon-arrowFillDown"></span>
    <select name="">
        <option value="default">Default option</option>
        <option value="">Option 1</option>
        <option value="">Option 2</option>
        <option value="">Option 3</option>
        <option value="">Option 4</option>
        <option value="">Option 5</option>
    </select>
</div>

Modal trigger - click me

Modal header

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.

<div class="modalWrap">
    <p class="modalTrigger">Modal trigger - click me</p>
    <div class="modal">
        <div class="modalBody">
            <span class="icon icon-cross closeTrigger"></span>
            <div class="modalContent">
                <p class="heading h2">Modal header</p>
                <p>Modal copy</p>
            </div>
        </div>
    </div>
</div>

Reveal trigger - click me

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lorem turpis, vestibulum non euismod sed, vehicula vestibulum tellus. Duis condimentum suscipit laoreet. Aenean ultricies et leo non luctus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lorem turpis, vestibulum non euismod sed, vehicula vestibulum tellus. Duis condimentum suscipit laoreet. Aenean ultricies et leo non luctus.

<div class="revealBlock">
    <div class="revealWrap">
        <span class="icon icon-plus revealTrigger"></span>
        <div class="revealContent">
            <p class="revealHeader revealTrigger">Reveal trigger - click me</p>
            <div class="reveal">
                hidden content
            </div>
        </div>
    </div>
    <div class="revealWrap">
        <span class="icon icon-plus revealTrigger"></span>
        <div class="revealContent">
            <p class="revealHeader revealTrigger">Reveal trigger - click me</p>
            <div class="reveal">
                hidden content
            </div>
        </div>
    </div>
</div>

Tick/Bullet list

  • Lorem ipsum dolor

  • Voluptate velit esse ex ea

  • Lorem ipsum dolor

  • Voluptate velit esse ex ea

  • Lorem ipsum dolor

  • Voluptate velit esse ex ea

  • Lorem ipsum dolor

  • Voluptate velit esse ex ea

  • Lorem ipsum dolor

<div class="listWrap">
    <ul class="col sml6 med4 bulletList">
        <li><span class="icon icon-tick"></span><p>List copy here</p></li>
        <li><span class="icon icon-tick"></span><p>List copy here</p></li>
        <li><span class="icon icon-tick"></span><p>List copy here</p></li>
    </ul>
    <ul class="col sml6 med4 bulletList">
        <li><span class="icon icon-tick"></span><p>List copy here</p></li>
        <li><span class="icon icon-tick"></span><p>List copy here</p></li>
        <li><span class="icon icon-tick"></span><p>List copy here</p></li>
    </ul>
    <ul class="col sml6 med4 bulletList">
        <li><span class="icon icon-tick"></span><p>List copy here</p></li>
        <li><span class="icon icon-tick"></span><p>List copy here</p></li>
        <li><span class="icon icon-tick"></span><p>List copy here</p></li>
    </ul>
</div>

Table

Table header

Cell content
£XXXXXXXXX
Cell content
£XXXXXXXXX
Cell content
£XXXXXXXXX
Cell content
£XXXXXXXXX

<div class="tableWrap">
    <p class="h4 tableHeader">Table header</p>
        <div class="tableContent">
            <div class="tableRow">
                <div class="tableCell">
                    Cell content
                </div>
                <div class="tableCell">
                    Cell content
                </div>
            </div>
            <div class="tableRow">
                <div class="tableCell">
                    Cell content
                </div>
                <div class="tableCell">
                    Cell content
                </div>
            </div>
        </div>
    </div>
</div>