Cerrar

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

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

Es un hecho establecido hace demasiado tiempo que un lector

Estos textos hacen parecerlo un español que se puede leer.

Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido.

El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí".El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras.

El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí".

El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí".
El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí".

Text

xs – Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar. Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar. Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar.

sm – Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar. Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar. Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar.

md – Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar. Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar. Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar.

lg – Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar. Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar. Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar.

xl – Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar. Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar. Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar.

Section

.accent-color

.muted

Forms - Ninja form

Box shadow

Class a les columnes:

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

Box shadow

Class a les columnes:

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

.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