Estilos

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

---

Tipografía

Rúbrica uno

Rúbrica dos

Rúbrica tres

Rúbrica cuatro

Rúbrica cinco

Rúbrica seis

ENCABEZAMIENTO H1

ENCABEZAMIENTO H2

Encabezamiento H3

Encabezamiento H4

H5 RÚBRICA

Encabezamiento H6

Al parecer, habíamos alcanzado una gran altura en la atmósfera, pues el cielo era de un negro mortecino y las estrellas habían dejado de centellear. Por la misma ilusión que eleva el horizonte del mar hasta el nivel del espectador en la ladera de una colina, la nube de marta que había debajo se extendía y el coche parecía flotar en medio de una inmensa esfera oscura, cuya mitad superior estaba salpicada de plata. Mirando hacia el oscuro golfo que había debajo, pude ver una luz rojiza que se colaba por una grieta entre las nubes.

Reciba nuestro boletín y descubra nuestras historias, colecciones y sorpresas.

• Nuevo en
• Rebajas y ofertas especiales
• Mujeres
• Hombres
• Zapatos
• Bolsos y accesorios
• Mejores marcas
• Lookbook

• Lorem ipsum dolor sit amet
• Conse ctetur adipisicing elit sed do
• Eiusmod temporalmente
• 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% elastán

1. Tejido 1: 75% poliéster, 20% viscosa, 5% elastán
2. Tejido 2: 100% poliéster,Forro: 100% poliéster
3. Tejido 3: 100% poliéster

Rúbricas RTE

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

• Fuerte
• Énfasis
• Enlace en línea
• Huelga
• ^Sup

Blockquotes

Eu feugiat nulla facilisis at 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 option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

El autor de la cita

Listas

---

Tablas sensibles

---

Formularios

Elementos de formulario por defecto

Etiqueta horizontal Etiqueta horizontal 2 -- Elige -- Opción 1 Opción 2 Opción 3 Etiqueta de casilla de verificación

Etiquetas invisibles

Añadir una clase de etiqueta-oculta a una etiqueta para ocultarla visualmente y mantenerla accesible para los lectores de pantalla. Utilice la función marcador de posición como etiqueta visible.

Nota: En marcador de posición sólo funciona en IE10+, por lo que las etiquetas invisibles están desactivadas en IE9 e inferiores.

Nombre Apellido Correo electrónico

---

Formularios verticales (cliente, contacto, etc.)

No existen estilos para esto en Slate, pero se usan en la mayoría de los temas. Estiliza los elementos dentro de un form/div con la clase `form-vertical` para ver tus estilos aquí.

No se puede añadir una clase directamente a la mayoría de los elementos del formulario líquido (p. ej. {% formulario 'contacto' %}). En su lugar, envuelva el formulario en un div con la clase .form-vertical para conseguir el mismo efecto.

Campo de texto Marcador de posición Campo para discapacitados Etiqueta Campo de texto (Error) Campo de texto (Éxito) Seleccionar campo -- Elige -- Opción 1 Opción 2 Opción 3

Casillas de verificación

Casilla de verificación
Casilla de verificación
Casilla de verificación

Radios

Opción 1
Opción 1
Opción 1

Área de texto Campo de archivo

Notas y errores de forma

No existen estilos de nota en Slate pero se añaden comúnmente para manejar errores de formulario. Ejemplos de estilos:

    .note {
      padding: 20px;
      border: 1px solid #ccc;
    }

    .note--success {
      border-color: green;
      background-color: lightgreen;
    }

    .note--error {
      border-color: red;
      background-color: lightred;
    }
  

Ejemplo de uso:

    {% if form.posted_successfully? %}
    <p class="note note--success">Thanks for submitting the form</p>
    {% endif %}

    {% if form.errors %}
    <div class="note note--error">
    {{ form.errors | default_errors }}
    </div>
    {% endif %}
  

---

Botones

Botón predeterminado

Botón por defecto (sin valores por defecto)

Botón desactivado

Botón por defecto desactivado

Botón ancho

Botón ancho por defecto

---

Elementos varios

Normas horizontales

No hay valores por defecto hr estilos en Slate, pero estos son los más comunes para añadir.

Por defecto hr

---

Invisible hr.hr--clear

---