Alert

<div class="ui-alert ui-alert--primary">
  <div class="ui-alert-inner"><strong>Hi there!</strong> I just want to say that you are wonderful and to have a nice day.</div>
</div>
<div class="ui-alert ui-alert--primary ui-alert--surface">
  <div class="ui-alert-inner"><strong>Hi there!</strong> I just want to say that you are wonderful and to have a nice day.</div>
</div>
<div class="ui-alert ui-alert--primary ui-alert--outline">
  <div class="ui-alert-inner"><strong>Hi there!</strong> I just want to say that you are wonderful and to have a nice day.</div>
</div>

<div class="ui-alert ui-alert--primary">
  <div class="ui-icon ui-icon--info-circle"></div>
  <div class="ui-alert-inner"><strong>Hi there!</strong> I just want to say that you are wonderful and to have a nice day.</div>
</div>
<div class="ui-alert ui-alert--secondary">
  <div class="ui-icon ui-icon--question-circle"></div>
  <div class="ui-alert-inner"><strong>Hi there!</strong> I just want to say that you are wonderful and to have a nice day.</div>
</div>
<div class="ui-alert ui-alert--info">
  <div class="ui-icon ui-icon--info-circle"></div>
  <div class="ui-alert-inner"><strong>Hi there!</strong> I just want to say that you are wonderful and to have a nice day.</div>
</div>
<div class="ui-alert ui-alert--success">
  <div class="ui-icon ui-icon--info-circle"></div>
  <div class="ui-alert-inner"><strong>Hi there!</strong> I just want to say that you are wonderful and to have a nice day.</div>
</div>
<div class="ui-alert ui-alert--danger">
  <div class="ui-icon ui-icon--info-circle"></div>
  <div class="ui-alert-inner"><strong>Hi there!</strong> I just want to say that you are wonderful and to have a nice day.</div>
</div>
<div class="ui-alert ui-alert--warning">
  <div class="ui-icon ui-icon--warning"></div>
  <div class="ui-alert-inner"><strong>Hi there!</strong> I just want to say that you are wonderful and to have a nice day.</div>
</div>

<div class="ui-alert ui-alert--primary ui-alert--high-contrast">
  <div class="ui-icon ui-icon--info-circle"></div>
  <div class="ui-alert-inner"><strong>Hi there!</strong> I just want to say that you are wonderful and to have a nice day.</div>
</div>
<div class="ui-alert ui-alert--secondary ui-alert--surface ui-alert--high-contrast">
  <div class="ui-icon ui-icon--question-circle"></div>
  <div class="ui-alert-inner"><strong>Hi there!</strong> I just want to say that you are wonderful and to have a nice day.</div>
</div>
<div class="ui-alert ui-alert--info ui-alert--high-contrast">
  <div class="ui-icon ui-icon--info-circle"></div>
  <div class="ui-alert-inner"><strong>Hi there!</strong> I just want to say that you are wonderful and to have a nice day.</div>
</div>
<div class="ui-alert ui-alert--success ui-alert--high-contrast">
  <div class="ui-icon ui-icon--info-circle"></div>
  <div class="ui-alert-inner"><strong>Hi there!</strong> I just want to say that you are wonderful and to have a nice day.</div>
</div>
<div class="ui-alert ui-alert--danger ui-alert--high-contrast">
  <div class="ui-icon ui-icon--info-circle"></div>
  <div class="ui-alert-inner"><strong>Hi there!</strong> I just want to say that you are wonderful and to have a nice day.</div>
</div>
<div class="ui-alert ui-alert--warning ui-alert--high-contrast">
  <div class="ui-icon ui-icon--info-circle"></div>
  <div class="ui-alert-inner"><strong>Hi there!</strong> I just want to say that you are wonderful and to have a nice day.</div>
</div>

<div data-ui-collapse data-ui-autodestroy data-ui-transition="scale-down-fade" role="alert" class="ui-alert ui-alert--primary">
    <div class="ui-icon ui-icon--info-circle"></div>
    <div class="ui-alert-inner"><strong>Hi there!</strong> I just want to say that you are wonderful and to have a nice day.</div>
    <button type="button" class="ui-btn-close" data-ui-dismiss="collapse" aria-label="Close"></button>
</div>