---
title: Encadré
slug: encadre
description: Y a‑t‑il quelque chose de super important que vos utilisateurs doivent savoir? Un encadré est votre mégaphone.
createdAt: 2024-07-24T11:14:45.104Z
---
Pensez à un **encadré** comme à un petit projecteur accrocheur pour votre contenu le plus important ou le plus intéressant. C’est comme un pense-bête numérique qui crie, *« Hé, regardez-moi! ». *C’est un bloc polyvalent qui peut être utilisé pour mettre en évidence des conseils, des avertissements, des pratiques exemplaires ou à peu près tout ce que vous souhaitez souligner.
## Pourquoi utiliser des callouts?
- **Mettre en évidence les informations clés**
Y a-t-il quelque chose de très important que vos utilisateurs doivent connaître? Un callout est votre mégaphone.
- **Fournir des conseils utiles**
Vous voulez être le héros de la documentation? Ajoutez quelques conseils utiles dans des callouts.
- **Avertir des problèmes potentiels**
Prévenez les frustrations des utilisateurs en utilisant des callouts pour les avertissements.
- **Ajouter une touche de personnalité**
Les callouts peuvent être votre arme secrète pour injecter un peu de personnalité dans votre documentation.
:::hint{type="info"}
**😎 Astuce de pro**
Utilisez les callouts avec parcimonie. Trop nombreux, ils perdent leur impact. C’est comme crier après quelqu’un — cela fonctionne un moment, puis cela devient simplement agaçant.
:::
## Comment utiliser le bloc callout?
::::WorkflowBlock
:::WorkflowBlockItem
Tapez `/` pour ouvrir le menu de blocs Archbee
:::
:::WorkflowBlockItem
Recherchez le bloc **Encadré** et cliquez pour l’insérer
:::
:::WorkflowBlockItem
Choisissez le style de callout
- **ℹ️ Info **— Pour des informations générales, des conseils ou des faits rapides.
- **✅ Succès **— Pour célébrer des réalisations, mettre en avant des résultats positifs ou simplement diffuser de la bonne énergie.
- ⚠️** Avertissement **— Pour avertir les utilisateur·rice·s de problèmes potentiels, de notes de prudence ou de considérations importantes.
- **🛑 Danger** — Pour des alertes critiques, des messages urgents ou des situations nécessitant une attention immédiate.
:::
:::WorkflowBlockItem
N’hésitez pas à ajouter votre contenu. Vous pouvez styliser le contenu comme vous le souhaitez en utilisant le [WYSIWYG Menu](#) ou même insérer d’autres blocs, comme :
- [Titres](docId:9DK0p7E5QbNQwnLULg1mh)
- [En-têtes extensibles](docId\:TO9U-129tncxz0baRouRA)
- [Listes](docId\:DomrAw_oBOQ-Ix7Ir08rR)
- [Button](docId:_w0toMKBesZHUyHYsTmBF)
- [Séparateur horizontal](docId\:Yte2EY46dCacSPMcgAiUZ)
- [Fichier](docId\:fnBKlwRUChHSPXHJvnSry)
- [Image](docId\:dbvyES2JcUA7IJdxyiTy2)
- [Vidéo](docId\:I40jv6NQ47MLTnwEvMx_4)
:::
::::
## Markdown
Vous souhaitez ajouter des callouts directement dans votre documentation via Markdown? Nous avons ce qu’il vous faut!
Archbee prend en charge une syntaxe Markdown spécifique avec des triples-deux-points (`:::`). Avec cette méthode, il suffit de taper `:::hint` suivi d’un attribut optionnel `style` pour définir le type de callout (info, warning, success ou danger).
Utilisez le Markdown suivant pour générer un bloc callout :
```markdown
## Hints
:::hint{style="info"}
We would love you to contribute to `@octokit/rest`, pull requests are very welcome! Please see CONTRIBUTING.md for more information.
:::
:::hint{style="warning"}
We would love you to contribute to `@octokit/rest`, pull requests are very welcome! Please see CONTRIBUTING.md for more information.
:::
:::hint{style="success"}
We would love you to contribute to `@octokit/rest`, pull requests are very welcome! Please see CONTRIBUTING.md for more information.
:::
:::hint{style="danger"}
We would love you to contribute to `@octokit/rest`, pull requests are very welcome! Please see CONTRIBUTING.md for more information.
:::
```
:::hint{type="info"}
Nous serions ravis que vous contribuiez à `@octokit/rest`, les pull requests sont les bienvenues! Veuillez consulter CONTRIBUTING.md pour plus d’informations.
:::
Vous pouvez également utiliser cette variante de Markdown pour générer un bloc d’appel.
```markdown
{% hint style="info" %}
some hint
{% endhint %}
```
Consultez la page [Utiliser les raccourcis Markdown](docId\:EO4eTugE25r8s2oWvdNE1) pour voir d’autres raccourcis markdown pour d’autres blocs.
## Exemples
Voici quelques exemples pour vous montrer le bloc d’appel :
- **ℹ️ Infos**
:::hint{type="info"}
**ℹ️ Le saviez-vous? **
Archbee est tellement performant que vous remettrez en question vos choix de vie.
Comme, pourquoi n’avez-vous pas commencé à l’utiliser plus tôt?
:::
- ✅ **Succès**
:::hint{type="success"}
**🎉 Vous l’avez fait!**
Vous avez maîtrisé l’art des blocs d’appel.
Maintenant, allez créer une documentation exceptionnelle qui impressionnera vos concurrents.
:::
- ⚠️** Avertissement**
:::hint{type="warning"}
**🚧** **Attention!**
Utiliser trop de blocs d’appel peut être distrayant. Utilisez-les judicieusement, sinon vos lecteurs pourraient commencer à les ignorer complètement.
:::
- 🛑 **Danger**
:::hint{type="danger"}
🚨 ** Oh-oh!**
Si vous voyez ceci, quelque chose a très mal tourné. 🫣
Probablement pas avec Archbee cependant, **nous sommes parfaits. 💅✨**
Blâmez le café. ☕️
:::
***
::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} ** Trouver d’autres blocs**
Découvrez de nouvelles façons et de nouveaux blocs pour créer des pages de documentation impressionnantes et fonctionnelles.
[Consultez tous les blocs](docId\:zV0Ap2weEDulh9laNqfWE)
:::
:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}** Besoin d’aide? ⬇️**
Utilisez la **bulle** **de clavardage bleue **dans le coin inférieur droit.
Ou essayez **Clavardage IA** (à partir de la boîte de recherche) pour des réponses rapides.
:::
:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
:FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}** Votre opinion compte**
Utilisez le formulaire de rétroaction ci-dessous, anonymement.
Ou posez une question dans la **section Q\&R** et notre équipe ou l’IA vous fournira une solution.
:::
::::