Tous les shortcodes utilisables dans un article de blog ou tout autre fichier MDX, chacun avec le code qui le produit. La liste se trouve dans src/lib/shortcodes.ts.

Encadré

Sortez un conseil ou un avertissement du texte. type vaut note (par défaut), tip, warning ou danger. Sans title, le nom du type s’affiche.

jsx

<Callout type="tip" title="Testez d'abord sur une zone cachée">
  Essayez tout produit à l'intérieur d'une porte de placard ou sous un tapis
  avant de l'utiliser sur toute la surface.
</Callout>

Remarque

La plupart des taches partent avec de l’eau froide et de la patience. La chaleur fixe les taches protéiques comme l’œuf ou le sang.

Testez d'abord sur une zone cachée

Essayez tout produit à l’intérieur d’une porte de placard ou sous un tapis avant de l’utiliser sur toute la surface.

Attention

Ne mélangez jamais l’eau de Javel avec un produit ammoniaqué ou acide. Rincez la surface entre deux produits.

Coupez au tableau électrique

Éteindre l’interrupteur ne suffit pas avant de toucher un luminaire. Vérifiez d’abord l’absence de tension.

<Notice> fonctionne toujours et affiche le même encadré : info → note, success → tip, warning → warning, error → danger.

Étapes

Placez des titres dans <Steps> pour les numéroter. Chaque titre ## ou ### commence une étape, et tout ce qui suit lui appartient.

<Steps>

### Trouvez où ça frotte

Fermez la porte lentement et cherchez la zone usée et brillante sur le cadre.

### Resserrez la charnière du haut

Utilisez un tournevis à main, pas une visseuse : les vis foirent facilement.

### Vérifiez le jeu

L'espace doit être régulier, de l'épaisseur d'une pièce, tout autour.

</Steps>

Trouvez où ça frotte

Fermez la porte lentement et cherchez la zone usée et brillante sur le cadre.

Resserrez la charnière du haut

Utilisez un tournevis à main, pas une visseuse : les vis foirent facilement.

Vérifiez le jeu

L’espace doit être régulier, de l’épaisseur d’une pièce, tout autour.

Liste de contrôle

<ListCheck> transforme une liste Markdown en liste de contrôle. Ajoutez columns={2} pour deux colonnes sur les écrans larges.

<ListCheck columns={2}>

- **Four et plaques** : la première porte qu'on ouvre à l'état des lieux.
- **Réfrigérateur et congélateur** : dégivrés, secs, porte ouverte.
- **Placards et tiroirs** : les miettes dans les coins.
- **Calcaire de la salle de bain** : robinets, paroi et pommeau.

</ListCheck>

Four et plaques : la première porte qu’on ouvre à l’état des lieux.
Réfrigérateur et congélateur : dégivrés, secs, porte ouverte.
Placards et tiroirs : les miettes dans les coins.
Calcaire de la salle de bain : robinets, paroi et pommeau.

Bon d’intervention

<JobTicket> présente une liste comme un bon d’intervention. Chaque élément devient une ligne cochée. total est un texte libre ; avec service et sans total, le bon affiche le prix « à partir de » de ce service selon la grille tarifaire, et un bouton « Obtenir un prix » ouvre l’estimateur avec le service sélectionné.

<JobTicket title="Avant l'arrivée de l'équipe" code="TIP-021" label="Ménage en profondeur" service="deep-cleaning">

- Dégagez les plans de travail
- Rangez les objets fragiles
- Laissez une clé ou un code d'accès

</JobTicket>

N° TIP-021

Ménage en profondeur

Avant l'arrivée de l'équipe

Dégagez les plans de travail
Rangez les objets fragiles
Laissez une clé ou un code d’accès

À partir de180 $US

Obtenir un prix

Bandeau de prix

<PriceCta> est la ligne qui termine chaque article : le prix « à partir de » du service et un bouton vers l’estimateur. Les articles l’affichent d’eux-mêmes grâce au champ service de leur en-tête ; utilisez le shortcode sur les autres pages.

jsx

<PriceCta service="window-cleaning" />

Bouton

jsx

<Button label="Obtenir un prix" url="/book/" />
<Button variant="outline" label="Nous appeler" url="/contact/" />
<Button variant="text" label="Voir tous les services" url="/services/" />

Obtenir un prix Nous appeler Voir tous les services

Accordéon

Les lignes du même group se ferment entre elles. expanded="true" ouvre une ligne au chargement.

<Accordion label="Quelqu'un doit-il être là pendant l'intervention ?" group="visite" expanded="true">

Non. La plupart des clients laissent une clé ou un code. Nous refermons et vous envoyons un SMS en partant.

</Accordion>

Quelqu'un doit-il être là pendant l'intervention ?

Non. La plupart des clients laissent une clé ou un code. Nous refermons et vous envoyons un SMS en partant.

Apportez-vous les produits ?

Oui : chiffons, aspirateur et produits. Dites-nous si vous préférez que nous utilisions les vôtres.

Et si quelque chose casse ?

Prévenez-nous sous 48 heures et nous trouverons une solution avec vous.

Onglets

jsx

<Tabs>
  <Tab name="Cuisine">
    Dégraisser le filtre de hotte, essuyer les façades, nettoyer la vitre du
    four.
  </Tab>
  <Tab name="Salle de bain">
    Détartrer robinets et paroi, frotter les joints, nettoyer derrière les
    toilettes.
  </Tab>
</Tabs>

Dégraisser le filtre de hotte, essuyer les façades des placards et nettoyer la vitre du four.

Liste d’images

Des photos en grille, avec une caption facultative sous chacune. width="1/2" ou "1/3" fixe la part de la ligne ; videoSrc ajoute un bouton de lecture.

jsx

<ImageList>
  <ImageItem
    imageSrc="/images/blog/door-hinge-fix.jpg"
    imageAlt="Tournevis sur une charnière de porte"
    caption="Resserrez d'abord la charnière du haut."
  />
  <ImageItem
    width="1/2"
    imageSrc="/images/blog/grout-close-up.jpg"
    imageAlt="Joints entre des carreaux"
    caption="Des joints foncés après un an."
  />
  <ImageItem
    width="1/2"
    imageSrc="/images/blog/window-light.jpg"
    imageAlt="Lumière à travers une vitre propre"
    caption="La raclette de haut en bas."
  />
</ImageList>

Tournevis sur une charnière de porte — Resserrez d'abord la charnière du haut.

Joints entre des carreaux — Des joints foncés après un an.

Lumière à travers une vitre propre — La raclette de haut en bas.

Vidéo

jsx

<VideoInline src="rFVpSwgCkCo" provider="youtube" />
<VideoInline src="/videos/test-video.mp4" provider="html5" poster="/images/video-thumbnail.jpg" />

Texte

Gras avec **, italique avec _, ~~barré~~ avec ~~, et code en ligne avec des accents graves. Les liens s’écrivent [texte](/url/) : nos services.

Une citation commence par >. Utilisez-la pour une courte phrase d’un client ou d’un membre de l’équipe.

Pièce	Durée	Équipe
Cuisine	2 h	2
Salle de bain	1 h	1
Chambre	45 min	1

txt

## Titre 2 [.custom-class]
### Titre 3

Ajoutez des classes à un titre entre crochets, par exemple [.h5] pour une taille plus petite.

Gros plan sur les fibres d'une moquette

Composants