Component
Alert
A status block. The icon sits on the first line, and the heading and body sit beside it.
Import jellyfy/alert.css with jellyfy/material.css and jellyfy/motion.css. Or import jellyfy/jellyfy.css, which already includes this file and every other component.
Classes
| Class | Type | |
|---|---|---|
| alert | Component | The block. Medium text is 16px. |
| alert-sm | Size | Small size |
| alert-md | Size | Medium size (default) |
| alert-lg | Size | Large size |
| primary | Color | Indigo by default. |
| secondary | Color | Pink by default. |
| tertiary | Color | Teal by default. |
| neutral | Color | Gray by default. |
| success | Color | Green by default. |
| error | Color | Red by default. |
| warning | Color | Amber by default. |
| info | Color | Sky by default. |
With an icon
The icon is the first element, and it is an svg. The text is the next element. The icon centers on the first line.
Check the date
This offer ends tonight.
<div class="alert warning">
<svg aria-hidden="true"><!-- info --></svg>
<div>
<p class="font-semibold">Check the date</p>
<p>This offer ends tonight.</p>
</div>
</div>Colors
Primary
A light surface with dark text.
Secondary
A light surface with dark text.
Tertiary
A light surface with dark text.
Neutral
A light surface with dark text.
Success
A light surface with dark text.
Error
A light surface with dark text.
Warning
A light surface with dark text.
Info
A light surface with dark text.
<div class="alert primary">
<svg aria-hidden="true"></svg>
<div>
<p class="font-semibold">Primary</p>
<p>A light surface with dark text.</p>
</div>
</div>
<div class="alert secondary">
<svg aria-hidden="true"></svg>
<div>
<p class="font-semibold">Secondary</p>
<p>A light surface with dark text.</p>
</div>
</div>
<div class="alert tertiary">
<svg aria-hidden="true"></svg>
<div>
<p class="font-semibold">Tertiary</p>
<p>A light surface with dark text.</p>
</div>
</div>
<div class="alert neutral">
<svg aria-hidden="true"></svg>
<div>
<p class="font-semibold">Neutral</p>
<p>A light surface with dark text.</p>
</div>
</div>
<div class="alert success">
<svg aria-hidden="true"></svg>
<div>
<p class="font-semibold">Success</p>
<p>A light surface with dark text.</p>
</div>
</div>
<div class="alert error">
<svg aria-hidden="true"></svg>
<div>
<p class="font-semibold">Error</p>
<p>A light surface with dark text.</p>
</div>
</div>
<div class="alert warning">
<svg aria-hidden="true"></svg>
<div>
<p class="font-semibold">Warning</p>
<p>A light surface with dark text.</p>
</div>
</div>
<div class="alert info">
<svg aria-hidden="true"></svg>
<div>
<p class="font-semibold">Info</p>
<p>A light surface with dark text.</p>
</div>
</div>Sizes
Each size sets the type as well as the padding: 14px, 16px, and 20px.
Small
14px type.
Medium
16px type.
Large
20px type.
<div class="alert alert-sm">...</div>
<div class="alert alert-md">...</div>
<div class="alert alert-lg">...</div>With no color class, the alert stays plain. A slot uses the wash, and the text is the surface content color.