Entregas en 48/72 hrs disponibles en España Peninsular

Page title

Base

Componente para título de página

Puede ir dentro de una sección o como componente independiente

  • Añadir la clase container en page-title__handler para limitar al ancho del contenedor
  • Añarid la clase page-title__big-title al h1, h2 o texto deseado para título principal

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Highlight

5 clases de fondos

  • highlight--first, highlight--second, highlight--third, highlight--fourth, highlight--fifth

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Imagent de fondo

Añadir page-title--bg-media al contenedor principal

Añadir una imagen al nivel del handler, si la imagen es oscura añadir el modificador highlight--dark para cambiar el color de los textos

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Contenido centrado

Añadir page-title--center al contenedor principal

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Botones

Garantía de botón

Botón por defecto

class="button"

Variantes de color

class="button button--***"

Variantes de forma

class="button button--wire"

Variantes de tamaño

class="button button--small"

Naked

class="button button--naked"

Floatings

Elemenos con position absoluta solidarios al primer padre ascendente con position relativa

Pueden colocarse como hijos de los siguientes elementos:

  • wave
  • wave__handler
  • flyer
  • flyer__floating

* Si no se ve en algunos casos revisar el z-index del elemento padre, el elemento ascendente debe terner asignado n z-index positivo.

El siguiente ejemplo tiene un elemento floating como texto y otro como imagen

Dummy

Lorem ipsum dolor

Vestibulum ut eros sit amet neque

Nullam sit amet viverra justo. Donec euismod nisi et est accumsan, nec pharetra orci tincidunt. Sed in lacus augue. Etiam ullamcorper ex id efficitur ullamcorper. Donec commodo suscipit metus ut consectetur. Etiam mattis urna quis sapien malesuada pharetra.

¡Delicioso!

Versión con flechas

Clases:

floating: contenedor

floating--top-left: modificador de position

  • floating--top-left
  • floating--top-right
  • floating--bottom-left
  • floating--bottom-right
  • floating--center-top
  • floating--center-bottom
  • floating--center-left
  • floating--center-right

floating--arrow: estilos generales para flechas

floating--arrow-top-left: posición de la flecha

  • floating--arrow-top-left
  • floating--arrow-top-right
  • floating--arrow-bottom-left
  • floating--arrow-bottom-right
  • floating--arrow-center-top
  • floating--arrow-center-bottom
  • floating--arrow-center-left
  • floating--arrow-center-right

floating--arrow-45deg: rotar la flecha

  • floating--arrow-45deg
  • floating--arrow-45deg-n
  • floating--arrow-90deg
  • floating--arrow-90deg-n
  • floating--arrow-180deg
  • floating--arrow-180deg-n

floating--arrow-first: color de la flecha

  • floating--arrow-white
  • floating--arrow-first
  • floating--arrow-second
  • floating--arrow-third
  • floating--arrow-fourth
  • floating--arrow-fifth

floating--arrow-1: tipo de flecha

  • floating--arrow-1
  • floating--arrow-1-rev
  • floating--arrow-2
  • floating--arrow-2-rev
  • floating--arrow-3
  • floating--arrow-3-rev
  • floating--arrow-4
  • floating--arrow-4-rev
  • floating--arrow-5
  • floating--arrow-5-rev
top-left
top-right
bottom-left
bottom-right
center-top
center-bottom
center-left
center-right

Waves

Versión con flechas

Clases:

wave: contenedor

wave--highlight-first: modificador de color

  • wave--highlight-first
  • wave--highlight-second
  • wave--highlight-third
  • wave--highlight-fourth
  • wave--highlight-fifth

wave--shape-1-upt: modificador de forma

  • wave--shape-1-up
  • wave--shape-1-down
  • wave--shape-2-up
  • wave--shape-2-down
  • wave--shape-3-up
  • wave--shape-3-down
  • wave--shape-4-up
  • wave--shape-4-down

wave--padding-1-up: modificador interior de padding en los casos dónde no hay "shape-up" o "shape-down"

  • wave--padding-1-up
  • wave--padding-1-down
  • wave--padding-2-up
  • wave--padding-2-down
  • wave--padding-3-up
  • wave--padding-3-down
  • wave--padding-4-up
  • wave--padding-4-down

wave--margin-1-up: modificador exterior de margin para evitar el "overflow" sobre los elementos anteriores y/o posteriores

  • wave--margin-1-up
  • wave--margin-1-down
  • wave--margin-2-up
  • wave--margin-2-down
  • wave--margin-3-up
  • wave--margin-3-down
  • wave--margin-4-up
  • wave--margin-4-down

Wave big title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Columnas

De 1 a 6 columnas

Clases:

  • colgap--xs-1
  • colgap--xs-2
  • colgap--xs-3
  • colgap--xs-4
  • colgap--xs-5
  • colgap--xs-6

Responsive

  • colgap--xs-*
  • colgap--s-*
  • colgap--m-*
  • colgap--l-*
  • colgap--xl-*
Colgap item
Colgap item
Colgap item
Colgap item
Colgap item
Colgap item
Colgap item
Colgap item
Colgap item
Colgap item
Colgap item
Colgap item
0
    Carrito 0 productos
    Tu carrito está vacíoVuelve a la tienda