The SUSE Design System uses cookies to help us learn more about how we can improve the design system.
Learn more about our cookie policy

Edit preferences
info
Didn’t find the component you were looking for? Take a look on what’s coming next or contact us.
Looking for components? what’s next or contact us.
close
EOS Design System logotype
menu
more_horiz
  • More

Section alerts

Section alerts are used to inform the user of important information related to the current section. They include a subject title and message to inform the user of details.

Description

  • They may be triggered by a user interaction or action or can be a system alert related to the section at hand.
  • Section alerts appear above the area or form they relate to.
  • Use a subject title and message to inform the user of details.
Section alert position

Different states and types

Success

Success alerts should be used when an action was performed successfully.

check_circle
Your system has been updated
The changes may take take a few minutes to impact your services.
close
content_copy
<div class='alert alert-section alert-success'>
  <i class='eos-icons eos-18 alert-icon'>check_circle</i>
  <div class='alert-body'>
    <div class='alert-title'>Your system has been updated</div>
    The changes may take take a few minutes to impact your services.
  </div>
  <a class='close' data-dismiss='alert'>
     <i class='eos-icons eos-18'>close</i>
  </a>
</div>

Info

Info alerts should be used when there are tips or information that a user can benefit from.

info
New updates available
A new system update is available for some of your systems. Go to the documentation page to learn more about this new update and how to install it.
close
content_copy
<div class='alert alert-section alert-info'>
  <i class='eos-icons eos-18 alert-icon'>info</i>
  <div class='alert-body'>
    <div class='alert-title'>New updates available</div>
    A new system update is available for some of your systems. Got to <a href='#'>documentation page</a> to
    learn more about this new update and how to install it.
  </div>
  <a class='close' data-dismiss='alert'>
     <i class='eos-icons eos-18'>close</i>
  </a>
</div>

Warning

Warning alerts should be used for messages that likely require attention.

warning
Subscriptions about to expire
7 of your systems’ subscriptions are about to expire in the next 30 days. To avoid any service interruption go to the subscriptions page and renew the subscriptions.
close
content_copy
<div class='alert alert-section alert-warning'>
  <i class='eos-icons eos-18 alert-icon'>warning</i>
  <div class='alert-body'>
    <div class='alert-title'>Subscriptions about to expire</div>
    7 of your systems’ subscriptions are about to expire in the next 30 days. To avoid any service interruption
    go to the <a href='#'>subscriptions page</a> to and renew the subscriptions.
  </div>
  <a class='close' data-dismiss='alert'>
     <i class='eos-icons eos-18'>close</i>
  </a>
</div>

Danger

Danger alerts should be used when the system has failed to perform an action, or when the user has made an error.

* Never include a close icon or link to dismiss the action. In cases when alert should be dismissible use warning alert instead.
error
Expired subscriptions
2 of your systems’ subscriptions have expired and you can no longer access the systems until you renew your subscriptions. To stop seeing this message renew your subscriptions or delete the systems from your organization.
content_copy
<div class='alert alert-section alert-danger'>
  <i class='eos-icons eos-18 alert-icon'>error</i>
  <div class='alert-body'>
    <div class='alert-title'>Expired subscriptions</div>
    2 of your systems’ subscriptions have expired and you can no longer access the systems until you renew your
    subscriptions. To stop seeing this message <a href='#'>renew your subscriptions</a> or delete the systems from
    your organization.
  </div>
</div>