Página de estilos

Paleta de colores mínima. Puede haber colores adicionales para completar toda la paleta.
  • Principal. Es el color más representativo de la marca. Preferiblemente que contraste bien con el blanco o colores claros
  • Secundario. Segundo color representativo de la marca. (OPCIONAL)
  • Énfasis. Se usa para detalles. (OPCIONAL)
  • Texto. Es el color que llevará por defecto el texto en general, ya sea texto corrido, encabezados, etc.
  • Enlaces. Es el color que tendrán los enlaces en el contexto de texto corrido sobre fondo claro. Normalmente será el mismo que el color principal si contrasta bien
  • Claro. Es el color que llevará por defecto el texto en general, ya sea texto corrido, encabezados, etc.
  • Oscuro. Es el color que llevará por defecto el texto en general, ya sea texto corrido, encabezados, etc.
  • Header claro. El color claro de la cabecera que contrastará con el oscuro. Puede ser el mismo que el claro
  • Header oscuro. El color oscuro de la cabecera que contrastará con el claro. Puede ser el mismo que el oscuro
  • Botón claro. El color claro de los botones que contrastará con el oscuro. Puede ser el mismo que el claro
  • Botón oscuro. El color oscuro de los botones que contrastará con el claro. Puede ser el mismo que el oscuro
Texto corrido normal

Esto es un widget de texto. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus maximus vulputate diam id consectetur. Ut sit amet pellentesque tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ac sagittis erat, id dapibus enim. Aenean ut tincidunt elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus maximus vulputate diam id consectetur. Ut sit amet pellentesque tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ac sagittis erat, id dapibus enim. Aenean ut tincidunt elit.

Encabezados. Se utilizan sobre todo dentro de textos extensos (publicación de blog, por ejemplo)

H1: Esto es un encabezado con etiqueta H1, Esto es un encabezado con etiqueta H1

H2: Esto es un encabezado con etiqueta H2, Esto es un encabezado con etiqueta H2

H3: Esto es un encabezado con etiqueta H3, Esto es un encabezado con etiqueta H3

H4: Esto es un encabezado con etiqueta H4, Esto es un encabezado con etiqueta H4, Esto es un encabezado con etiqueta H4

H5: Esto es un encabezado con etiqueta H5, Esto es un encabezado con etiqueta H5, Esto es un encabezado con etiqueta H5
H6: Esto es un encabezado con etiqueta H6, Esto es un encabezado con etiqueta H6, Esto es un encabezado con etiqueta H6, Esto es un encabezado con etiqueta H6
Título hero: normalmente se usará sólo en la home, en la zona más importante de todo el sitio web

Título hero: Esto es un estilo de encabezado personalizado. Quisque mauris ipsum

Título 1: Títulos interiores con relevancia principal

Título 1: Esto es un estilo de encabezado personalizado. Quisque mauris ipsum, fermentum et dignissim

Título 2: Títulos interiores con relevancia menor al título 1

Título 2: Esto es un estilo de encabezado personalizado. Quisque mauris ipsum, fermentum et dignissim

Título 3: Títulos interiores con relevancia menor al título 2

Título 3: Esto es un estilo de encabezado personalizado. Quisque mauris ipsum, fermentum et dignissim

Párrafo destacado 1: Cuando el texto sea más extenso y/o esté por debajo de un título

Esto es un encabezado con estilo "Párrafo destacado 1". Quisque mauris ipsum, fermentum et dignissim eu, dictum sit amet neque.

Párrafo destacado 2: Cuando el texto sea más extenso y/o esté por debajo de un título. Tamaño inferior al párrafo destacado 1

Esto es un encabezado con estilo "Párrafo destacado 2". Quisque mauris ipsum, fermentum et dignissim eu, dictum sit amet neque.

Subtítulo que suele ir en mayúsculas y con espacio entre letras

Esto es un encabezado con estilo "Subtítulo"

Botón por defecto. Mismo color que el texto corrido normalmente
Botón por defecto
fc-boton-simple
Botones sobre fondo claro. Normal, con relleno y simple
fc-boton-oscuro
fc-boton-filled
fc-boton-simple
Botones sobre fondo oscuro. Normal, con relleno, con relleno y simple
fc-boton-claro
fc-boton-filled-claro
fc-boton-simple
Tamaños diferentes
fc-boton-s
Tamaño normal
fc-boton-l
fc-boton-xl
Botones especiales
fc-boton-effect
fc-boton-flecha
fc-boton-simple
fc-boton-filled
Bloque por defecto con fondo claro

Añade aquí tu texto de cabecera

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.

Bloque con fondo oscuro. Los enlaces cambian al color claro

Añade aquí tu texto de cabecera

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.

Esto es un encabezado con etiqueta DIV. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus maximus vulputate diam id consectetur. Ut sit amet pellentesque tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ac sagittis erat, id dapibus enim. Aenean ut tincidunt elit.

Esto es un encabezado con etiqueta P. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus maximus vulputate diam id consectetur. Ut sit amet pellentesque tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ac sagittis erat, id dapibus enim. Aenean ut tincidunt elit.

Esto es un encabezado con etiqueta SPAN. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus maximus vulputate diam id consectetur. Ut sit amet pellentesque tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ac sagittis erat, id dapibus enim. Aenean ut tincidunt elit.
Botón medio
Botón grande
Botón Extra grande
Jr Logo
Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.