Styleguide created for purpose to represet individual component available for use.
Grid
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
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 |