c-primary
c-secondary
c-accent
c-white
c-black
c-dark-grey
c-middle-grey
c-light-grey
c-error
c-info
c-success
c-warning
Font light
Font regular
Font medium
Font semibold
Font bold
Fuentes
Name
768px
992px
LINE HEIGHT
WEIGHT
Clase
Font size min
Font size max
line-height
Clase
ALTURA SM
ALTURA MD
Clase
Propiedades
Clase
Propiedades
Clase
Propiedades
.flex-vcenter
centrado vertical, incluso si tenemos iconos
.video-cover
Posicionamiento mediante absolutes 50%
.bg-cover
Imagen centrada al medio con cover ❌
d-inline
inline-block
flex-1
flex: 1 1 0%
flex-auto
flex: 1 1 auto
flex-auto
flex: 0 1 auto
flex-none
flex: none
p-wrap
position relative al 100%
.border-1
border: 1px solid $c-middle-grey
.border-t
border-top: 1px solid $c-middle-grey
.border-b
border-bottom: 1px solid $c-middle-grey;
.border-l
border-left: 1px solid $c-middle-grey
.border-r
border-right: 1px solid $c-middle-grey;
.border-b2
border-bottom: 1px solid $c-primary
.border-t2
border-top: 1px solid $c-primary
.ov-scroll
scroll con touch
.scrollbar
cambiamos el background
.ov-custom
scroll personalizable
.cursor-pointer
Un cursor
.svg-iflex
descripcion
.svg-inline
descripcion
.hr
línea normal
.w-max
max-content
.hidden
display none important
.only-mobile
inline-block en mobile
.only-mobile-flex
.only-desktop
Visible Sólo en desktop a partir de sm
.only-desktop-flex
Flex en desktop a partir de sm
.flex-vcenter
centrado vertical, incluso si tenemos iconos
.video-cover
Posicionamiento mediante absolutes 50%
.bg-cover
Imagen centrada al medio con cover ❌
d-inline
inline-block
flex-1
flex: 1 1 0%
flex-auto
flex: 1 1 auto
flex-auto
flex: 0 1 auto
flex-none
flex: none
p-wrap
position relative al 100%
.border-1
border: 1px solid $c-middle-grey
.border-t
border-top: 1px solid $c-middle-grey
.border-b
border-bottom: 1px solid $c-middle-grey;
border-l
border-left: 1px solid $c-middle-grey
.border-r
border-right: 1px solid $c-middle-grey;
.border-b2
border-bottom: 1px solid $c-primary
.border-t2
border-top: 1px solid $c-primary
.ov-scroll
scroll con touch
.scrollbar
cambiamos el background
.ov-custom
scroll personalizable
.cursor-pointer
Un cursor
.svg-iflex
descripcion
.svg-inline
descripcion
.hr
línea normal
.w-max
max-content
.hidden
display none important
.only-mobile
inline-block en mobile
.only-mobile-flex
.only-desktop
Visible Sólo en desktop a partir de sm
.only-desktop-flex
Flex en desktop a partir de sm
.flex-vcenter
centrado vertical, incluso si tenemos iconos
.video-cover
Posicionamiento mediante absolutes 50%
.bg-cover
Imagen centrada al medio con cover ❌
d-inline
inline-block
flex-1
flex: 1 1 0%
flex-auto
flex: 1 1 auto
flex-auto
flex: 0 1 auto
flex-none
flex: none
p-wrap
position relative al 100%
.border-1
border: 1px solid $c-middle-grey
.border-t
border-top: 1px solid $c-middle-grey
.border-b
border-bottom: 1px solid $c-middle-grey;
.border-l
border-left: 1px solid $c-middle-grey
.border-r
border-right: 1px solid $c-middle-grey;
.border-b2
border-bottom: 1px solid $c-primary
.border-t2
border-top: 1px solid $c-primary
.ov-scroll
scroll con touch
.scrollbar
cambiamos el background
.ov-custom
scroll personalizable
.cursor-pointer
Un cursor
.svg-iflex
descripcion
.svg-inline
descripcion
.hr
línea normal
.w-max
max-content
.hidden
display none important
.only-mobile
inline-block en mobile
.only-mobile-flex
.only-desktop
Visible Sólo en desktop a partir de sm
.only-desktop-flex
Flex en desktop a partir de sm
.text-center
Centrado de texto
.text-left
Alineación izquierda
.text-right
Alineación derecha
.text-justify
Texto justificado
.bg-cover
Imagen centrada al medio con cover
.has-ellipsis
Imagen centrada al medio con cover
.video-cover
Imagen centrada al medio con cover
.reverse
.sm:reverse .md:reverse .lg:reverse
.bg-line
Imagen centrada al medio con cover
desde 0px col-xs
desde 768px col-sm
desde 992px col-md
desde 1280px col-lg
desde 1440px col-xl
col-xs-1
col-xs-2
col-xs-3
col-xs-4
col-xs-5
col-xs-6
col-xs-7
col-xs-8
col-xs-9
col-xs-10
col-xs-11
col-xs-12
mb-4
mb-8
mb-16
mb-24
mb-32
mb-40
mb-48
mb-56
mb-64
mb-72
pb-4
pb-8
pb-16
pb-24
pb-32
pb-40
pb-48
pb-56
pb-64
pb-72
MB-
MT-
MX-
MY-
MR-
ML-
PB-
PT-
PX-
PY-
PR-
PL-
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
1/24
12/24
@include ratio(16, 9);
.rat-main pt: 133.25%
.rat-2-3 pt: 150% --real , pero ahora falso
.rat-3-4 pt: 133.33333%%
.rat-1-1 pt: 100%
.rat-4-3 pt: 75%%
.rat-3-2 pt: 66.66667%
.rat-16-9pt: 56.25%
.rat-2-1 pt: 50%
.rat-21-9 pt:42.85714%
Inputs con prefijo
Links
List
Select
tabs
Tags
Banners
Componentes
Flexbox
list-breadcrumb
.select
.select.select-label
.select.select-size
.select.select-flat-no-icon
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum, porro.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum, porro.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum, porro.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum, porro.
banner warning .marketing-spot, Lorem ipsum dolor
banner warning .bg-warning , Lorem ipsum dolor
banner info .bg-info , Lorem ipsum dolor
banner valid .bg-success , Lorem ipsum dolor
banner alert .bg-alert , Lorem ipsum dolor
banner feel .bg-feel , Lorem ipsum dolor
Zapato tacón piel negro pulsera
Ref. 1412/950/800
Negro
89,95 €
59,95 €
89,95 €
Cantidad
Talla
Ver disponibilidad en tienda