Add "centered" banner component variant

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### New Features
 
 - Add SVG format option for favicon image. ([#424](https://github.com/18F/identity-design-system/pull/424))
+- Add "centered" variant for banner component. ([#429](https://github.com/18F/identity-design-system/pull/429))
 
 ### Improvements
 

docs/_components/banner.md

@@ -0,0 +1,20 @@
+---
+title: Banner
+lead: Banners identify official websites of government organizations in the United States. They also help visitors understand whether a website is official and secure.
+---
+
+{% include helpers/base-component.html component="banner" %}
+
+## Default
+
+{% capture example %}
+{% include banner.html id="gov-banner-default" %}
+{% endcapture %}
+{% include helpers/code-example.html code=example %}
+
+## Centered
+
+{% capture example %}
+{% include banner.html centered=true id="gov-banner-centered" %}
+{% endcapture %}
+{% include helpers/code-example.html code=example %}

docs/_includes/banner.html

@@ -1,5 +1,11 @@
+{% comment %}
+include
+- id (optional, default "gov-banner")
+- centered (optional, default false)
+{% endcomment %}
+{% assign banner_id = include.id | default: 'gov-banner' %}
 <section
-  class="usa-banner"
+  class="usa-banner{% if include.centered %} usa-banner--centered{% endif %}"
   aria-label="Official website of the United States government"
 >
   <div class="usa-accordion">
@@ -25,13 +31,13 @@
           type="button"
           class="usa-accordion__button usa-banner__button"
           aria-expanded="false"
-          aria-controls="gov-banner"
+          aria-controls="{{ banner_id }}"
         >
           <span class="usa-banner__button-text">Here’s how you know</span>
         </button>
       </div>
     </header>
-    <div class="usa-banner__content usa-accordion__content" id="gov-banner">
+    <div class="usa-banner__content usa-accordion__content" id="{{ banner_id }}">
       <div class="grid-row grid-gap-lg">
         <div class="usa-banner__guidance tablet:grid-col-6">
           <img

src/scss/packages/usa-banner/src/_overrides.scss

@@ -17,6 +17,12 @@
   }
 }
 
+.usa-banner--centered .usa-banner__inner {
+  @include at-media('tablet') {
+    justify-content: center;
+  }
+}
+
 .usa-accordion__button.usa-banner__button {
   // Reset default accordion button border styling for banner button.
   @include u-border(0);