UHasselt Component Library

Alert 

<div class="alert-banner">
    <div class="text-white flex items-center justify-center">
        <span class="icon fas fa-exclamation-circle  fa-md " aria-hidden="true"></span>

        <p><span class="uppercase">Belangrijke melding:</span> Dit is een melding</p>
    </div>
</div>
 
<div class="alert-banner">
    <div class="text-white flex items-center justify-center">
        {{render '@icon' this.icon-alert}}

        <p><span class="uppercase">Belangrijke melding:</span> {{this.alert-context}}</p>
    </div>
</div>
 
{
  "icon-alert": {
    "style": "fas",
    "icon": "fa-exclamation-circle",
    "size": "fa-md"
  },
  "alert-context": "Dit is een melding"
}
  • Content: 
    .alert-banner {
    @apply bg-red p-3 w-full;

    .icon {
        @apply flex items-center mr-2;
    }
}
  • URL: /components/raw/alert-banner/alert-banner.css
  • Filesystem Path: src\components\03-molecules\alert-banner\alert-banner.css
  • Size: 113 Bytes

No notes defined.