Design system


Taille de texte H1
Fluide : 32px – 2rem (mobile) / 48px – 3rem (desktop)Variable CSS : var(–font-size-h1)

Taille de texte H2
Fluide : 28px – 1.75rem (mobile) / 40px – 2.5rem (desktop)Variable CSS : var(–font-size-h2)

Taille de texte H3
Fluide : 24px – 1.5rem (mobile) / 32px – 2rem (desktop)Variable CSS : var(–font-size-h3)

Taille de texte H4
Fluide : 20px – 1.25rem (mobile) / 24px – 1.5rem (desktop)Variable CSS : var(–font-size-h4)

Taille de texte large
18px – 1.125remVariable CSS : var(–font-size-large)

Taille de texte par défaut
16px – 1remVariable CSS : var(–font-size-default)

Taille de texte small
14px – 0.875remVariable CSS : var(–font-size-small)

Texte de texte x-small
12px – 0.75remVariable CSS : var(–font-size-x-small)


Éléments de base


Titre de niveau 1 par défaut

Titre de niveau 2 par défaut

Titre de niveau 3 par défaut

Titre de niveau 4 par défaut

  • Bloc à utiliser
    core/heading (de H1 à H4)
  • Titre en 2 parties
    Utiliser le gras (si partie qui diffère doit avoir plus d’importance niveau SEO), ou l’italique
  • Styles
    Entre 1 et 3 styles, applicables sur tous les niveaux de titre (avec redimensionnement proportionnel d’une icône éventuelle)
  • Alignement
    Gauche ou centré, disponible depuis l’éditeur

Titre de niveau 1

Titre de niveau 1
en deux parties

Titre de niveau 1 avec style 1

Titre de niveau 1 avec style 1
en deux parties

  • Bloc à utiliser
    core/heading (H1)
  • Taille de base
    32px – 2rem (mobile)
    48px – 3rem (desktop)

Titre de niveau 2

Titre de niveau 2
en deux parties

Titre de niveau 2 avec style 1

Titre de niveau 2 avec style 1
en deux parties

  • Bloc à utiliser
    core/heading (H2)
  • Taille de base
    28px – 1.75rem (mobile)
    40px – 2.5rem (desktop)

Titre de niveau 3

Titre de niveau 3
en deux parties

Titre de niveau 3 avec style 1

Titre de niveau 3 avec style 1
en deux parties

  • Bloc à utiliser
    core/heading (H3)
  • Taille de base
    24px – 1.5rem (mobile)
    32px – 2rem (desktop)

Titre de niveau 4

Titre de niveau 4
en deux parties

Titre de niveau 4 avec style 1

Titre de niveau 4 avec style 1
en deux parties

  • Bloc à utiliser
    core/heading (H4)
  • Taille de base
    20px – 1.25rem (mobile)
    24px – 1.5rem (desktop)

  • Une liste à puce
  • avec plusieurs éléments
    • des enfants
      • jusqu’à 3 niveaux
      • pour limiter l’indentation
  • et retour au 1er niveau
  • Une liste à puce style 1
  • avec plusieurs éléments
    • des enfants
      • jusqu’à 3 niveaux
      • pour limiter l’indentation
  • et retour au 1er niveau
  • Bloc à utiliser
    core/list (UL – à puce)
  • Taille de base
    Par défaut : 16px
  • Styles
    Entre 1 et 2 styles, applicables sur les listes à puces et numérotées
  • Indentation
    Conserver la même indentation du texte pour toutes les listes (par défaut : 25px), sur un maximum de 3 niveaux

  1. Une liste à puce
  2. avec plusieurs éléments
    1. des enfants
      1. jusqu’à 3 niveaux
      2. pour limiter l’indentation
  3. et retour au 1er niveau
  1. Une liste à puce style 1
  2. avec plusieurs éléments
    1. des enfants
      1. jusqu’à 3 niveaux
      2. pour limiter l’indentation
  3. et retour au 1er niveau
  • Bloc à utiliser
    core/list (OL – numérotée)
  • Taille de base
    Par défaut : 16px
  • Styles
    Entre 1 et 2 styles, applicables sur les listes à puces et numérotées

  • Bloc à utiliser
    core/buttons (enfant : core/button)
  • Taille de base
    Par défaut : 16px
  • Styles
    Entre 1 et 3 styles
  • Liste d’icônes
    À définir
    Par défaut : recherche, site web, téléphone, email
  • Position de l’icône
    Gauche ou droite (Par défaut : gauche)

Quisque fermentum accumsan felis, bibendum elementum arcu pretium non. Cras nec leo turpis. Sed id lorem ut nunc imperdiet venenatis. Quisque malesuada turpis ac bibendum pharetra. Suspendisse aliquet justo purus, ac commodo tortor aliquam id. Sed nibh justo, laoreet in iaculis bibendum, venenatis vitae orci.

Quisque fermentum accumsan felis, bibendum elementum arcu pretium non. Cras nec leo turpis. Sed id lorem ut nunc imperdiet venenatis ! Elementum arcu pretium non. Cras nec leo turpis. Sed id lorem ut nunc imperdiet venenatis

  • Bloc à utiliser
    core/paragraph
  • Taille de base
    Par défaut : 16px
  • Style unique

  • Bloc à utiliser
    ws-library/ws-documents
  • Taille de base
    Par défaut : 16px
  • Style unique

Cours de ski
© Gilles Baron

Cours de ski avec soleil

Marc DURAND

  • Bloc à utiliser
    ws-library/ws-image
  • Taille des crédits
    12px (0.75rem)
  • Taille de la légende
    Par défaut : 16px
  • Ratio (en mode rogné)
    3:2
  • Options
    Ouverture en lightbox
    Afficher l’image en entier (ratio d’origine)
  • Style unique

La légende de ma vidéo
  • Bloc à utiliser
    ws-library/ws-video
  • Taille de la légende
    Par défaut : 16px
  • Ratio
    16:9
  • Style unique

Organisez-vous des cours de ski pour débutants ?

Nullam non consequat leo. Nam eu orci quam. Ut metus diam, facilisis et blandit nec, viverra eu magna.

Quels types de forfaits de ski proposez-vous ?

Nullam non consequat leo. Nam eu orci quam. Ut metus diam, facilisis et blandit nec, viverra eu magna. Nam accumsan rutrum enim quis malesuada. Proin eu elementum nibh. Aliquam odio ante, imperdiet convallis dolor in, pretium cursus neque. Nam efficitur placerat congue.

Peut-on faire du VTT sur les pistes de ski en été ?

Nullam non consequat leo. Nam eu orci quam. Ut metus diam, facilisis et blandit nec, viverra eu magna. Nam accumsan rutrum enim quis malesuada. Proin eu elementum nibh. Aliquam odio ante, imperdiet convallis dolor in, pretium cursus neque. Nam efficitur placerat congue.

Curabitur blandit libero lorem ?

Nullam et turpis venenatis, sagittis risus sit amet, convallis lectus. Sed sit amet nibh vitae tortor tincidunt dapibus. Etiam nec est mauris. Integer semper scelerisque odio non faucibus. Suspendisse auctor mauris sit amet libero aliquet, vitae varius ipsum aliquam. Etiam nec iaculis arcu.

  • avec une liste
  • à puce dans
  • la réponse

Nullam et turpis venenatis, sagittis risus sit amet, convallis lectus. Sed sit amet nibh vitae tortor tincidunt dapibus !

  • Hiver
  • Été
Quelles sont les animations proposées en soirée en station ?

Nullam non consequat leo. Nam eu orci quam. Ut metus diam, facilisis et blandit nec, viverra eu magna. Nam accumsan rutrum enim quis malesuada. Proin eu elementum nibh. Aliquam odio ante, imperdiet convallis dolor in, pretium cursus neque. Nam efficitur placerat congue.

Organisez-vous des cours de ski pour débutants ?

Nullam non consequat leo. Nam eu orci quam. Ut metus diam, facilisis et blandit nec, viverra eu magna.

Y a-t-il des activités hors ski comme la luge ou les raquettes ?

Nullam non consequat leo. Nam eu orci quam. Ut metus diam, facilisis et blandit nec, viverra eu magna. Nam accumsan rutrum enim quis malesuada. Proin eu elementum nibh. Aliquam odio ante, imperdiet convallis dolor in, pretium cursus neque. Nam efficitur placerat congue.

Peut-on louer du matériel sur place ?

Nullam non consequat leo. Nam eu orci quam. Ut metus diam, facilisis et blandit nec, viverra eu magna. Nam accumsan rutrum enim quis malesuada. Proin eu elementum nibh. Aliquam odio ante, imperdiet convallis dolor in, pretium cursus neque. Nam efficitur placerat congue.

Quels types de forfaits de ski proposez-vous ?

Nullam non consequat leo. Nam eu orci quam. Ut metus diam, facilisis et blandit nec, viverra eu magna. Nam accumsan rutrum enim quis malesuada. Proin eu elementum nibh. Aliquam odio ante, imperdiet convallis dolor in, pretium cursus neque. Nam efficitur placerat congue.

L’information

test L’information

Les remontées mécaniques fonctionnent-elles en été pour les piétons et VTT ?

Nullam non consequat leo. Nam eu orci quam. Ut metus diam, facilisis et blandit nec, viverra eu magna. Nam accumsan rutrum enim quis malesuada. Proin eu elementum nibh. Aliquam odio ante, imperdiet convallis dolor in, pretium cursus neque. Nam efficitur placerat congue.

Proposez-vous des activités comme l’escalade ou la via ferrata ?

Nullam non consequat leo. Nam eu orci quam. Ut metus diam, facilisis et blandit nec, viverra eu magna. Nam accumsan rutrum enim quis malesuada. Proin eu elementum nibh. Aliquam odio ante, imperdiet convallis dolor in, pretium cursus neque. Nam efficitur placerat congue.

Y a-t-il des lacs ou rivières pour la baignade en montagne ?

Nullam non consequat leo. Nam eu orci quam. Ut metus diam, facilisis et blandit nec, viverra eu magna. Nam accumsan rutrum enim quis malesuada. Proin eu elementum nibh. Aliquam odio ante, imperdiet convallis dolor in, pretium cursus neque. Nam efficitur placerat congue.

Peut-on faire du VTT sur les pistes de ski en été ?

Nullam non consequat leo. Nam eu orci quam. Ut metus diam, facilisis et blandit nec, viverra eu magna. Nam accumsan rutrum enim quis malesuada. Proin eu elementum nibh. Aliquam odio ante, imperdiet convallis dolor in, pretium cursus neque. Nam efficitur placerat congue.

Quelles sont les meilleures randonnées à faire en été en station ?

Nullam non consequat leo. Nam eu orci quam. Ut metus diam, facilisis et blandit nec, viverra eu magna. Nam accumsan rutrum enim quis malesuada. Proin eu elementum nibh. Aliquam odio ante, imperdiet convallis dolor in, pretium cursus neque. Nam efficitur placerat congue.

  • Bloc à utiliser
    ws-library/ws-faq
  • Sélection
    Manuelle ou par catégorie
  • Taille de la Question
    18px (1.125rem)
  • Taille de la Réponse
    Par défaut : 16px
  • Style unique

  • Bloc à utiliser
    ws-library/ws-share
  • Taille de texte
    18px (1.125rem)
  • Style unique

Ce site est enregistré sur wpml.org en tant que site de développement. Passez à un site de production en utilisant la clé remove this banner.