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.

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.

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',));

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', ), ) );

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', ), ), );

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', ), ), );

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' ) );

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', ) );

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

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.

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' ) );

Dans l'appel du template, l'argument 'total-steps' est obligatoire
get_template_part( 'templates/components/stepper', null, array( 'total-steps' => 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, ) );

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', ), ) );

Le label du tag est passé via les arguments du get_template_part
get_template_part( 'templates/components/tag', null, array( 'label' => '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', ) );

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',) );

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', ) );

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', ) );

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.', ) );

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.

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', ) );

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