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
- Mujeres
- Hombres
- Zapatos
- Bolsos & Accesorios
- Las mejores marcas
- Lookbook
- Lorem ipsum dolor sit amet
- Conse ctetur adipisicing elit sed do
- Eiusmod temporal
- 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
- Tejido 1: 75% poliéster, 20% viscosa, 5% elastano
- Tejido 2: 100% poliéster.Forro: 100% poliéster.
- 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
- Fuerte
- énfasis
- Enlace en línea
- Huelga
- Sup
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
|
|
Viñeta numérica
|
|
Listas de niños (para que coincidan con los estilos RTE) |
|
Tablas receptivas
| PEDIR | FECHA | ESTADO DE PAGO | ESTADO DE CUMPLIMIENTO | TOTAL |
|---|---|---|---|---|
| #1001 | 22 diciembre 2015 | Autorizado | Incumplido | $43.03 |
| #1002 | 23 diciembre 2015 | Autorizado | Incumplido | $44.03 |
| #1003 | 24 diciembre 2015 | Autorizado | Incumplido | $45.03 |
| #1004 | 25 diciembre 2015 | Autorizado | Incumplido | $46.03 |
| #1005 | 26 diciembre 2015 | Autorizado | Incumplido | $47.03 |
| #1006 | 27 diciembre 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: El 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.
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 %}
Este es un mensaje de error.
- Las viñetas pueden ofrecer más información sobre el error
Botones
Botón predeterminado (sin valores predeterminados)
Botón predeterminado desactivado
Elementos varios
Reglas horizontales
No hay defecto hr estilos en Slate, pero estos son comunes para agregar.
Predeterminado hr
Invisible hr.hr--clear
