FEC Pattern Library

Warning

When to use

  • The user has reached a dead end through their navigation—either they’ve entered a search which returns no results, or there is no data available in this entry. Offer users navigational assistance to get them back on the main trail.

Guidance

  • Be careful not to treat this like an error. It’s the site that has functioned in an unexpected way, not an error on the user’s part.

Guidance from the U.S. Web Design System

  • When the user is required to do something in response to an alert, let them know what they need to do and make that task as easy as possible. Think about how much context to provide with your message. For example, a notification of a system change may require more contextual information than a validation message. Write the message in concise, human readable language; avoid jargon and computer code.
  • Be polite in error messages — don’t place blame on the user.
  • Users generally won’t read documentation but will read a message that helps them resolve an error; include some educational material in your error message.
  • But don’t overdo it — too many notifications will either overwhelm or annoy the user and are likely to be ignored.
  • Allow a user to dismiss a notification wherever appropriate.
  • Don’t include notifications that aren’t related to the user’s current goal.

GitHub issues

<div style="padding: 2rem">
    <div class="message message--alert">
        <h2 class="message__title">Oops: We messed up</h2>
        <p>We had trouble processing your request. Please try reloading the page.</p>
        <div class="message--alert__bottom">
            <p>Still not working?</p>
            <ul class="list--buttons">
                <li><button class="button--cta" href="#">Return home</button></li>
                <li><button class="button--standard" href="#">File an issue</button></li>
                <li><button class="button--standard" href="#">Email our team</button></li>
            </ul>
        </div>
    </div>
</div>

<div class="slab slab--neutral" style="padding: 2rem">
    <div class="message message--inverse-alt message--alert">
        <h2 class="message__title">Oops!</h2>
        <p>We had trouble processing your request. Please try reloading the page.</p>
        <div class="message--alert__bottom">
            <p>Still not working?</p>
            <ul class="list--buttons">
                <li><button class="button--cta" href="#">Return home</button></li>
                <li><button class="button--standard" href="#">File an issue</button></li>
                <li><button class="button--standard" href="#">Email our team</button></li>
            </ul>
        </div>
    </div>
</div>

<div class="slab slab--primary" style="padding: 2rem; margin-top: 2rem">
    <div class="message message--inverse message--alert">
        <h2 class="message__title">Oops!</h2>
        <p>We had trouble processing your request. Please try reloading the page.</p>
        <div class="message--alert__bottom">
            <p>Still not working?</p>
            <ul class="list--buttons">
                <li><button class="button--cta-primary" href="#">Return home</button></li>
                <li><button class="button--standard" href="#">File an issue</button></li>
                <li><button class="button--standard" href="#">Email our team</button></li>
            </ul>
        </div>
    </div>
</div>

<div class="slab slab--secondary" style="padding: 2rem; margin-top: 2rem">
    <div class="message message--inverse message--alert">
        <h2 class="message__title">Oops!</h2>
        <p>We had trouble processing your request. Please try reloading the page.</p>
        <div class="message--alert__bottom">
            <p>Still not working?</p>
            <ul class="list--buttons">
                <li><button class="button--cta-secondary" href="#">Return home</button></li>
                <li><button class="button--standard" href="#">File an issue</button></li>
                <li><button class="button--standard" href="#">Email our team</button></li>
            </ul>
        </div>
    </div>
</div>
 
<div style="padding: 2rem">
  <div class="message message--alert">
    <h2 class="message__title">Oops: We messed up</h2>
    <p>We had trouble processing your request. Please try reloading the page.</p>
    <div class="message--alert__bottom">
        <p>Still not working?</p>
        <ul class="list--buttons">
          <li><button class="button--cta" href="#">Return home</button></li>
          <li><button class="button--standard" href="#">File an issue</button></li>
          <li><button class="button--standard" href="#">Email our team</button></li>
        </ul>
    </div>
  </div>
</div>

<div class="slab slab--neutral" style="padding: 2rem">
  <div class="message message--inverse-alt message--alert">
    <h2 class="message__title">Oops!</h2>
    <p>We had trouble processing your request. Please try reloading the page.</p>
    <div class="message--alert__bottom">
        <p>Still not working?</p>
        <ul class="list--buttons">
          <li><button class="button--cta" href="#">Return home</button></li>
          <li><button class="button--standard" href="#">File an issue</button></li>
          <li><button class="button--standard" href="#">Email our team</button></li>
        </ul>
    </div>
  </div>
</div>

<div class="slab slab--primary" style="padding: 2rem; margin-top: 2rem">
  <div class="message message--inverse message--alert">
    <h2 class="message__title">Oops!</h2>
    <p>We had trouble processing your request. Please try reloading the page.</p>
    <div class="message--alert__bottom">
        <p>Still not working?</p>
        <ul class="list--buttons">
          <li><button class="button--cta-primary" href="#">Return home</button></li>
          <li><button class="button--standard" href="#">File an issue</button></li>
          <li><button class="button--standard" href="#">Email our team</button></li>
        </ul>
    </div>
  </div>
</div>

<div class="slab slab--secondary" style="padding: 2rem; margin-top: 2rem">
  <div class="message message--inverse message--alert">
    <h2 class="message__title">Oops!</h2>
    <p>We had trouble processing your request. Please try reloading the page.</p>
    <div class="message--alert__bottom">
        <p>Still not working?</p>
        <ul class="list--buttons">
          <li><button class="button--cta-secondary" href="#">Return home</button></li>
          <li><button class="button--standard" href="#">File an issue</button></li>
          <li><button class="button--standard" href="#">Email our team</button></li>
        </ul>
    </div>
  </div>
</div>
 
/* No context defined. */
  • Handle: @message-alert
  • Preview:
  • Filesystem Path: components/02-components/messages/04-message-alert/message-alert.html