Styleguide

Colorpalette

Primary

.bg-color-primary
.bg-color-inside-primary

Secondary

.bg-color-secondary
.bg-color-inside-secondary

Palette 1

USE CLASS
.bg-color-palette-1
.bg-color-inside-palette-1

Palette 2

USE CLASS
.bg-color-palette-2
.bg-color-inside-palette-2

Palette 3

USE CLASS
.bg-color-palette-3
.bg-color-inside-palette-3

Palette 4

USE CLASS
.bg-color-palette-4
.bg-color-inside-palette-4

White: #fff

bg-color-cwhite
bg-color-inside-cwhite

Black #000

bg-color-cblack
bg-color-inside-cblack

Danger

USE CLASS
.bg-color-danger
.bg-color-inside-danger

Warning

USE CLASS
.bg-color-warning
.bg-color-inside-warning

Info

USE CLASS
.bg-color-info
.bg-color-inside-info

Success

USE CLASS
.bg-color-success
.bg-color-inside-success

.colorize-1

Es un hecho establecido hace demasiado tiempo.

.colorize-2

Es un hecho establecido hace demasiado tiempo.

.colorize-3

Es un hecho establecido hace demasiado tiempo.

.colorize-4

Es un hecho establecido hace demasiado tiempo.

.colorize-5

Es un hecho establecido hace demasiado tiempo.

.colorize-bg-1

Es un hecho establecido hace demasiado tiempo.

.colorize-bg-2

Es un hecho establecido hace demasiado tiempo.

.colorize-bg-3

Es un hecho establecido hace demasiado tiempo.

.colorize-bg-4

Es un hecho establecido hace demasiado tiempo.

bg-color-primary-noreverse

Posa el fons de color pero no modifica el color del text. Es fa servir, en les ocasions on s’han de combinar dos fons de color, on l’intern no modifica el color dels textos en reverse. Només hi ha l’opció noreverse per el bg-primary i el bg-secondary.

bg-color-secondary-noreverse

Backgrounds

BG 1

USE CLASS
.bg-color-bg-1
.bg-color-inside-bg-1

BG 2

USE CLASS
.bg-color-bg-2
.bg-color-inside-bg-2

BG 3

USE CLASS
.bg-color-bg-3
.bg-color-inside-bg-3

BG 4

USE CLASS
.bg-color-bg-4
.bg-color-inside-bg-4

Headings

H1.hero - heading FASHION SHOWS dolor sit amet, consectetur adipiscing elit.

H1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

H2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

H3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

H4 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

H5 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

H6 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text

xs – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo

sm – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo

md – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo

lg – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo

xl – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Section

.accent-color

.muted

Section

.accent-color-reverse

.muted-reverse

LNK

Lorem ipsum

Buttons

Box border

Class a les columnes:

.bg-color-inside-cwhite
.box-border

Box shadow

Class a les columnes:

.bg-color-inside-cwhite
.box-shadow

.section

Add Your Heading Text Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

A la section: .bg-color-secondary-noreverse o .bg-color-primary-noreverse
A la columna: .bg-color-cwhite
A innersection: .section-no-gutter