Titre 1

Titre 2

Titre 3

Titre 4

Titre 5
Titre 6

This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most Lorem ipsum dolor sit amet. Ut reiciendis consequatur Et aperiam non tempore doloribus hic eveniet officiis non dolores quia non cumque praesentium ut saepe sunt. Qui culpa nihil ut nemo corruptised provident hic vitae odio.

Qui sunt voluptatem a optio asperiores eos harum iste.

Et optio distinctio in temporibus earumsit odit eum quaerat blanditiis ut aspernatur provident. Eum quam molestiae quo facilis placeatut animi non voluptate accusantium. Eum veniam saepe Est maxime sed dicta dolores ad dolores molestiae sit quaerat molestiae quo repellat eligendi.

Sit ipsum pariatur sed minima ipsum ut autem cumque.

Eos vitae dolorem est repudiandae sunt Est vero sed delectus nulla qui voluptatem quia. 33 nihil galisum et veniam eligendi Et nisi qui voluptatem perferendis quo suscipit autem non atque quia!

  • item 1
  • item 2
  • item 3
  1. item 1
  2. item 2
  3. item 3

Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.

Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.

Alerte success

Alerte info

Alerte warning

Alerte error


Components

Button

La classe .btn peut s'appliquer aux <button> comme aux <a>.

Il y a plusieurs variantes :
Pour la taille => .btn--small ou .btn--small
Pour l'apparence => .btn--outline ou .btn--subtle.
.btn
.btn .btn--small
.btn .btn--large
.btn .btn--outline
.btn .btn--subtle
.btn disabled

Button icon

La classe .btn-icon peut s'appliquer aux <button> comme aux <a>.

Il y a plusieurs variantes :
Pour la taille => .btn-icon--small ou .btn-icon--small
Pour l'apparence => .btn-icon--outline ou .btn-icon--subtle.
.btn-icon .btn-icon--small // .btn-icon // .btn-icon .btn-icon--large
.btn-icon .btn-icon--outline .btn-icon--small // .btn-icon .btn-icon--outline // .btn-icon .btn-icon--outline .btn-icon--large
.btn-icon .btn-icon--subtle .btn-icon--small // .btn-icon .btn-icon--subtle // .btn-icon .btn-icon--subtle .btn-icon--large
.btn-icon disabled

Bouton coeur/like

La bouton like se décline en 2 variantes, une "normale" est une plus petite avec la classe .heart-button--small.

Au clique sur le bouton, on ajoute une classe active.

get_template_part('templates/components/heart-button');

Si le bouton doit être actif dès le chargement de la page, on peut passer l'argument 'active' => true. get_template_part('templates/components/heart-button', null, array('active' => true, 'size' => 'small',));

Navigation Pills

On passe le label et l'url de chaques pills dans les args du get_template_part
get_template_part( 'templates/components/navigation-pills', null, array( array( 'label' => 'Label pill 1', 'url' => 'url1', ), array( 'label' => 'pill 2', 'url' => 'url2', ), array( 'label' => 'Pill 3', 'url' => 'url3', ), array( 'label' => 'Label pill 4', 'url' => 'url4', ), ) );

Navigation tab

On passe le label et l'url de chaques tabs dans les args du get_template_part
get_template_part( 'templates/components/navigation-tab', null, array( array( 'url' => '#tab1', 'label' => 'Title', ), array( 'url' => '#tab2', 'label' => 'Title 2 avec un label bien long, bien bien loong', ), array( 'url' => '#tab3', 'label' => 'Title 3', ), ), );

Navigation Points

On passe le label et l'url de chaques points dans les args du get_template_part
get_template_part( 'templates/components/navigation-points', null, array( array( 'url' => '#tab1', 'label' => 'Title', ), array( 'url' => '#tab2', 'label' => 'Title 2 avec un label bien long', ), array( 'url' => '#tab3', 'label' => 'Title 3', ), ), );

Chip

On passe le label et l'url de la chip dans les args du get_template_part
get_template_part( 'templates/components/chip', null, array( 'url' => '#chien', 'label' => 'Chiens bienvenus' ) );

Chiens bienvenus

Pour avoir un chip couleur primaire, on passe color => alt dans les args du get_template_part
get_template_part( 'templates/components/chip', null, array( 'url' => '#chien', 'label' => 'Chiens bienvenus', 'color' => 'alt', ) );

Chiens bienvenus

Progress bar

La progression est passée via les args du get_template_part
get_template_part( 'templates/components/progress-bar', null, array( 'progress' => 66 ) );

Progression = 66%

Rating

La note est passée via les args du get_template_part
get_template_part( 'templates/components/rating', null, array( 'rating' => 3 ) );

Dans la div .rating, la note est présente dans l'attribut data-rate.

1/5 2/5 3/5 4/5 5/5

En ajoutant dans les args un size => big, les étoiles sont plus grandes
get_template_part( 'templates/components/rating', null, array( 'rating' => 5, 'size' => 'big' ) );

1/5 2/5 3/5 4/5 5/5

Stepper

Dans l'appel du template, l'argument 'total-steps' est obligatoire
get_template_part( 'templates/components/stepper', null, array( 'total-steps' => 3 ) );

1 Étape 1
2 Étape 2
3 Étape 3

On peut ajouter l'arguments 'current-step' pour définir la position actuelle (par défaut step 1)
get_template_part( 'templates/components/stepper', null, array( 'total-steps' => 5, 'current-step' => 2, ) );

1 Étape 1
2 Étape 2
3 Étape 3
4 Étape 4
5 Étape 5

On peut ajouter l'arguments 'steps-labels' pour définir les labels de chaques étapes (par défaut le label est 'step + chiffre' (traduit en étape en FR)),
La key doit être 'label+chiffre'

get_template_part( 'templates/components/stepper', null, array( 'total-steps' => 5, 'current-step' => 2, 'steps-labels' => array( 'label-1' => 'Step checked', 'label-2' => 'Current step', 'label-3' => 'Step 3', 'label-4' => 'Step 4', 'label-5' => 'Step 5 avec un label très très long, vraiment long', ), ) );

1 Step checked
2 Current step
3 Step 3
4 Step 4
5 Step 5 avec un label très très long, vraiment long

Tag

Le label du tag est passé via les arguments du get_template_part
get_template_part( 'templates/components/tag', null, array( 'label' => 'Tag' ) );

Tag

On peut appliquer une couleur alternative au tag en ajoutant l'argument color => alt
get_template_part( 'templates/components/tag', null, array( 'label' => 'Label du tag', 'color' => 'alt', ) );

Label du tag

On peut aussi ajouter un icon au tag à droite ou à gauche en ajoutant l'argument icon-position => right (ou left).
Ainsi que choisir l'icon en ajoutant l'argument icon-name => nom-de-l'icon (par défaut affiche un coeur).

get_template_part( 'templates/components/tag', null, array( 'label' => 'Label du tag', 'icon-position' => 'left',) );

get_template_part( 'templates/components/tag', null, array( 'label' => 'Label du tag', 'color' => 'alt', 'icon-position' => 'right', 'icon-name' => 'Gear',) );

tag Le tag

Badge

Le bage peut prendre plusieurs formes.

- Un disque simple (sa forme par défaut).
get_template_part( 'templates/components/badge' );

- Un disque avec un icon.
Il faudra alors ajouter un argument badge-type => icon ainsi que icon-name => nom-de-l'icon
get_template_part( 'templates/components/badge', null, array( 'badge-type' => 'icon', 'icon-name' => 'Plus', ) );

- Un disque légèrement plus grand avec un nombre.
Il faudra alors ajouter un argument badge-type => number ainsi que badge-number => nombre

get_template_part( 'templates/components/tag', null, array( 'badge-type' => 'number', 'badge-number' => '2', ) );

- Un rectangle aux angles arrondis avec un icon.
Il faudra alors ajouter un argument badge-type => special ainsi que icon-name => nom-de-l'icon

get_template_part( 'templates/components/tag', null, array( 'badge-type' => 'special', 'badge-number' => '2', ) );

2

Featured Icon

Plusieurs parametres sont à passer dans les arguments du get_template_part.

-Le type, icon, emoji, error, success ou warning. ex : 'featured-type' => 'icon',.

-La taille, small, medium ou large (small par défaut). ex : 'featured-size' => 'small',.

-La couleur, neutral ou brand (neutral par défaut). ex : 'featured-color' => 'neutral',.

-Le nom de l'icon ou de l'émoji. ex : 'icon-name' => 'CheckFat',.

Par exemple, dans l'ordre :

get_template_part( 'templates/components/featured-icon', null, array( 'featured-type' => 'icon', 'featured-size' => 'small', 'featured-color' => 'neutral', 'icon-name' => 'CheckFat', ) );

Pour le second, on a 'featured-color' => 'brand',
get_template_part( 'templates/components/featured-icon', null, array( 'featured-type' => 'icon', 'featured-size' => 'medium', 'featured-color' => 'brand', 'icon-name' => 'CheckFat', ) );

get_template_part( 'templates/components/featured-icon', null, array( 'featured-type' => 'icon', 'featured-size' => 'large', 'featured-color' => 'neutral', 'icon-name' => 'CheckFat', ) );

Ici on a 'featured-type' => 'emoji' et 'icon-name' => '🚴‍♀️'

🚴‍♀️ 🚴‍♀️ 🚴‍♀️

Pour les types error, succes et warning, il n'est pas nécéssaire de spécifier featured-color et icon-name, ils sont déterminé par le type.

Par exemple, pour le error en small :
get_template_part( 'templates/components/featured-icon', null, array( 'featured-type' => 'error', 'featured-size' => 'small', ) );

Icône erreur Icône succès Icône avertissement

Tile

Plusieurs parametres sont à passer dans les arguments du get_template_part.

-Le Label 'tile-label' => 'Label'.

-Le nom d'un icon si on souhaite en ajouter un 'icon-name' => 'HeartStraight'.

-Le contenu du tile 'tile-content' => 'Content'.

Un clique sur un tile, on lui ajoute la class .selected et il change de couleur.

Exemple, pour un tile avec icon, label et contenu :

get_template_part( 'templates/components/tile', null, array( 'icon-name' => 'HeartStraight', 'tile-label' => 'Label', 'tile-content' => 'Le contenu est ici.', ) );

Label

Le contenu est ici.

Label Label

Le contenu est ici.

Label

Modal

Les modales s'ouvrent au clique sur un élément ayant la classe .btn--open-modal.

Les modales se ferme au clique sur .btn--close-modal ou sur la touche échap.

Pin

Les pins se déclinnent en 3 types et 4 tailles qu'il faut passer via les arguments.

Les types :
- organisation
- activity
- location

Les tailles :
- mini
- small
- medium
- large

get_template_part( 'templates/components/pin', null, array( 'pin-type' => 'organisation', 'pin-size' => 'mini', ) );
Pin Pin Pin Pin
Pin Pin Pin
Pin Pin Pin Pin

Toggle

<label for="sample-test" class="switch"> <input type="checkbox" name="sample-test" id="sample-test"> <span class="slider"></span> </label>

Molecules

Message Cards

Heading
Consilio difficultates superare potest esse, immo
Heading
Consilio difficultates superare potest esse, immo
Heading
Consilio difficultates superare potest esse, immo
Heading
Consilio difficultates superare potest esse, immo
Heading
Consilio difficultates superare potest esse, immo
Heading
Consilio difficultates superare potest esse, immo

Review Cards

1/5 2/5 3/5 4/5 5/5
Heading
Consilio difficultates superare potest esse, immo
1/5 2/5 3/5 4/5 5/5
Heading
Consilio difficultates superare potest esse, immo
Nom de l'auteur.e

Theme Cards

Heading
Consilio difficultates superare potest esse, immo
Heading
Consilio difficultates superare potest esse, immo
Heading
Consilio difficultates superare potest esse, immo

Organismes

Headers

20 degrés
Page title
Page title
Page title
Page title
Page title

Carrousel

This site is registered on wpml.org as a development site. Switch to a production site key to remove this banner.