Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat numquam, repudiandae tenetur similique dolorem
Alert
Alert basic
<article role="alert"> <div> <p>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Sequi quidem repellat numquam, repudiandae tenetur
similique dolorem</p> </div> </article><Alert>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem
repellat numquam, repudiandae tenetur similique dolorem
</p>
</Alert>Alert Info
Remarque
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat numquam, repudiandae tenetur similique dolorem
<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>Lorem ipsum dolor sit amet
consectetur adipisicing elit. Sequi quidem repellat numquam, repudiandae
tenetur similique dolorem</p> </div> </article><AlertInfo>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem
repellat numquam, repudiandae tenetur similique dolorem
</p>
</AlertInfo>Alert Warning
Attention
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat numquam, repudiandae tenetur similique dolorem
<article aria-labelledby="attention" role="alert"
aria-roledescription="warning"> <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="attention"> Attention </h4> <p>Lorem ipsum dolor sit amet
consectetur adipisicing elit. Sequi quidem repellat numquam, repudiandae
tenetur similique dolorem</p> </div> </article><AlertWarning>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem
repellat numquam, repudiandae tenetur similique dolorem
</p>
</AlertWarning>Alert Danger
Erreur
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat numquam, repudiandae tenetur similique dolorem
<article aria-labelledby="erreur" role="alert" aria-roledescription="error">
<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" role="img"
slot="before-icon"> <path
d="M22.1 24c-.5 0-1-.2-1.3-.6L12 14.6l-8.7 8.7c-.7.7-1.9.7-2.7 0s-.7-1.9 0-2.7L9.4 12 .6 3.2C-.1 2.5-.1 1.3.6.5s1.9-.7 2.7 0L12 9.3 20.7.6c.7-.7 1.9-.7 2.7 0s.7 1.9 0 2.7L14.7 12l8.7 8.7c.7.7.7 1.9 0 2.7-.3.4-.8.6-1.3.6z"></path>
</svg> <div> <h4 id="erreur"> Erreur </h4> <p>Lorem ipsum dolor sit amet
consectetur adipisicing elit. Sequi quidem repellat numquam, repudiandae
tenetur similique dolorem</p> </div> </article><AlertDanger>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem
repellat numquam, repudiandae tenetur similique dolorem
</p>
</AlertDanger>Alert Success
Succès
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat numquam, repudiandae tenetur similique dolorem
<article aria-labelledby="succès" role="alert" 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> <div> <h4 id="succès"> Succès </h4> <p>Lorem ipsum dolor sit amet
consectetur adipisicing elit. Sequi quidem repellat numquam, repudiandae
tenetur similique dolorem</p> </div> </article><AlertSuccess>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem
repellat numquam, repudiandae tenetur similique dolorem
</p>
</AlertSuccess>Alert with more content
Avec du code
Mais attention, l’attribut anchor est encore expérimental et n’est pas encore supporté par tous les navigateurs. A ce jour, seul Chrome Canary le supporte.
<div class="anchor" id="example-anchor">⚓︎</div>
<div class="infobox" anchor="example-anchor">
<p>This is an information box.</p>
</div><article aria-labelledby="avec-du-code" 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="avec-du-code"> Avec du code </h4> <p>Mais attention,
l’attribut <a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/anchor"
rel="noopener"> <span> anchor </span> </a> est encore expérimental et
n’est pas encore supporté par tous les navigateurs.
A ce jour, seul Chrome Canary le supporte.</p><pre
class="astro-code dark-plus"
style="background-color:hsla(var(--bk-h) / 90%);color:#D4D4D4;overflow-x:auto"
tabindex="0"
data-language="html"><code><span class="line"><span style="color:#888888"><</span><span style="color:#569CD6">div</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"anchor"</span><span style="color:#9CDCFE"> id</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"example-anchor"</span><span style="color:#888888">></span><span style="color:#D4D4D4">⚓︎</span><span style="color:#888888"></</span><span style="color:#569CD6">div</span><span style="color:#888888">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#888888"><</span><span style="color:#569CD6">div</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"infobox"</span><span style="color:#9CDCFE"> anchor</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"example-anchor"</span><span style="color:#888888">></span></span>
<span class="line"><span style="color:#888888"> <</span><span style="color:#569CD6">p</span><span style="color:#888888">></span><span style="color:#D4D4D4">This is an information box.</span><span style="color:#888888"></</span><span style="color:#569CD6">p</span><span style="color:#888888">></span></span>
<span class="line"><span style="color:#888888"></</span><span style="color:#569CD6">div</span><span style="color:#888888">></span></span></code></pre>
</div> </article>
<AlertInfo title="Avec du code">
Mais attention, l'attribut [anchor](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/anchor) est encore expérimental et n'est pas encore supporté par tous les navigateurs.
A ce jour, seul Chrome Canary le supporte.
```html
<div class="anchor" id="example-anchor">⚓︎</div>
<div class="infobox" anchor="example-anchor">
<p>This is an information box.</p>
</div>
```
</AlertInfo>