Input
Name | Type | Description |
.Chip | class | |
.Chip-Content | class |
Standard Chip
![Icon](/_astro/chip-image.B8t3eW5H_Z1ecVjN.webp)
Example
<div class="Chip">
<img
src="/_astro/chip-image.B8t3eW5H_Z1ecVjN.webp"
alt="Icon"
class="Avatar -border-circle"
width="550"
height="404"
loading="lazy"
decoding="async"
/>
<div class="Chip-Content">Example</div>
</div>
Alternate Background
![Icon](/_astro/chip-image.B8t3eW5H_Z1ecVjN.webp)
Example
<div class="Chip -color-info">
<img
src="/_astro/chip-image.B8t3eW5H_Z1ecVjN.webp"
alt="Icon"
class="Avatar -border-circle"
width="550"
height="404"
loading="lazy"
decoding="async"
/>
<div class="Chip-Content">Example</div>
</div>
Closeable Chip
![Icon](/_astro/chip-image.B8t3eW5H_Z1ecVjN.webp)
Example
<div class="Chip">
<img
src="/_astro/chip-image.B8t3eW5H_Z1ecVjN.webp"
alt="Icon"
class="Avatar -border-circle"
width="550"
height="404"
loading="lazy"
decoding="async"
/>
<div class="Chip-Content">Example</div> <button class="Button icon -color-info"> <i class="Icon x-lg"></i> </button>
</div>