Styleguide created for purpose to represet individual component available for use.
#09592C
$primary-color
#E4E8E9
$secondary-color
#E4E8E9
$light-cool-grey
#FFFFFF
$white
#686868
$c-grey
#AFB6BE
$c-grey2
rgba(234,232,233,0.4)
$c-grey3
#E4E8E9
$c-grey4
#0C121C
$c-grey5
#000000
$black
#FFE600
$yellow
#9F0C0C
$red
#CF2B2C
$red-2
#F84C4C
$red-3
#D95353
$red-4
#C34342
$red-5
#FBE3E4
$light-red
#FFF7F8
$light-red-2
#FFE5E5
$light-red-3
#F6D5D5
$light-red-4
#09592C
$dark-green
#0B6838
$landrover-green
#C5D4CD
$light-green
Can be added via $avenir
SCSS variable
font-weight: $fw-light;
Regular text is here.
Italic text is here.
font-weight: $fw-book;
Regular text is here.
Italic text is here.
font-weight: $fw-normal / $fw-medium;
Regular text is here.
Italic text is here.
font-weight: $fw-bold / $fw-heavy;
Regular text is here.
Italic text is here.
font-weight: $fw-black;
Regular text is here.
Italic text is here.
Can be added via $avenir-roman
SCSS variable
font-weight: $fw-normal;
Regular text is here.
Italic text is here.
Can be added via $landrover
SCSS variable
font-weight: $fw-light;
Regular text is here.
Italic text is here.
font-weight: $fw-normal / $fw-medium;
Regular text is here.
Italic text is here.
font-weight: $fw-semibold;
Regular text is here.
Italic text is here.
font-weight: $fw-bold;
Regular text is here.
Italic text is here.
Can be added via $helvetica
SCSS variable
font-weight: $fw-light;
Regular text is here.
Italic text is here.
font-weight: $fw-normal;
Regular text is here.
Italic text is here.
font-weight: $fw-bold;
Regular text is here.
Italic text is here.
Can be added via $myriad
SCSS variable
font-weight: $fw-normal;
Regular text is here.
Italic text is here.
font-weight: $fw-bold;
Regular text is here.
Italic text is here.
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:
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 |