DocsElements

Alert

Show contextual information to your users using alert elements.

Classes Information

ClassNameDescription
alertContainer element
alert-contentContainer title description
alert-infoAlert With info color
alert-successAlert With success color
alert-warningAlert With warning color
alert-errorAlert With error color
alert-borderAlert With dark-border color
alert-info-borderAlert With info-border color
alert-success-borderAlert With success-border color
alert-warning-borderAlert With warning-border color
alert-error -borderAlert With error-border color

Basic Usage

Info
Success
Warning
Error
Dark

Example Code :

html
<div class="alert alert-info">Info</div>
<div class="alert alert-success">Success</div>
<div class="alert alert-warning">Warning</div>
<div class="alert alert-error">Error</div>
<div class="alert">Dark</div>

Border

Info With Border
Success With Border
Warning With Border
Error With Border
Dark With Border

Example Code :

html
<div class="alert alert-info-border">Info With Border</div>
<div class="alert alert-success-border">Success With Border</div>
<div class="alert alert-warning-border">Warning With Border</div>
<div class="alert alert-error-border">Error With Border</div>
<div class="alert alert-border">Dark With Border</div>

With Icon

Info With Icon
Success With Icon
Warning With Icon
Error With Icon
Dark With Icon

Example Code :

html
<div class="alert alert-info">
  <svg

    width="24"
    height="24"
    viewBox="0 0 48 48"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"

  >

    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M24 4C12.96 4 4 12.96 4 24C4 35.04 12.96 44 24 44C35.04 44 44 35.04 44 24C44 12.96 35.04 4 24 4ZM24 34C22.9 34 22 33.1 22 32V24C22 22.9 22.9 22 24 22C25.1 22 26 22.9 26 24V32C26 33.1 25.1 34 24 34ZM26 18H22V14H26V18Z"
      fill="currentColor"
    />

  </svg>
  <span class="alert-content ml-3">Info With Border</span>
</div>

With Icon Title Description

InfoInfo Description With Icon
SuccessSuccess Description With Icon
WarningWarning Description With Icon
ErrorError Description With Icon
DarkDark Description With Icon

Example Code :

html
<div class="alert alert-info">
  <svg
    width="48"
    height="48"
    viewBox="0 0 48 48"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M24 4C12.96 4 4 12.96 4 24C4 35.04 12.96 44 24 44C35.04 44 44 35.04 44 24C44 12.96 35.04 4 24 4ZM24 34C22.9 34 22 33.1 22 32V24C22 22.9 22.9 22 24 22C25.1 22 26 22.9 26 24V32C26 33.1 25.1 34 24 34ZM26 18H22V14H26V18Z"
      fill="currentColor"
    />
  </svg>
  <div class="alert-content ml-3">
    <span>Info</span>
    <span class="font-light text-content2">Info description with icon </span>
  </div>
</div>

Previous

Accordion

Next

Avatar