Alert
| Class name | Type | Description |
|---|---|---|
tc-alert | Component | Alert |
tc-alert-alt | Utility | Alternate styled alert |
Examples
tc-alert
tc-alert with custom style
tc-alert tc-style-default
tc-alert tc-style-content
tc-alert tc-style-inverse
tc-alert tc-style-primary
tc-alert tc-style-secondary
tc-alert tc-style-info
tc-alert tc-style-info-light
tc-alert tc-style-warning
tc-alert tc-style-warning-light
tc-alert tc-style-error
tc-alert tc-style-error-light
tc-alert tc-style-success
tc-alert tc-style-success-light
<div class="tc-alert border-0 border-l-4 mb-6 tu-bg-default border-theme-primary" role="alert">
<div class="w-full flex items-center gap-4">
<!-- Icon -->
<div class="flex-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
</svg>
</div>
<!-- Content -->
<div class="grow">
tc-alert with custom style
</div>
</div>
</div>
<div class="tc-alert tc-style-default mb-6" role="alert">
<div class="w-full flex items-center gap-4">
<!-- Icon -->
<div class="flex-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46" />
</svg>
</div>
<!-- Content -->
<div class="grow">
tc-alert tc-style-default
</div>
</div>
</div>
<div class="tc-alert tc-style-content mb-6" role="alert">
<div class="w-full flex items-center gap-4">
<!-- Icon -->
<div class="flex-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.712 4.33a9.027 9.027 0 011.652 1.306c.51.51.944 1.064 1.306 1.652M16.712 4.33l-3.448 4.138m3.448-4.138a9.014 9.014 0 00-9.424 0M19.67 7.288l-4.138 3.448m4.138-3.448a9.014 9.014 0 010 9.424m-4.138-5.976a3.736 3.736 0 00-.88-1.388 3.737 3.737 0 00-1.388-.88m2.268 2.268a3.765 3.765 0 010 2.528m-2.268-4.796a3.765 3.765 0 00-2.528 0m4.796 4.796c-.181.506-.475.982-.88 1.388a3.736 3.736 0 01-1.388.88m2.268-2.268l4.138 3.448m0 0a9.027 9.027 0 01-1.306 1.652c-.51.51-1.064.944-1.652 1.306m0 0l-3.448-4.138m3.448 4.138a9.014 9.014 0 01-9.424 0m5.976-4.138a3.765 3.765 0 01-2.528 0m0 0a3.736 3.736 0 01-1.388-.88 3.737 3.737 0 01-.88-1.388m2.268 2.268L7.288 19.67m0 0a9.024 9.024 0 01-1.652-1.306 9.027 9.027 0 01-1.306-1.652m0 0l4.138-3.448M4.33 16.712a9.014 9.014 0 010-9.424m4.138 5.976a3.765 3.765 0 010-2.528m0 0c.181-.506.475-.982.88-1.388a3.736 3.736 0 011.388-.88m-2.268 2.268L4.33 7.288m6.406 1.18L7.288 4.33m0 0a9.024 9.024 0 00-1.652 1.306A9.025 9.025 0 004.33 7.288" />
</svg>
</div>
<!-- Content -->
<div class="grow">
tc-alert tc-style-content
</div>
</div>
</div>
<div class="tc-alert tc-style-inverse mb-6" role="alert">
<div class="w-full flex items-center gap-4">
<!-- Icon -->
<div class="flex-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.712 4.33a9.027 9.027 0 011.652 1.306c.51.51.944 1.064 1.306 1.652M16.712 4.33l-3.448 4.138m3.448-4.138a9.014 9.014 0 00-9.424 0M19.67 7.288l-4.138 3.448m4.138-3.448a9.014 9.014 0 010 9.424m-4.138-5.976a3.736 3.736 0 00-.88-1.388 3.737 3.737 0 00-1.388-.88m2.268 2.268a3.765 3.765 0 010 2.528m-2.268-4.796a3.765 3.765 0 00-2.528 0m4.796 4.796c-.181.506-.475.982-.88 1.388a3.736 3.736 0 01-1.388.88m2.268-2.268l4.138 3.448m0 0a9.027 9.027 0 01-1.306 1.652c-.51.51-1.064.944-1.652 1.306m0 0l-3.448-4.138m3.448 4.138a9.014 9.014 0 01-9.424 0m5.976-4.138a3.765 3.765 0 01-2.528 0m0 0a3.736 3.736 0 01-1.388-.88 3.737 3.737 0 01-.88-1.388m2.268 2.268L7.288 19.67m0 0a9.024 9.024 0 01-1.652-1.306 9.027 9.027 0 01-1.306-1.652m0 0l4.138-3.448M4.33 16.712a9.014 9.014 0 010-9.424m4.138 5.976a3.765 3.765 0 010-2.528m0 0c.181-.506.475-.982.88-1.388a3.736 3.736 0 011.388-.88m-2.268 2.268L4.33 7.288m6.406 1.18L7.288 4.33m0 0a9.024 9.024 0 00-1.652 1.306A9.025 9.025 0 004.33 7.288" />
</svg>
</div>
<!-- Content -->
<div class="grow">
tc-alert tc-style-inverse
</div>
</div>
</div>
<div class="tc-alert tc-style-primary mb-6" role="alert">
<div class="w-full flex items-center gap-4">
<!-- Icon -->
<div class="flex-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46" />
</svg>
</div>
<!-- Content -->
<div class="grow">
tc-alert tc-style-primary
</div>
</div>
</div>
<div class="tc-alert tc-style-secondary mb-6" role="alert">
<div class="w-full flex items-center gap-4">
<!-- Icon -->
<div class="flex-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46" />
</svg>
</div>
<!-- Content -->
<div class="grow">
tc-alert tc-style-secondary
</div>
</div>
</div>
<div class="tc-alert tc-style-info mb-6" role="alert">
<div class="w-full flex items-center gap-4">
<!-- Icon -->
<div class="flex-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
</svg>
</div>
<!-- Content -->
<div class="grow">
tc-alert tc-style-info
</div>
</div>
</div>
<div class="tc-alert tc-style-info-light mb-6" role="alert">
<div class="w-full flex items-center gap-4">
<!-- Icon -->
<div class="flex-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
</svg>
</div>
<!-- Content -->
<div class="grow">
tc-alert tc-style-info-light
</div>
</div>
</div>
<div class="tc-alert tc-style-warning mb-6" role="alert">
<div class="w-full flex items-center gap-4">
<!-- Icon -->
<div class="flex-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
</svg>
</div>
<!-- Content -->
<div class="grow">
tc-alert tc-style-warning
</div>
</div>
</div>
<div class="tc-alert tc-style-warning-light mb-6" role="alert">
<div class="w-full flex items-center gap-4">
<!-- Icon -->
<div class="flex-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
</svg>
</div>
<!-- Content -->
<div class="grow">
tc-alert tc-style-warning-light
</div>
</div>
</div>
<div class="tc-alert tc-style-error mb-6" role="alert">
<div class="w-full flex items-center gap-4">
<!-- Icon -->
<div class="flex-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<!-- Content -->
<div class="grow">
tc-alert tc-style-error
</div>
</div>
</div>
<div class="tc-alert tc-style-error-light mb-6" role="alert">
<div class="w-full flex items-center gap-4">
<!-- Icon -->
<div class="flex-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<!-- Content -->
<div class="grow">
tc-alert tc-style-error-light
</div>
</div>
</div>
<div class="tc-alert tc-style-success mb-6" role="alert">
<div class="w-full flex items-center gap-4">
<!-- Icon -->
<div class="flex-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<!-- Content -->
<div class="grow">
tc-alert tc-style-success
</div>
</div>
</div>
<div class="tc-alert tc-style-success-light mb-6" role="alert">
<div class="w-full flex items-center gap-4">
<!-- Icon -->
<div class="flex-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<!-- Content -->
<div class="grow">
tc-alert tc-style-success-light
</div>
</div>
</div>
tc-alert-alt
tc-alert-alt tc-style-default
tc-alert-alt tc-style-content
tc-alert-alt tc-style-info-light
tc-alert-alt tc-style-warning-light
tc-alert-alt tc-style-error-light
tc-alert-alt tc-style-success-light
<div class="tc-alert tc-alert-alt tc-style-default mb-6" role="alert">
<div class="w-full flex items-center gap-4">
<!-- Icon -->
<div class="flex-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46" />
</svg>
</div>
<!-- Content -->
<div class="grow">
tc-alert-alt tc-style-default
</div>
</div>
</div>
<div class="tc-alert tc-alert-alt tc-style-content mb-6" role="alert">
<div class="w-full flex items-center gap-4">
<!-- Icon -->
<div class="flex-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46" />
</svg>
</div>
<!-- Content -->
<div class="grow">
tc-alert-alt tc-style-content
</div>
</div>
</div>
<div class="tc-alert tc-alert-alt tc-style-info-light mb-6" role="alert">
<div class="w-full flex items-center gap-4">
<!-- Icon -->
<div class="flex-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
</svg>
</div>
<!-- Content -->
<div class="grow">
tc-alert-alt tc-style-info-light
</div>
</div>
</div>
<div class="tc-alert tc-alert-alt tc-style-warning-light mb-6" role="alert">
<div class="w-full flex items-center gap-4">
<!-- Icon -->
<div class="flex-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
</svg>
</div>
<!-- Content -->
<div class="grow">
tc-alert-alt tc-style-warning-light
</div>
</div>
</div>
<div class="tc-alert tc-alert-alt tc-style-error-light mb-6" role="alert">
<div class="w-full flex items-center gap-4">
<!-- Icon -->
<div class="flex-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<!-- Content -->
<div class="grow">
tc-alert-alt tc-style-error-light
</div>
</div>
</div>
<div class="tc-alert tc-alert-alt tc-style-success-light mb-6" role="alert">
<div class="w-full flex items-center gap-4">
<!-- Icon -->
<div class="flex-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<!-- Content -->
<div class="grow">
tc-alert-alt tc-style-success-light
</div>
</div>
</div>
Dismissible alert
This example utilizes the data-hide attribute to hide when clicked.
Dismissible alert...
<div id="tc-alert-dismiss" class="tc-alert tc-style-default" role="alert" data-hidden="true">
<div class="w-full flex items-center gap-4">
<!-- Icon -->
<div class="flex-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46" />
</svg>
</div>
<!-- Content -->
<div class="grow">
Dismissible alert...
</div>
<!-- Close -->
<button class="flex-none p-0.5 rounded-full hover:backdrop-brightness-95 dark:hover:backdrop-brightness-50"
data-hide="tc-alert-dismiss"
data-hide-transition="250"
data-hide-duration="0"
aria-label="Close">
<svg xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div> <!-- /#tc-alert-dismiss -->
Web component
Alerts are available to be used as a web component. Any tc-alert-* utility class can be applied.
Attributes:
id: Unique ID (required if dismissible)data-icon: Any valid skin-icon name (optional)data-dismiss-duration: Minutes to keep alert hidden after dismissed (optional)
tc-alert-alt class applied
<!-- Default -->
<skin-alert id="skin-alert-default" class="tc-alert-alt tc-style-default mb-6" data-icon="megaphone" data-dismiss-duration="0">
This is an alert with <code>tc-alert-alt</code> class applied
</skin-alert>
<!-- Info -->
<skin-alert class="tc-style-info-light mb-6" data-icon="information-circle">
This is an informational alert
</skin-alert>
<!-- Warning -->
<skin-alert class="tc-style-warning-light mb-6" data-icon="exclamation-triangle">
This is a warning alert
</skin-alert>
<!-- Error -->
<skin-alert class="tc-style-error-light mb-6" data-icon="x-circle">
This is an error alert
</skin-alert>
<!-- Success -->
<skin-alert class="tc-style-success-light mb-6" data-icon="check-circle">
This is a success alert
</skin-alert>