add badge code and guidance

docs/_components/badges.md

@@ -0,0 +1,33 @@
+---
+title: Badges
+lead: >
+  Badges are used to encourage user behavior throughout the site.
+---
+
+Badges can help signal to the user that they had completed a workflow desired by Login.gov. Primarily, these are used on our user account page to encourage more secure practices.
+
+Badges are comprised with a div using the `lg-verification-badge` class and a small SVG image alongside a `span` of text.
+
+## An unphishable badge example
+
+The unphishable badge is used to indicate that an account is only using security keys as its MFA method.
+
+{% capture example %}
+<div class="lg-verification-badge">
+  <img src="{{ site.baseurl }}/assets/img/alerts/unphishable.svg" width="16" height="16" class="text-middle" alt="unphishable icon" id="unphishable_badge" />
+  <span>Unphishable</span>
+</div>
+{% endcapture %}
+{% include helpers/code-example.html code=example %}
+
+## A verified account badge example
+
+A verfied account badge is used to indicate that an account has completed the identity verification process.
+
+{% capture example %}
+<div class="lg-verification-badge">
+  <img src="{{ site.baseurl }}/assets/img/alerts/success-badge.svg" width="16" height="16" class="text-middle" alt="verification icon" id="verified_account_badge" />
+  <span>Verified Account</span>
+</div>
+{% endcapture %}
+{% include helpers/code-example.html code=example %}

src/scss/components/_verification-badge.scss

@@ -0,0 +1,26 @@
+.lg-verification-badge {
+
+  background-color: map-get($site-palette, 'site-white');
+  border: units(1px) solid map-get($site-palette, 'site-green');
+  border-radius: $theme-border-radius-xxl;
+  box-sizing: border-box;
+  display: inline-block;
+  padding: units(1) units(2);
+  white-space: nowrap;
+
+  img {
+    margin-right: units(1);
+  }
+
+  span {
+    vertical-align: text-top;
+  }
+}
+
+@media #{$theme-site-margins-breakpoint} {
+  .lg-verification-badge {
+    margin: units(-1) 0 0;
+    position: static;
+    text-align: right;
+  }
+}

src/scss/styles.scss

@@ -24,3 +24,4 @@
 @import 'components/sidenav';
 @import 'components/typography';
 @import 'components/tooltips';
+@import 'components/verification-badge';

src/scss/uswds-theme/_color.scss

@@ -43,6 +43,7 @@ $site-palette: (
   'site-dark-green': #116523,
   'site-green': #18852e,
   'site-light-green': #ebfcef,
+  'site-white': #ffffff,
 );
 
 $project-color-shortcodes: $site-palette;

src/scss/uswds-theme/_spacing.scss

@@ -41,6 +41,7 @@ Border radius
 $theme-border-radius-sm:       2px;
 $theme-border-radius-md:       0.5;
 $theme-border-radius-lg:       1;
+$theme-border-radius-xxl: 24px !default;
 
 /*
 ----------------------------------------