Styleguide

Styleguide created for purpose to represet individual component available for use.

Grid

col-12
col-1
col-11
col-2
col-10
col-3
col-9
col-4
col-8
col-5
col-7
col-6
col-6
col-7
col-5
col-8
col-4
col-9
col-3
col-10
col-2
col-11
col-1

Colors

primary color

#09592C

$primary-color

secondary color

#E4E8E9

$secondary-color


light cool grey

#E4E8E9

$light-cool-grey


white

#FFFFFF

$white

c grey

#686868

$c-grey

c grey2

#AFB6BE

$c-grey2

c grey3

rgba(234,232,233,0.4)

$c-grey3

c grey4

#E4E8E9

$c-grey4

c grey5

#0C121C

$c-grey5

black

#000000

$black


yellow

#FFE600

$yellow


red

#9F0C0C

$red

red 2

#CF2B2C

$red-2

red 3

#F84C4C

$red-3

red 4

#D95353

$red-4

red 5

#C34342

$red-5

light red

#FBE3E4

$light-red

light red 2

#FFF7F8

$light-red-2

light red 3

#FFE5E5

$light-red-3

light red 4

#F6D5D5

$light-red-4


dark green

#09592C

$dark-green

landrover green

#0B6838

$landrover-green


light green

#C5D4CD

$light-green

Typography

Avenir

Can be added via $avenir SCSS variable

Avenir Light font-weight: $fw-light;

Regular text is here.

Italic text is here.

Avenir Book font-weight: $fw-book;

Regular text is here.

Italic text is here.

Avenir Regular / Medium font-weight: $fw-normal / $fw-medium;

Regular text is here.

Italic text is here.

Avenir Bold / Heavy font-weight: $fw-bold / $fw-heavy;

Regular text is here.

Italic text is here.

Avenir Black font-weight: $fw-black;

Regular text is here.

Italic text is here.


Avenir Roman

Can be added via $avenir-roman SCSS variable

Avenir Roman Regular font-weight: $fw-normal;

Regular text is here.

Italic text is here.


Land Rover

Can be added via $landrover SCSS variable

Land Rover Light font-weight: $fw-light;

Regular text is here.

Italic text is here.

Land Rover Regular / Medium font-weight: $fw-normal / $fw-medium;

Regular text is here.

Italic text is here.

Land Rover Demi (Semibold) font-weight: $fw-semibold;

Regular text is here.

Italic text is here.

Land Rover Bold font-weight: $fw-bold;

Regular text is here.

Italic text is here.


Helvetica Neue

Can be added via $helvetica SCSS variable

Helvetica Neue Thin (Light) font-weight: $fw-light;

Regular text is here.

Italic text is here.

Helvetica Neue Regular font-weight: $fw-normal;

Regular text is here.

Italic text is here.

Helvetica Neue Bold font-weight: $fw-bold;

Regular text is here.

Italic text is here.


Myriad Pro

Can be added via $myriad SCSS variable

Myriad Pro Regular font-weight: $fw-normal;

Regular text is here.

Italic text is here.

Myriad Pro Bold font-weight: $fw-bold;

Regular text is here.

Italic text is here.

Headings

Shared homepage H1

Shared homepage H2


Homepage block H1

Homepage block H2


This is an H1 tag.


This is an H2 tag


This is an H3 tag.


This is an H4 tag.


This is an H4 tag in pod header.


This is an H4 tag in my-build.


This is an H5 tag.

This is an H5 tag in gray.

This is an H6 tag.

Sprites

To include sprite simply use '@include sprite($sprite-png-file-name)'

To add badge use <span class="badge">NUMBER</span>

Example: 2

Info badges:

Edit:


Default Sprites


Mixin name Image Image on dark background
action-collapse-dark
action-collapse-light
action-collapse
action-expand-dark
action-expand-light
action-expand
add-icon
aftersales-icon
arrow-down-dark
arrow-right-dark
back-to-top-arrow
cart-icon
check-black
check-bold
check-icon
check-mark
click-to-buy-icon
close-dark-small-padding
close-dark-small
close-dark