Elements

Mise en Forme du Texte

Texte en Gras

Pour mettre du texte en gras, utilisez ** ou __ autour du mot ou de la phrase :
Exemple : Ce texte est en gras ou Ce texte est en gras

Texte en Italique

Pour mettre du texte en italique, utilisez * ou _ autour du mot ou de la phrase :
Exemple : Ce texte est en italique ou Ce texte est en italique

Texte Souligné

Pour souligner du texte, utilisez les balises HTML <u> :

Exemple :

<u>Ce texte est souligné</u>

Résultat :

Ce texte est souligné

Texte Barré

Pour barrer du texte, utilisez ~~ autour du mot ou de la phrase :
Exemple : Ce texte est barré

Bouton

<Button label="Exemple de Bouton" url="/" />
<Button variant="outline" label="Avec Lien Externe" url="https://astro.build" />
<Button variant="text" label="Exemple de Bouton" url="/" />

Le code ci-dessus génère les boutons suivants

Exemple de Bouton Avec Lien Externe Exemple de Bouton

Accordéon

<Accordion
  label="Étiquette Exemple Accordéon 01"
  group="accordion-01"
  expanded="true"
>
  Nous proposons une large gamme de services incluant le développement web, le
  branding et le marketing digital pour aider les entreprises à croître et
  réussir. * **Essentiel** : Atelier ciblé pour identifier les valeurs
  fondamentales et l'USP. * **Croissance** : Atelier approfondi pour établir une
  identité de marque claire et différenciée. * **Entreprise** : Stratégie
  complète de positionnement de marque couvrant tous les aspects de votre
  marque.
</Accordion>

Le code ci-dessus génère les accordéons suivants

Onglets

<Tabs>
  <Tab name="Vue d'ensemble">
    **Comment pouvons-nous vous aider ?** Nous proposons des consultations
    personnalisées pour vous aider à atteindre vos objectifs personnels et
    professionnels. Choisissez un onglet ci-dessous pour explorer nos services.
    - Coaching Personnel - Conseil en Carrière - Résolution de Conflits -
    Conseils de Vie
  </Tab>
</Tabs>

Le code ci-dessus génère les onglets suivants

Vidéo YouTube

Vidéo Personnalisée

Avertissement

Citation

Pour créer une citation, commencez la ligne par un > :
Exemple :

Ceci est une citation.
Elle s’étend sur plusieurs lignes.

Auteur

Code

Pour formater du code en ligne, utilisez les accents graves (`):
Exemple : Ceci est un code en ligne

Pour les blocs de code multi-lignes, utilisez trois accents graves (```):
Exemple :

<a
  {...{
    // Définir l'attribut `rel` pour les URLs externes ou utiliser la valeur fournie
    rel: cta_btn.url?.startsWith("http")
      ? cta_btn.rel || "noopener noreferrer"
      : cta_btn.rel || undefined,

    // Définir `target` sur "_blank" pour les URLs externes sauf indication contraire
    target: cta_btn.url?.startsWith("http")
      ? cta_btn.target || "_blank"
      : cta_btn.target || undefined,
  }}
  class="relative flex items-center"
  href={getLocaleUrlCTM(cta_btn.url, Astro.currentLocale)}
>
  <span
    class="btn btn-outline has-text-flip-animation"
    data-content={cta_btn.label}
  >
    {cta_btn.label}
  </span>
  <span class="icon">
    <OptimizedImage
      alt="icône"
      inlineSvg={true}
      class="h-4 w-4 text-white"
      src="/images/icons/svg/arrow-top-right.svg"
    />
  </span>
</a>

Règle Horizontale

Pour créer une règle horizontale, utilisez trois tirets (---), astérisques (***), ou underscores (___) sur une nouvelle ligne :
Exemple :

---

Titres

Créez des titres en ajoutant des # avant votre texte. Ajoutez une classe personnalisée entre crochets [.class-name].
Exemple :

# Titre 1 [.custom-class .another-class]
## Titre 2 [.custom-class .another-class4]
### Titre 3 [.custom-class .another-class]
#### Titre 4 [.custom-class .another-class]
##### Titre 5 [.custom-class .another-class] [.text-h4]
###### Titre 6 [.custom-class .another-class] [.text-h5]

Tableau

Créez des tableaux en utilisant des pipes (|) et des tirets (-) :

Exemple :

Colonne 1	Colonne 2	Colonne 3
Donnée 1	Donnée 2	Donnée 3
Donnée 4	Donnée 5	Donnée 6

Images

Image locale :

Composants

Liste Stylée

<ListCheck>

- **Interactions Incohérentes avec les Clients** : Les clients ont rencontré des niveaux de qualité de service variables selon les canaux.
- **Manque de Personnalisation** : Une intégration limitée des données a conduit à une communication générique et uniforme.
- **Rétention des Clients** : Difficulté à retenir les clients en raison d'un suivi et d'une interaction insuffisants.

</ListCheck>

Le code ci-dessus génère la liste stylée suivante :

Grille de Cartes

<CardGrid>
  <Card
    icon="/images/icons/svg/success.svg"
    title="200+"
    description="Satisfaction Client Accrue"
  />
  <Card
    icon="/images/icons/svg/revenue.svg"
    title="25+"
    description="Personnalisation Améliorée"
  />
  <Card
    icon="/images/icons/svg/glorify.svg"
    title="10:1"
    description="Rétention Améliorée"
  />
</CardGrid>

Le code ci-dessus génère le bloc stylé suivant :

Galerie avec Vidéo

<Gallery>
  <GalleryItem
    image_src="/images/gallery/1.jpg"
    image_alt="texte alternatif exemple"
    video_src="LXb3EKWsInQ"
  />
  <GalleryItem
    image_src="/images/gallery/2.jpg"
    image_alt="texte alternatif exemple"
    video_src="/videos/test-video.mp4"
    video_provider="html5"
  />
  <GalleryItem
    width="1/2"
    image_src="/images/gallery/3.jpg"
    image_alt="texte alternatif exemple"
  />
  <GalleryItem
    width="1/2"
    image_src="/images/gallery/4.jpg"
    image_alt="texte alternatif exemple"
  />
</Gallery>

Le code ci-dessus génère les images suivantes :

Témoignage

<Testimonial
  customer_image="/images/customers/avatar/1.jpg"
  customer_name="Sarah Jones"
  customer_role="PDG, Fondatrice"
  customer_company_logo="/images/customers/company-logo/acme.png"
  customer_company_name="Acme Inc."
>
  Notre collaboration avec Upstart démontre la puissance d'une stratégie
  d'engagement client bien exécutée. En intégrant des technologies avancées et
  des analyses basées sur les données, nous les avons aidés à offrir une
  expérience client plus personnalisée, cohérente et enrichissante. Chez
  Upstart, nous nous engageons à aider des entreprises comme Oloyon à
  révolutionner leur engagement client et à assurer leur succès à long terme.
</Testimonial>

Le code ci-dessus génère les images suivantes :