Box

<article aria-labelledby="juste-un-titre"> <h4 id="juste-un-titre"> Juste un
    titre </h4> </article>

<Box title="Juste un titre" />

<article> <p>Juste du texte</p> </article>

<Box>
  <p>Juste du texte</p>
</Box>

<article aria-labelledby="un-titre"> <h4 id="un-titre"> Un titre </h4><p>Et du
    texte</p> </article>

<Box title="Un titre">
  <p>Et du texte</p>
</Box>

<article aria-labelledby="remarque" role="alert" aria-roledescription="info">
  <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" role="img"
    slot="before-icon"> <path
      d="M10.6 7.6c-1.6.8-3 2.1-4.4 4-.2.3-.2.4 0 .6.1.1.2.1.4-.2l.1-.1c.2-.2.3-.4.6-.7 1-1.2 1.5-1.7 2.3-2.1.7-.4 1.3.2 1.1.9 0 .2-.1.4-.2.7-.1.1-.1.2-.1.3-.3.7-.5 1.2-.9 2.4v.1c-.1.3-.1.3-.3.7-.6 1.5-.9 2.4-1.3 3.4v.1c-.1.3-.1.4-.2.5-.4 1.1-.7 1.9-.8 2.6 0 .1 0 .1-.1.2-.1.4-.2.7-.2 1-.1.5 0 .9.1 1.3.2.4.6.7 1 .7.7.1 1.4.1 2.1 0l1-.3c1-.4 1.9-.9 2.8-1.7.8-.7 1.5-1.5 2.3-2.4.1-.1.1-.1.1-.2.2-.3.4-.5.4-.7 0-.2-.1-.4-.3-.4-.1 0-.2.1-.3.3-.1.1-.1.2-.2.2l-.6.6c-.3.4-.7.7-1.2 1.3-.3.3-.6.5-.9.7-.6.3-1.1-.1-1-.7 0-.4.1-.8.3-1.3.3-.9.6-1.6 1.2-3.2.3-.7.4-1 .5-1.4.4-1.1.7-2 1.1-2.9.4-1.1.6-1.9.7-2.7.1-.6-.1-1.2-.5-1.6-.4-.5-1.1-.7-1.8-.7-.8 0-1.8.2-2.8.7zM16.5.2c-1.5-.6-3.4.4-3.7 2.1-.2 1.2.2 2.2 1.1 2.6 1.8.8 3.9-.5 3.9-2.5.1-1.1-.4-1.9-1.3-2.2z"></path>
  </svg> <div> <h4 id="remarque"> Remarque </h4> <p><p>Pour voir plus
        d’information sur l’alert, cliquez sur <a href="designui/alert"> <span>
            voir
            l’alert </span> </a></p></p> </div> </article>

<AlertInfo>
<p>
  Pour voir plus d'information sur l'alert, cliquez sur [voir
  l'alert](designui/alert)
</p>
</AlertInfo>

<article aria-labelledby="badgesuccess" role="status"
  aria-roledescription="success"> <svg viewBox="0 0 24 24" width="24"
    height="24" fill="currentColor" role="img" slot="before-icon"> <path
      d="M8.5 20.5c-.4 0-.8-.2-1.2-.5L.4 13.1c-.6-.6-.6-1.7 0-2.3s1.7-.6 2.3 0l5.8 5.8L21.2 3.9c.6-.6 1.7-.6 2.3 0 .6.6.6 1.7 0 2.3L9.7 20.1c-.3.3-.7.4-1.2.4z"></path>
  </svg> <h4 id="badgesuccess"> BadgeSuccess </h4> </article>

<BadgeSuccess title="BadgeSuccess" />

<article aria-labelledby="exemple-de-titre"> <figure data-type="css"> <img
      src="/.netlify/images?url=_astro%2Fcss.CvCEQKed.webp&#38;w=480&#38;h=240&#38;q=100"
      alt aria-hidden="true" loading="lazy" decoding="async"
      fetchpriority="auto" width="480" height="240"> <figcaption>Texte pour
      l&#39;image</figcaption> </figure> <h3 id="exemple-de-titre"> Exemple de
    titre </h3><time datetime="2024-07-30T22:00:00.000Z"> 30 juil. 2024
  </time><p>Exemple de description</p> <a href="/blog/slug"> <span>
      Voir Exemple de titre </span> <svg viewBox="0 0 24 24" width="24"
      height="24" fill="currentColor" role="img" slot="after-link"> <path
        d="M18.854 12.01a1.711 1.711 0 0 1-.504 1.211L8.055 23.488a1.713 1.713 0 0 1-2.42-2.427l9.083-9.057L5.66 2.921A1.713 1.713 0 0 1 8.086.501l10.268 10.295c.334.337.501.775.5 1.214z"></path>
    </svg></a> </article>

<BoxPost
title="Exemple de titre"
slug="slug"
pubDate="2024-07-30T22:00:00.000Z"
heroImage="css.webp"
alt="Texte pour l'image"
type="css"
category="blog"
><p>Exemple de description</p></BoxPost>

<article aria-labelledby="exemple-de-titre"> <h3 id="exemple-de-titre"> Exemple
    de titre </h3><time datetime="2024-07-30T22:00:00.000Z"> 30 juil. 2024
  </time><p>Exemple de description</p> <a href="/blog/slug"> <span>
      Voir Exemple de titre </span> <svg viewBox="0 0 24 24" width="24"
      height="24" fill="currentColor" role="img" slot="after-link"> <path
        d="M18.854 12.01a1.711 1.711 0 0 1-.504 1.211L8.055 23.488a1.713 1.713 0 0 1-2.42-2.427l9.083-9.057L5.66 2.921A1.713 1.713 0 0 1 8.086.501l10.268 10.295c.334.337.501.775.5 1.214z"></path>
    </svg></a> </article>

<BoxPost
title="Exemple de titre"
slug="slug"
pubDate="2024-07-30T22:00:00.000Z"
alt="Animation Timeline"
type="css"
category="blog"
><p>Exemple de description</p></BoxPost>