Fork me on GitHub

Styleguide: Alerts

Success

Successfully completed.
<div class="d-flex px-2 py-1 bg-success-light border border-success rounded">
 <div
class="pr-2">
  <i
class="fa fa-check fa-lg text-success pg-bg-status-icon" aria-hidden="true" role="img"></i>
 </div>
 <div
class="text-body mx-auto pg-bg-status-text"> ...</div>
</div>

Error

Failed (exit code:1)
<div class="d-flex px-2 py-1 bg-danger-light border border-danger rounded">
 <div
class="pr-2">
  <i
class="fa fa-exclamation-triangle text-danger" aria-hidden="true" role="img"></i>
 </div>
 <div
class="text-body mx-auto pg-bg-status-text"> ... </div>
</div>

Info

Lorem ipsum ea proident commodo ad mollit
<div class="d-flex px-2 py-1 bg-info-light border border-danger rounded">
 <div
class="pr-2">
  <i
class="fa fa-exclamation-triangle text-info" aria-hidden="true" role="img"></i>
 </div>
 <div
class="text-body mx-auto pg-bg-status-text"> ...</div>
</div>

Success

Successfully completed.
<div class="d-flex px-2 py-1 bg-success-light border border-success rounded">
 <div
class="pr-2">
  <i
class="fa fa-check fa-lg text-success pg-bg-status-icon" aria-hidden="true" role="img"></i>
 </div>
 <div
class="text-body mx-auto pg-bg-status-text"> ...</div>
</div>

Error

Failed (exit code:1)
<div class="d-flex px-2 py-1 bg-danger-light border border-danger rounded">
 <div
class="pr-2">
  <i
class="fa fa-exclamation-triangle text-danger" aria-hidden="true" role="img"></i>
 </div>
 <div
class="text-body mx-auto pg-bg-status-text"> ... </div>
</div>

Info

Lorem ipsum ea proident commodo ad mollit
<div class="d-flex px-2 py-1 bg-info-light border border-danger rounded">
 <div
class="pr-2">
  <i
class="fa fa-exclamation-triangle text-info" aria-hidden="true" role="img"></i>
 </div>
 <div
class="text-body mx-auto pg-bg-status-text"> ...</div>
</div>

Success

Successfully completed.
<div class="d-flex px-2 py-1 bg-success-light border border-success rounded">
 <div
class="pr-2">
  <i
class="fa fa-check fa-lg text-success pg-bg-status-icon" aria-hidden="true" role="img"></i>
 </div>
 <div
class="text-body mx-auto pg-bg-status-text"> ...</div>
</div>

Error

Failed (exit code:1)
<div class="d-flex px-2 py-1 bg-danger-light border border-danger rounded">
 <div
class="pr-2">
  <i
class="fa fa-exclamation-triangle text-danger" aria-hidden="true" role="img"></i>
 </div>
 <div
class="text-body mx-auto pg-bg-status-text"> ... </div>
</div>

Info

Lorem ipsum ea proident commodo ad mollit
<div class="d-flex px-2 py-1 bg-info-light border border-danger rounded">
 <div
class="pr-2">
  <i
class="fa fa-exclamation-triangle text-info" aria-hidden="true" role="img"></i>
 </div>
 <div
class="text-body mx-auto pg-bg-status-text"> ...</div>
</div>