FEC Pattern Library

Sizes

Messages keep users informed of important and sometimes time-sensitive changes.

When to use

Big

  • When a whole page is impacted by the change, and the message is the only page content. For example, the 404 or 500 error pages.

Standard

  • When the message is long, complex, or needs to offer the user instructions for how to continue on after the message

Small

  • When the message needs to appear in a small space within the layout and does not need a title or complex text structure

Mini

  • When the message needs to appear in a very small space within the layout
  • When you need to use a message as an element within a layout that’s always present, instead of one that appears briefly
    Ex: Time-sensitive events being promoted on the home page
    Ex: Export warnings on data tables

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 class="container">
    <div style="margin-top: 2rem">Big</div>
    <div class="message message--alert message--big">
        <h1 class="message__title" tabindex="0">Server error</h1>
        <p>Sorry, this page failed to load. This happened because of an internal error, and our web team has been notified. Please try again, and thanks for your patience.</p>
        <div class="message--alert__bottom">
            <p>If you'd like to contact our team, we're available by <a href="#">email</a> or <a href="#">GitHub</a>.</p>
            <p><a class="button button--cta" href="/">Return home</a></p>
            <p>Or try searching an archive of the <a href="#">old FEC.gov design.</a></p>
        </div>
    </div>
</div>

<div class="container">
    <div style="margin-top: 2rem">Standard with action area</div>
    <div class="message message--alert">
        <h2 class="message__title" tabindex="0">Oops!</h2>
        <p>We had trouble processing your request. Please try reloading the page.</p>
        <div class="message--alert__bottom">
            <p>Still can't find what you're looking for?</p>
            <ul class="list--buttons">
                <li><a class="button button--cta" href="#">Return home</a></li>
                <li><a class="button button--standard" href="#">File an issue</a></li>
                <li><a class="button button--standard" href="#">Email our team</a></li>
            </ul>
        </div>
    </div>

    <div>Standard</div>
    <div class="message message--alert">
        <h2 class="message__title" tabindex="0">Oops!</h2>
        We had trouble processing your request. Please try reloading the page.
    </div>

    <div class="message message--info">
        This entity has no financial data for the <strong>2011-2012</strong> election cycle.
    </div>

    <div>Small</div>
    <div class="message message--info message--small">
        Due to the large number of transactions, records begin in 2011.
    </div>

    <div>Mini</div>
    <div class="message message--info message--mini message--inline">
        Use bulk data to export more than 500,000 records.
    </div>
</div>
 
<div class="container">
<div style="margin-top: 2rem">Big</div>
<div class="message message--alert message--big">
  <h1 class="message__title" tabindex="0">Server error</h1>
  <p>Sorry, this page failed to load. This happened because of an internal error, and our web team has been notified. Please try again, and thanks for your patience.</p>
  <div class="message--alert__bottom">
    <p>If you'd like to contact our team, we're available by <a href="#">email</a> or <a href="#">GitHub</a>.</p>
      <p><a class="button button--cta" href="/">Return home</a></p>
      <p>Or try searching an archive of the <a href="#">old FEC.gov design.</a></p>
  </div>
</div>
</div>

<div class="container">
  <div style="margin-top: 2rem">Standard with action area</div>
  <div class="message message--alert">
    <h2 class="message__title" tabindex="0">Oops!</h2>
    <p>We had trouble processing your request. Please try reloading the page.</p>
    <div class="message--alert__bottom">
      <p>Still can't find what you're looking for?</p>
      <ul class="list--buttons">
          <li><a class="button button--cta" href="#">Return home</a></li>
          <li><a class="button button--standard" href="#">File an issue</a></li>
          <li><a class="button button--standard" href="#">Email our team</a></li>
      </ul>
    </div>
  </div>

  <div>Standard</div>
  <div class="message message--alert">
    <h2 class="message__title" tabindex="0">Oops!</h2>
    We had trouble processing your request. Please try reloading the page.
  </div>

  <div class="message message--info">
    This entity has no financial data for the <strong>2011-2012</strong> election cycle.
  </div>

  <div>Small</div>
  <div class="message message--info message--small">
    Due to the large number of transactions, records begin in 2011.
  </div>

  <div>Mini</div>
  <div class="message message--info message--mini message--inline">
    Use bulk data to export more than 500,000 records.
  </div>
</div>
 
/* No context defined. */
  • Handle: @message-sizes
  • Preview:
  • Filesystem Path: components/02-components/messages/01-message-sizes/message-sizes.html