Stili

Questa pagina serve a mostrare gli stili per gli elementi standard della pagina, come la tipografia, gli elementi dei moduli e le icone. Questi sono codificati in un file di modello di pagina alternativo, chiamato pagina.stili.liquido.

---

Tipografia

Prima voce

Rubrica due

Rubrica tre

Rubrica 4

Rubrica cinque

Rubrica sei

RUBRICA H1

RUBRICA H2

Intestazione H3

Intestazione H4

RUBRICA H5

H6 Intestazione

Sembrava che avessimo raggiunto una grande altezza nell'atmosfera, perché il cielo era di un nero morto e le stelle avevano smesso di scintillare. Per la stessa illusione che solleva l'orizzonte del mare al livello dello spettatore su una collina, la nuvola di zibellino sottostante era sparpagliata e l'auto sembrava galleggiare al centro di un'immensa sfera scura, la cui metà superiore era cosparsa di argento. Guardando giù nell'oscuro golfo sottostante, potevo vedere una luce rossastra che filtrava attraverso una fenditura nelle nuvole.

Ricevi la nostra newsletter e scopri le nostre storie, collezioni e sorprese.

• Nuovo In
• Saldi e offerte speciali
• Donne
• Uomini
• Scarpe
• Borse e accessori
• I migliori marchi
• Lookbook

• Lorem ipsum dolor sit amet
• Conse ctetur adipisicing elit sed do
• Eiusmod temporaneo
• Incididunt ut labore et dolore magna
• Ut enim ad minim veniam

• Tessuto 1: 100% poliestere
• Tessuto 2: 100% poliestere, Fodera: 100% poliestere
• Tessuto 3: 75% poliestere, 20% viscosa, 5% elastan

1. Tessuto 1: 75% poliestere, 20% viscosa, 5% elastan
2. Tessuto 2: 100% poliestere, Fodera: 100% poliestere
3. Tessuto 3: 100% poliestere

Rubriche RTE

Paragrafi

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.

Stili di tipo

• Forte
• Enfasi
• Collegamento in linea
• Sciopero
• ^Sup

Citazioni a blocchi

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.

L'autore della citazione

Elenchi

---

Tabelle reattive

---

Moduli

Elementi predefiniti del modulo

Etichetta orizzontale Etichetta orizzontale 2 -- Scegliere... Opzione 1 Opzione 2 Opzione 3 Etichetta della casella di controllo

Etichette invisibili

Aggiungere una classe di etichetta-nascosta a un'etichetta per nasconderla visivamente, pur mantenendola accessibile agli screen reader. Utilizzate il pulsante segnaposto come etichetta visibile.

Nota: Il segnaposto funziona solo in IE10+, quindi le etichette invisibili sono disabilitate in IE9 e successivi.

Nome Cognome Email

---

Moduli verticali (clienti, contatti, ecc.)

Non esistono stili per questo in Slate, ma sono utilizzati nella maggior parte dei temi. Si possono inserire elementi all'interno di un form/div con la classe `form-vertical` per vedere gli stili qui.

Non è possibile aggiungere una classe direttamente alla maggior parte degli elementi del modulo liquido (ad es. {% modulo 'contatto' %}). Invece, avvolgere il modulo in un div con la classe .modulo-verticale per ottenere lo stesso effetto.

Campo di testo Segnaposto Campo disabilitato Etichetta Campo di testo (errore) Campo di testo (successo) Seleziona il campo -- Scegliere... Opzione 1 Opzione 2 Opzione 3

Caselle di controllo

Campo casella di controllo
Campo casella di controllo
Campo casella di controllo

Radio

Opzione1
Opzione1
Opzione1

Area di testo Campo file

Note ed errori di forma

Non esistono stili di nota in Slate, ma vengono comunemente aggiunti per gestire gli errori dei moduli. Stili di esempio:

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

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

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

Esempio di utilizzo:

    {% 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 %}
  

---

Pulsanti

Pulsante predefinito

Pulsante predefinito (nessuna impostazione predefinita)

Pulsante disattivato

Pulsante predefinito disabilitato

Pulsante largo

Pulsante predefinito ampio

---

Elementi vari

Regole orizzontali

Non ci sono impostazioni predefinite hr in Slate, ma questi sono quelli più comuni da aggiungere.

Predefinito hr

---

Invisibile hr.hr-chiaro

---