Site Banner

The site banner is used to broadcast information across multiple pages. There are two color options: .site-banner-warning and .site-banner-info.

See an example on a mockup page

It is recommened to use an <aside> tag to house the content. The header uses simply a <header> tag which comes along with all the correct styling. The body uses the .site-banner-body class to get the correct stylings for the content.

A site-wide communication banner appears above the header of a website. It is the first component at the top of the page.

A communication banner can be used in contexts such as:

• Significant changes to the website that we wish to communicate to the site users
• Announcements about the site that can impact user work—like outages, site maintenance, etc.
• Alpha/beta status of the site

1. Banner will align to first, left column of grid.
2. Banner is not anchored at the top of the screen. When user scrolls, the banner scrolls with page content.
3. Content/text will wrap as screen size decreases. No truncation as this is important/critical messaging.
4. No dismissible variant. Banner stays on the site as long as back-end implementation stays.
5. Link to a page with more details can be added to the banner, which will right align with the last line of the descriptive text.
6. Mobile version will display the link below the description text.

<aside class="site-banner site-banner-info">
  <div class="container stack stack-2">
    <header>Same ICPSR data, new look!</header>
    <div class="site-banner-body">
      <p>
        Study home pages now have a new view. The Classic view will be available
        for a limited time in case you need it.
      </p>
      <a href="#">Take me to the Classic view.</a>
    </div>
  </div>
</aside>

<aside class="site-banner site-banner-warning">
  <div class="container stack stack-2">
    <div class="site-banner-body">
      <p>
        ICPSR dissemination pages will be down for regular between 10:00pm and
        11:00pm ET on Sunday, March 24.
      </p>
    </div>
  </div>
</aside>

<aside class="site-banner site-banner-info">
  <div class="px-3 stack stack-2">
    <header>All the way to the edge and back!</header>
    <div class="site-banner-body">
      <p>Check it out, so much space! 🚀👨‍🚀</p>
    </div>
  </div>
</aside>

No custom variables.