RAYMOND WEIL

Styleguide

Atoms

Couleurs

Primary

.bg-primary

#76787B

Primary light

.bg-primary-light

#F4F4F4

Primary dark

.bg-primary-dark

#575256

Secondary

.bg-secondary

#ae9f92

Grey

.bg-grey

#76787B

Grey Light

.bg-grey-light

#F4F4F4

Grey Dark

.bg-grey-dark

#575256

Text

color-text

#2A2A2A

Lorem Ipsum

Text Light

color-text-light

#FFFFFF

Lorem Ipsum

Success

.bg-success

#5DB040

Warning

.bg-warning

#F67010

Error

.bg-error

#D70915

Black

.bg-black

#545454

White

.bg-white

#FFFFFF

Font Sizes

$fontSize

Font size Regular (1.4rem / 14px)

$fontSizeS

Font size S (1.2rem / 12px)

$fontSizeXS

Font size XS (1rem / 10px)

$fontSizeL

Font size L (1.6rem / 16px)

$fontSizeXL

Font size XL (1.8rem / 18px)

$fontSizeXXL

Font size XXL (2.6rem / 26px)

$fontSizeXXXL

Font size XXXL (3.6rem / 36px)

Font Families

Conamore

.font-primary $fontFamily

Lorem ipsum dolor sit amet consectetur adipiscing

Conamore-semibold

.font-primary-semibold $fontFamilySemiBold

Lorem ipsum dolor sit amet consectetur adipiscing

Open

.font-secondary $fontFamilySecondary

Lorem ipsum dolor sit amet consectetur adipiscing

Montserrat

.font-tertiary $fontFamilyTertiary

Lorem ipsum dolor sit amet consectetur adipiscing

Headings

.h1, .wysiwyg .h1

Lorem ipsum

.h2, .wysiwyg .h2

Lorem ipsum

.h3, .wysiwyg .h3

Lorem ipsum

.h4, .wysiwyg .h4

Lorem ipsum

.h5, .wysiwyg .h5

Lorem ipsum

Texts

Conamore regular / 14px

.text-default, p, span, body

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor et est id sodales. Quisque ac libero quis augue euismod auctor non commodo nibh

Conamore semibold / 16px

.text-x-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor et est id sodales. Quisque ac libero quis augue euismod auctor non commodo nibh

Conamore regular / 16px

.text-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor et est id sodales. Quisque ac libero quis augue euismod auctor non commodo nibh

Conamore regular / 12px

.text-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor et est id sodales. Quisque ac libero quis augue euismod auctor non commodo nibh

Conamore regular / 10px

.text-mini

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor et est id sodales. Quisque ac libero quis augue euismod auctor non commodo nibh

Montserrat semibold / 14px - line-height:22px

.cta

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor et est id sodales. Quisque ac libero quis augue euismod auctor non commodo nibh

Montserrat semibold / 12px - line-height:22px

.cta-mini

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor et est id sodales. Quisque ac libero quis augue euismod auctor non commodo nibh

Montserrat semibold / 10px

.text-tag

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor et est id sodales. Quisque ac libero quis augue euismod auctor non commodo nibh

Buttons

Primary

render 'button' disabled:false, typestyle: "primary", class: "additional" content:"button primary"

Primary Light

render 'button' disabled:false, typestyle: "primary-light", class: "additional" content:"button primary light"

Secondary

render 'button' disabled:false, typestyle: "secondary", class: "additional" content:"secondary"

Secondary Light

render 'button' disabled:false, typestyle: "secondary-light", class: "additional" content:"secondary light"

Tertiary

render 'button' disabled:false, typestyle: "tertiary", class: "additional" content:"tertiary"

Tertiary size S

render 'button' disabled:false, size:"s", typestyle: "tertiary", class: "additional" content:"tertiary"

Link bold

render 'button' href: "google.fr", targetblank: false, typestyle: "link-bold", class: "additional", content:"link bold"
link bold

Checkbox & radio

Checkbox with label

render 'checkbox', name: 'optin', label: "label", value: 1, checked: false

Checkbox

render 'checkbox', name: 'optin', value: 1, checked: false

Radio

render 'checkbox', type: 'radio', label: "label", name: 'sort_by', value: "value"

Molécules

Accordions

title 1 ?
SALUUTATIONS
coucou?
SALUUTATIONS

Tags

render 'tags', class: "additional", content:"tag default"
tag default

Organisms

Product card

render 'card-product', card_product: product, show_secondary_image: true, show_vendor: false, show_rating: false, section_id: section.id, quick_add: false

Example product title

20 CHF

Sections