Styles

Cette page est là pour montrer les styles des éléments de page standard tels que la typographie, les éléments de formulaire et les icônes. Ceux-ci sont codés en dur dans un autre fichier de modèle de page, nommé page.styles.liquid.


Typographie

En tête

Titre deux

Titre trois

Titre quatre

Titre cinq
Titre six

EN-TÊTE H1

EN-TÊTE H2

H3 rubrique

H4 rubrique

EN-TÊTE H5
H6 rubrique

Apparemment, nous avions atteint une grande hauteur dans l'atmosphère, car le ciel était d'un noir mort et les étoiles avaient cessé de scintiller. Par la même illusion qui élève l'horizon de la mer au niveau du spectateur à flanc de colline, le nuage de sable en dessous a été bombé, et la voiture a semblé flotter au milieu d'une immense sphère sombre, dont la moitié supérieure était parsemée de argent. Regardant vers le bas dans le golfe sombre ci-dessous, je pouvais voir une lumière vermeil couler à travers une faille dans les nuages.

Recevez notre newsletter et découvrez nos histoires, collections et surprises.

  • Nouveautés
  • Vente et offres spéciales
  • Femme
  • Homme
  • Chaussures
  • Sacs et accessoires
  • Top Marques
  • 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
  • Tissu 1: 100% polyester
  • Tissu 2: 100% polyester, doublure: 100% polyester
  • Tissu 3: 75% polyester, 20% viscose, 5% élasthanne
  1. Tissu 1: 75% polyester, 20% viscose, 5% élasthanne
  2. Tissu 2: 100% polyester, doublure: 100% polyester
  3. Tissu 3: 100% polyester

En-têtes RTE

RTE en tête

RTE en tête deux

RTE rubrique XNUMX

RTE rubrique quatre

RTE rubrique XNUMX
RTE rubrique six

Paragraphes

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 exercice ullamcorper.

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

Styles de caractères

citations de bloc

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'auteur de la citation

Liste

ul (Par défaut)
  • Un
  • Deux
  • Trois
  • Quatre
Puce numérique ol (Par défaut)
  1. Un
  2. Deux
  3. Trois
  4. Quatre
Listes enfants (pour correspondre aux styles RTE)
  • Un
  • Deux
  • Trois, avec la liste des enfants
    • Premier sous-élément
    • Deuxième sous-élément
    • Troisième sous-élément, avec liste enfant
      • Objet de troisième niveau
      • Un autre élément de troisième niveau
  • Quatre

Tables réactives

COMMANDER DATES STATUT DE PAIEMENT STATUT PLEINEMENT TOTAL
#1001 le 22 décembre 2015 Autorisé Unfulfilled $43.03
#1002 le 23 décembre 2015 Autorisé Unfulfilled $44.03
#1003 le 24 décembre 2015 Autorisé Unfulfilled $45.03
#1004 le 25 décembre 2015 Autorisé Unfulfilled $46.03
#1005 le 26 décembre 2015 Autorisé Unfulfilled $47.03
#1006 le 27 décembre 2015 Autorisé Unfulfilled $48.03

Formulaires

Éléments de formulaire par défaut

Étiquettes invisibles

Ajouter une classe de label-hidden à une étiquette pour la masquer visuellement, tout en la gardant accessible aux lecteurs d'écran. Utilisez le placeholder attribut comme votre étiquette visible.

Note : Le placeholder L'attribut ne fonctionne que dans IE10 +, les étiquettes invisibles sont donc désactivées dans IE9 et les versions antérieures.


Formulaires verticaux (client, contact, etc.)

Aucun style pour cela n'existe dans Slate, mais est utilisé dans la plupart des thèmes. Style des éléments à l'intérieur d'un formulaire / div avec la classe `form-vertical` pour voir vos styles ici.

Vous ne pouvez pas ajouter une classe directement à la plupart des éléments de forme liquide (par exemple {% form 'contact' %}). Au lieu de cela, enveloppez le formulaire dans un div avec la classe .form-vertical pour obtenir le même effet.

Les cases à cocher

Les radios

Notes et erreurs de formulaire

Aucun style de note n'existe dans Slate, mais est généralement ajouté pour gérer les erreurs de formulaire. Exemples de styles:

 .note {remplissage: 20px; bordure: 1px solide #ccc; } .note - success {border-color: green; couleur de fond: vert clair; } .note - erreur {couleur de la bordure: rouge; couleur de fond: lightred; }
 

Exemple d'utilisation:

 {% if form.posted_successfully? %} Merci d'avoir soumis le formulaire {% endif%} {% if form.errors%} {{form.errors | default_errors}} {% fin si %}
 
Ceci est une note standard
C'est un message de réussite

Ceci est un message d'erreur.

  • Les puces peuvent offrir plus d'informations sur l'erreur

Boutons

bouton par défaut

Bouton par défaut (pas de valeur par défaut)

Bouton désactivé

Bouton par défaut désactivé

Bouton large

Bouton large par défaut


Éléments divers

Règles horizontales

Il n'y a pas de valeur par défaut hr styles dans Slate, mais ceux-ci sont courants à ajouter.

Défaut hr


Invisible hr.hr--clear


Ceci est un avis de cookie standard que vous pouvez facilement adapter ou désactiver à votre guise dans l’administrateur. Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site.

Pré-chargeur
Anglais
Anglais