Skip to main content



    Use Alerts to pass contextual feedback to the user for user interaction or statuses, through DOM insertion or statically.


    Basic Alerts

    <div class="c-alert c-alert--error" role="alert">
      <p class="c-alert__heading">Only think about one thing at a time. Don&#x27;t get greedy.</p>
    <div class="c-alert c-alert--warning" role="alert">
      <p class="c-alert__heading">A beautiful little sunset. Talk to trees, look at the birds.</p>
    <div class="c-alert c-alert--success" role="alert">
      <p class="c-alert__heading">Clouds are free they come and go as they please.</p>
    <div class="c-alert" role="alert">
      <p class="c-alert__heading">See how easy it is to create a little tree right in your world.</p>

    Alert with Body

    <section class="c-alert c-alert--error" role="alert">
      <h3 class="c-alert__heading">We'll have a super time.</h3>
      <p>You can do anything your heart can imagine. Work on one thing at a time. Don't get carried away - we have plenty of time.</p>