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

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

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