Alerts

alerts.less

Basic Alerts

Notice: Take a look at this alert message now.

Heads up: This message will be more noticeable than the plain one.

Success! Your request has been successfully submitted.

Warning: Your subscription will end in 15 days.

Action required: Your account is currently suspended.

<div class="alert">
  <p><strong>Notice:</strong> Take a look at this alert message now.</p>
</div>
<div class="alert accent">
  <p><strong>Heads up:</strong> This message will be more noticeable than the plain one.</p>
</div>
<div class="alert okay">
  <p><strong>Success!</strong> Your request has been successfully submitted.</p>
</div>
<div class="alert warning">
  <p><strong>Warning:</strong> Your subscription will end in 15 days.</p>
</div>
<div class="alert danger">
  <p><strong>Action required:</strong> Your account is currently suspended.</p>
</div>

Alerts are suitable for displaying short messages that needs users' attention. Alert boxes will apply simple background color and padding to make the message block stand out from standard content. Use the optional .accent, .okay, .warning, .danger classes to add background colors that fit the context of the message.


Alert with icon

Pro Tip: Getting plenty of sleep can help you if you're tired.
Permission granted.
We're running out of time.
Our base is under attack. 
<div class="alert okay">
  <span class="alert-icon"><i class="petalicon petalicon-check-round"></i></span> <span class="alert-text">Your request has been successfully submitted.</span>
</div>

To help better convey the context of the message, you can add an icon to your alert message. Simply add a petalicon in front of your text. Wrap them around with <span class="alert-icon"> to add some margin between the icon and the text.


Large Alerts

Information

Never gonna give you up, never gonna let you down

Success

Never gonna run around and desert you

Warning

Never gonna make you cry, Never gonna say goodbye

Error

Never gonna tell a lie and hurt you

<div class="alert large warning">
  <span class="alert-icon">
    <i class="petalicon petalicon-warning"></i>
  </span>
  <div class="alert-text">
    <h4>Warning</h4>
    <p>Your subscription will end in 15 days.</p>
  </div>
</div>

If you want to display your alerts more prominently, there is a large variant of the alert that doubles the size of the alert icon (32px), applies color and aligns it to the left. You need the .alert-icon wrap for the icon, and also the .alert-text wrap for the text block. Insert any HTML elements you want to include in the area.

Note: When <p> paragraph tags are used inside alerts and they happen to be the last child of the block, bottom margin will be removed to prevent inconsistent padding for the entire alert box.

Back to top