Stili

Questa pagina mostra 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 nero come la morte e le stelle avevano smesso di brillare. Con la stessa illusione che innalza 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 d'argento. Guardando verso il buio del golfo sottostante, potei scorgere una luce rossastra che filtrava da una fessura tra le 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

RTE rubrica uno

RTE rubrica due

RTE rubrica tre

RTE rubrica quattro

RTE rubrica cinque
RTE rubrica sei

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

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

ul (predefinito)
  • Uno
  • Due
  • Tre
  • Quattro
Pallottola numerica ol (predefinito)
  1. Uno
  2. Due
  3. Tre
  4. Quattro
Elenchi di bambini (per adattarli agli stili RTE)
  • Uno
  • Due
  • Tre, con elenco dei bambini
    • Prima voce secondaria
    • Seconda sottovoce
    • Terzo elemento secondario, con elenco di figli
      • Articolo di terzo livello
      • Un altro elemento di terzo livello
  • Quattro

Tabelle reattive

ORDINE DATA STATO DI PAGAMENTO STATO DI ADEMPIMENTO TOTALE
#1001 22 dicembre 2015 Autorizzato Incompiuto $43.03
#1002 23 dicembre 2015 Autorizzato Incompiuto $44.03
#1003 24 dicembre 2015 Autorizzato Incompiuto $45.03
#1004 25 dicembre 2015 Autorizzato Incompiuto $46.03
#1005 26 dicembre 2015 Autorizzato Incompiuto $47.03
#1006 27 dicembre 2015 Autorizzato Incompiuto $48.03

Moduli

Elementi predefiniti del modulo

Etichette invisibili

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

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


Moduli verticali (clienti, contatti, ecc.)

Non esistono stili per questo in Slate, ma sono utilizzati nella maggior parte dei temi. Gli elementi di stile all'interno di un form/div con la classe `form-vertical` sono visualizzati 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.

Caselle di controllo

Radio

Note ed errori di forma

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

    .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 %}
  
Questa è una nota standard
Questo è un messaggio di successo

Si tratta di un messaggio di errore.

  • I proiettili possono offrire una maggiore comprensione dell'errore

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