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:
bg-color-cwhite
bg-color-inside-cwhite
Black
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
Success
USE CLASS
.bg-color-success
.bg-color-inside-success
Escala de grises
Lightest
USE CLASS
.bg-color-lightest
.bg-color-inside-lightest
Lighter
USE CLASS
.bg-color-lighter
.bg-color-inside-lighter
Light
USE CLASS
.bg-color-light
.bg-color-inside-light
Medium
USE CLASS
.bg-color-medium
.bg-color-inside-medium
Dark
USE CLASS
.bg-color-dark
.bg-color-inside-dark
Darker
USE CLASS
.bg-color-darker
.bg-color-inside-darker
Darkest
USE CLASS
.bg-color-darkest
.bg-color-inside-darkest
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 - Lorem ipsum 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
.muted
Box border
Box shadow
Class a les columnes:
.bg-color-inside-cwhite
.box-shadow
Useful links
Enlaces de interés
Enllaços d'interès
.section
Add Your Heading Text Here
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.
A la columna: .bg-color-cwhite
A innersection: .section-no-gutter
