Styleguide created for purpose to represet individual component available for use.
Grid
Colors
jaguar red
#9E1B32
$jaguar-red
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
red 6
#9D3C50
$red-6
red 7
#AF6775
$red-7
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
light red 5
#F7F1F3
$light-red-5
light red 6
#C6A3A9
$light-red-6
light red 7
#D2C2C5
$light-red-7
Typography
Jaguar
Can be added via $jaguar SCSS variable
Jaguar Regular font-weight: $fw-normal;
Regular text is here.
Italic text is here.
Jaguar Bold font-weight: $fw-bold;
Regular text is here.
Italic text is here.
Jaguar ExtraBold (Black) font-weight: $fw-black;
Regular text is here.
Italic text is here.
Proxima Nova
Can be added via $proximanova SCSS variable
Proxima Nova Light font-weight: $fw-light;
Regular text is here.
Italic text is here.
Proxima Nova Regular font-weight: $fw-regular;
Regular text is here.
Italic text is here.
Proxima Nova Semibold font-weight: $fw-semibold;
Regular text is here.
Italic text is here.
Proxima Nova 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 |