Alert

Sources

PrestaShop UIKit

Original bootstrap component used in the PrestaShop UIKit:

1<div class="alert alert-primary" role="alert">
2  This is a primary alert. Check it out!
3</div>

PUIK

Basic Use

For any alert component that you use, replace the structure above with the following structure:

 1<div
 2  class="puik-alert puik-alert--success"
 3  aria-live="polite"
 4>
 5  <div class="puik-alert__content">
 6    <div class="puik-icon material-icons-round puik-alert__icon" style="font-size: 1.25rem;">check_circle</div>
 7    <div class="puik-alert__text">
 8      <p class="puik-alert__title">Title</p>
 9      <span class="puik-alert__description">This is the description of the success alert.</span>
10    </div>
11  </div>
12  <button class="puik-button puik-button--success puik-button--md puik-alert__button">Button</button>
13</div>

Variants

The following alert variants are available:

  • success
  • warning
  • info
  • danger

For each variant, you can use the structure shown above, and change the root div class to puik-alert--${variant}:

 1<div
 2  class="puik-alert puik-alert--${variant}"
 3  aria-live="polite"
 4>
 5  <div class="puik-alert__content">
 6    <div class="puik-icon material-icons-round puik-alert__icon" style="font-size: 1.25rem;">check_circle</div>
 7    <div class="puik-alert__text">
 8      <p class="puik-alert__title">Title</p>
 9      <span class="puik-alert__description">This is the description of the ${variant} alert.</span>
10    </div>
11  </div>
12  <button class="puik-button puik-button--${variant} puik-button--md puik-alert__button">Button</button>
13</div>
info
The aria-live="polite" attribute is important. It allows you to specify the behavior screen readers should follow when this alert content changes. In the example shown above, the alert content vocalization will happen after the end of any vocalization currently in progress.

Borders

You can remove borders from the alert component. To do so, add the puik-alert--no-borders class to the root div:

 1<div
 2  class="puik-alert puik-alert--${variant} puik-alert--no-borders"
 3  aria-live="polite"
 4>
 5  <div class="puik-alert__content">
 6    <div class="puik-icon material-icons-round puik-alert__icon" style="font-size: 1.25rem;">check_circle</div>
 7    <div class="puik-alert__text">
 8      <p class="puik-alert__title">Title</p>
 9      <span class="puik-alert__description">This is the description of the ${variant} alert.</span>
10    </div>
11  </div>
12  <button class="puik-button puik-button--${variant} puik-button--md puik-alert__button">Button</button>
13</div>
← Accordion
Badge →