Estilos

Esta página está aquí para mostrar estilos para elementos de página estándar, como tipografía, elementos de formulario e íconos. Estos están codificados en un archivo de plantilla de página alternativo, llamado page.styles.liquid.


Tipografía

Encabezando uno

Encabezado dos

Encabezado tres

Encabezado cuatro

Título cinco
Encabezado seis

ENCABEZAMIENTO H1

ENCABEZAMIENTO H2

H3 Rubro

H4 Rubro

ENCABEZAMIENTO H5
H6 Rubro

Aparentemente habíamos alcanzado una gran altura en la atmósfera, porque el cielo estaba de un negro muerto y las estrellas habían dejado de brillar. Por la misma ilusión que eleva el horizonte del mar hasta el nivel del espectador en una ladera, la nube de marta de abajo se desvaneció y el automóvil pareció flotar en medio de una inmensa esfera oscura, cuya mitad superior estaba sembrada de plata. Mirando hacia el oscuro golfo de abajo, pude ver una luz rojiza fluyendo a través de una grieta en las nubes.

Reciba nuestra newsletter y descubra nuestras historias, colecciones y sorpresas.

  • NOVEDADES
  • Venta y ofertas especiales
  • Mujer
  • Hombre
  • Zapatos
  • Bolsos & Accesorios
  • Las mejores marcas
  • Lookbook
  • Lorem ipsum dolor sit amet
  • Conse ctetur adipisicing elit sed do
  • Eiusmod tempor
  • Incididunt ut labore et dolore magna
  • Ut enim ad minim veniam
  • Tejido 1: 100% poliéster
  • Tejido 2: 100% poliéster.Forro: 100% poliéster.
  • Tejido 3: 75% poliéster, 20% viscosa, 5% elastano
  1. Tejido 1: 75% poliéster, 20% viscosa, 5% elastano
  2. Tejido 2: 100% poliéster.Forro: 100% poliéster.
  3. Tejido 3: 100% poliéster

Encabezados RTE

RTE rumbo uno

RTE encabezado dos

RTE título tres

RTE título cuatro

RTE título cinco
RTE título seis

Párrafos

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

Estilos de tipografía

Blockquotes

Eu feugiat nulla facilisis en vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend opción congue nihil imperdiet doming id quod mazim placerat facer possim assum.

El autor de la cita

Listas

ul (Por defecto)
  • Una
  • Dos
  • Tres
  • Las cuatro
Viñeta numérica ol (Por defecto)
  1. Una
  2. Dos
  3. Tres
  4. Las cuatro
Listas de niños (para que coincidan con los estilos RTE)
  • Una
  • Dos
  • Tres, con lista de niños
    • Primer subelemento
    • Segundo subelemento
    • Tercer subelemento, con lista de niños
      • Elemento de tercer nivel
      • Otro elemento de tercer nivel
  • Las cuatro

Tablas receptivas

PEDIDO FECHA ESTADO DE PAGO ESTADO DE CUMPLIMIENTO TOTAL
#1001 22 de diciembre de 2015 Autorizado Incumplido $43.03
#1002 23 de diciembre de 2015 Autorizado Incumplido $44.03
#1003 24 de diciembre de 2015 Autorizado Incumplido $45.03
#1004 25 de diciembre de 2015 Autorizado Incumplido $46.03
#1005 26 de diciembre de 2015 Autorizado Incumplido $47.03
#1006 27 de diciembre de 2015 Autorizado Incumplido $48.03

Formularios

Elementos de formulario predeterminados

Etiquetas invisibles

Agregar una clase de label-hidden a una etiqueta para ocultarlo visualmente, mientras se mantiene accesible para los lectores de pantalla. Utilizar el placeholder atributo como su etiqueta visible.

Nota: La placeholder El atributo solo funciona en IE10 +, por lo que las etiquetas invisibles están deshabilitadas en IE9 y a continuación.


Formas verticales (cliente, contacto, etc)

No existen estilos para esto en Slate, pero se utilizan en la mayoría de los temas. Elementos de estilo dentro de un formulario / div con la clase `formulario-vertical` para ver sus estilos aquí.

No puede agregar una clase directamente a la mayoría de los elementos de forma líquida (p. Ej. {% form 'contact' %}). En su lugar, envuelva el formulario en un div con la clase .form-vertical para lograr el mismo efecto.

Las casillas de verificación

Radios

Notas y errores de formulario

No existen estilos de nota en Slate, pero se agregan comúnmente para manejar errores de forma. Estilos de ejemplo:

 .note {relleno: 20px; borde: 1px sólido #ccc; } .note - éxito {color del borde: verde; color de fondo: verde claro; } .note - error {color del borde: rojo; color de fondo: rojo claro; }
 

Ejemplo de uso:

 {% if form.posted_successfully? %} Gracias por enviar el formulario {% endif%} {% if form.errors%} {{form.errors | default_errors}} {% terminara si %}
 
Esta es una nota estándar
Este es un mensaje de éxito

Este es un mensaje de error.

  • Las viñetas pueden ofrecer más información sobre el error

Botones

Botón predeterminado

Botón predeterminado (sin valores predeterminados)

Botón desactivado

Botón predeterminado desactivado

Botón ancho

Botón ancho predeterminado


Elementos varios

Reglas horizontales

No hay defecto hr estilos en Slate, pero estos son comunes para agregar.

Predeterminado hr


Invisible hr.hr--clear


Este es un aviso estándar de cookies que puede adaptar o deshabilitar fácilmente como desee en el administrador. Utilizamos cookies para asegurarnos de brindarle la mejor experiencia en nuestro sitio web.

Precargador
Inglés
Inglés