Bolt - Footer

Variations

1-877 On Your Side (1-877-669-6877)

Info item 1
Info item 2
Info item 3
Info item 4
Info item 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo in quam fermentum pharetra. Vivamus efficitur ullamcorper leo sit amet mattis. Integer sed nisl arcu. Inline link nulla convallis, velit in elementum semper, velit nisi egestas velit, sed condimentum arcu est et justo. Vestibulum pulvinar fringilla risus, in euismod neque vehicula consequat. Aliquam vel nunc eget dui eleifend sodales quis sed enim.

©YYYY Nationwide Mutual Insurance Company and affiliated companies

Nationwide is on your side^®

placeholder for maximum rectangular badge

Code

<footer class="bolt-footer">
  <div class="bolt-container">
    <div class="bolt-footer__head">
      <div class="bolt-footer__intro">
        <div class="bolt-footer__logo">
          <bolt-logo
            color="white"
            href="/"
            type="nw-vertical"
          ></bolt-logo>
        </div>
        <div class="bolt-footer__phone">
          <span class="bolt-footer__phone__alpha">
            1-877 On Your Side
          </span>
          <span>(1-877-669-6877)</span>
        </div>
        <nav class="bolt-footer__social">
          <ul>
            <li>
              <a href="#" aria-label="Nationwide on Facebook">
                <bolt-icon name="facebook"></bolt-icon>
              </a>
            </li>
            <li>
              <a href="#" aria-label="Nationwide on Twitter">
                <bolt-icon name="twitter"></bolt-icon>
              </a>
            </li>
            <li>
              <a href="#" aria-label="Nationwide on Instagram">
                <bolt-icon name="instagram"></bolt-icon>
              </a>
            </li>
            <li>
              <a href="#" aria-label="Nationwide on LinkedIn">
                <bolt-icon name="linkedin"></bolt-icon>
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <nav>
        <ul>
          <li><a href="#">Head Link</a></li>
          <li><a href="#">Head Link</a></li>
          <li><a href="#">Head Link</a></li>
          <li><a href="#">Head Link</a></li>
        </ul>
      </nav>
      <div class="bolt-footer__boxedInfo">
        <ul>
          <li>Info item 1</li>
          <li>Info item 2</li>
          <li>Info item 3</li>
          <li>Info item 4</li>
          <li>Info item 5</li>
        </ul>
      </div>
    </div>
    <div class="bolt-footer__body">
      <nav>
        <header>Body nav heading</header>
        <ul>
          <li><a href="#">Body Link</a></li>
          <li><a href="#">Body Link</a></li>
          <li><a href="#">Body Link</a></li>
          <li><a href="#">Body Link</a></li>
        </ul>
      </nav>
      <div class="bolt-footer__content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo in quam fermentum pharetra. Vivamus efficitur ullamcorper leo sit amet mattis. Integer sed nisl arcu. <a href="#">Inline link</a> nulla convallis, velit in elementum semper, velit nisi egestas velit, sed condimentum arcu est et justo. Vestibulum pulvinar fringilla risus, in euismod neque vehicula consequat. Aliquam vel nunc eget dui eleifend sodales quis sed enim.
        </p>
        <p>
          &copy;YYYY Nationwide Mutual Insurance Company and affiliated companies
        </p>
      </div>
    </div>
    <div class="bolt-footer__tail">
      <div class="bolt-footer__tagline">
        Nationwide is on your side<sup>&reg;</sup>
      </div>
      <nav>
        <ul>
          <li><a href="#">Tail Link</a></li>
          <li><a href="#">Tail Link</a></li>
          <li><a href="#">Tail Link</a></li>
          <li><a href="#">Tail Link</a></li>
        </ul>
      </nav>
      <div class="bolt-footer__badgeList">
        <div class="bolt-footerBadge">
          <a href="#">
            <img
              src="images/placeholder-badge-max.png"
              alt="placeholder for maximum rectangular badge"
            />
          </a>
        </div>
        <div class="bolt-footerBadge">
          <a href="#">
            <img
              src="images/placeholder-badge-max-square.png"
              alt="placeholder for maximum square badge"
            />
          </a>
        </div>
      </div>
    </div>
  </div>
</footer>

1-877 On Your Side (1-877-669-6877)

©YYYY Nationwide Mutual Insurance Company and affiliated companies

Code

<footer class="bolt-footer">
  <div class="bolt-container">
    <div class="bolt-footer__head">
      <div class="bolt-footer__intro">
        <div class="bolt-footer__logo">
          <bolt-logo
            color="white"
            href="/"
            type="nw-vertical"
          ></bolt-logo>
        </div>
        <div class="bolt-footer__phone">
          <span class="bolt-footer__phone__alpha">
            1-877 On Your Side
          </span>
          <span>(1-877-669-6877)</span>
        </div>
      </div>
    </div>
    <div class="bolt-footer__body">
      <div class="bolt-footer__content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo in quam fermentum pharetra. Vivamus efficitur ullamcorper leo sit amet mattis. Integer sed nisl arcu. <a href="#">Inline link</a> nulla convallis, velit in elementum semper, velit nisi egestas velit, sed condimentum arcu est et justo. Vestibulum pulvinar fringilla risus, in euismod neque vehicula consequat. Aliquam vel nunc eget dui eleifend sodales quis sed enim.
        </p>
        <p>
          &copy;YYYY Nationwide Mutual Insurance Company and affiliated companies
        </p>
      </div>
    </div>
  </div>
</footer>

Alternate layouts

By default, footer content will align to a fixed grid container, which caps footer content to a fixed width at each responsive breakpoint.

A footer using the bolt-container-fluid grid class will align content to a fluid grid container.

1-877 On Your Side (1-877-669-6877)

Info item 1
Info item 2
Info item 3
Info item 4
Info item 5

©YYYY Nationwide Mutual Insurance Company and affiliated companies

Nationwide is on your side^®

Code

<footer class="bolt-footer">
  <div class="bolt-container-fluid">
    <div class="bolt-footer__head">
      <div class="bolt-footer__intro">
        <div class="bolt-footer__logo">
          <bolt-logo
            color="white"
            href="/"
            type="nw-vertical"
          ></bolt-logo>
        </div>
        <div class="bolt-footer__phone">
          <span class="bolt-footer__phone__alpha">
            1-877 On Your Side
          </span>
          <span>(1-877-669-6877)</span>
        </div>
        <nav class="bolt-footer__social">
          <ul>
            <li>
              <a href="#" aria-label="Nationwide on Facebook">
                <bolt-icon name="facebook"></bolt-icon>
              </a>
            </li>
            <li>
              <a href="#" aria-label="Nationwide on Twitter">
                <bolt-icon name="twitter"></bolt-icon>
              </a>
            </li>
            <li>
              <a href="#" aria-label="Nationwide on Instagram">
                <bolt-icon name="instagram"></bolt-icon>
              </a>
            </li>
            <li>
              <a href="#" aria-label="Nationwide on LinkedIn">
                <bolt-icon name="linkedin"></bolt-icon>
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <nav>
        <ul>
          <li><a href="#">Head Link</a></li>
          <li><a href="#">Head Link</a></li>
          <li><a href="#">Head Link</a></li>
          <li><a href="#">Head Link</a></li>
        </ul>
      </nav>
      <div class="bolt-footer__boxedInfo">
        <ul>
          <li>Info item 1</li>
          <li>Info item 2</li>
          <li>Info item 3</li>
          <li>Info item 4</li>
          <li>Info item 5</li>
        </ul>
      </div>
    </div>
    <div class="bolt-footer__body">
      <nav>
        <header>Body nav heading</header>
        <ul>
          <li><a href="#">Body Link</a></li>
          <li><a href="#">Body Link</a></li>
          <li><a href="#">Body Link</a></li>
          <li><a href="#">Body Link</a></li>
        </ul>
      </nav>
      <div class="bolt-footer__content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo in quam fermentum pharetra. Vivamus efficitur ullamcorper leo sit amet mattis. Integer sed nisl arcu. <a href="#">Inline link</a> nulla convallis, velit in elementum semper, velit nisi egestas velit, sed condimentum arcu est et justo. Vestibulum pulvinar fringilla risus, in euismod neque vehicula consequat. Aliquam vel nunc eget dui eleifend sodales quis sed enim.
        </p>
        <p>
          &copy;YYYY Nationwide Mutual Insurance Company and affiliated companies
        </p>
      </div>
    </div>
    <div class="bolt-footer__tail">
      <div class="bolt-footer__tagline">
        Nationwide is on your side<sup>&reg;</sup>
      </div>
      <nav>
        <ul>
          <li><a href="#">Tail Link</a></li>
          <li><a href="#">Tail Link</a></li>
          <li><a href="#">Tail Link</a></li>
          <li><a href="#">Tail Link</a></li>
        </ul>
      </nav>
      <div class="bolt-footer__badgeList">
        <div class="bolt-footerBadge">
          <a href="#">
            <img
              src="images/placeholder-badge-max.png"
              alt="placeholder for maximum rectangular badge"
            />
          </a>
        </div>
        <div class="bolt-footerBadge">
          <a href="#">
            <img
              src="images/placeholder-badge-max-square.png"
              alt="placeholder for maximum square badge"
            />
          </a>
        </div>
      </div>
    </div>
  </div>
</footer>

1-877 On Your Side (1-877-669-6877)

©YYYY Nationwide Mutual Insurance Company and affiliated companies

Code

<footer class="bolt-footer">
  <div class="bolt-container-fluid">
    <div class="bolt-footer__head">
      <div class="bolt-footer__intro">
        <div class="bolt-footer__logo">
          <bolt-logo
            color="white"
            href="/"
            type="nw-vertical"
          ></bolt-logo>
        </div>
        <div class="bolt-footer__phone">
          <span class="bolt-footer__phone__alpha">
            1-877 On Your Side
          </span>
          <span>(1-877-669-6877)</span>
        </div>
      </div>
    </div>
    <div class="bolt-footer__body">
      <div class="bolt-footer__content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo in quam fermentum pharetra. Vivamus efficitur ullamcorper leo sit amet mattis. Integer sed nisl arcu. <a href="#">Inline link</a> nulla convallis, velit in elementum semper, velit nisi egestas velit, sed condimentum arcu est et justo. Vestibulum pulvinar fringilla risus, in euismod neque vehicula consequat. Aliquam vel nunc eget dui eleifend sodales quis sed enim.
        </p>
        <p>
          &copy;YYYY Nationwide Mutual Insurance Company and affiliated companies
        </p>
      </div>
    </div>
  </div>
</footer>

Code reference

Quick Links

Head
Body
- Body Nav
- Content
Tail
- Tagline
- Tail Nav
- Badge List
  - Badge

Apply the bolt-footer class to a <div> element
Add a Grid container as the first child
Define child elements within the grid container

The footer is composed of the following, ordered children:

Order	Child	required?	CSS selector
1	Head	REQUIRED	`.bolt-footer__head`
2	Body	REQUIRED	`.bolt-footer__body`
3	Tail	optional	`.bolt-footer__tail`

Code

<div class="bolt-footer">
  <div class="bolt-container">
    <div class="bolt-footer__head">head...</div>
    <div class="bolt-footer__body">body...</div>
    <div class="bolt-footer__tail">tail...</div>
  </div>
</div>

Apply the bolt-footer__head class to a <div> child of the footer
Define child elements

The footer head is composed of the following, ordered children:

Order	Child	required?	CSS selector
1	Intro	REQUIRED	`.bolt-footer__intro`
2	Head Nav	optional	`nav`
3	Boxed Info	optional	`.bolt-footer__boxedInfo`

Code

<div class="bolt-footer">
  <div class="bolt-container">
    <div class="bolt-footer__head">
      <div class="bolt-footer__intro">intro...</div>
      <nav>nav...</nav>
      <div class="bolt-footer__boxedInfo">
        boxed info...
      </div>
    </div>
    <!-- ...footer body -->
    <!-- ...footer tail -->
  </div>
</div>

Apply the bolt-footer__intro class to a <div> child of the footer head
Define child elements

The footer intro is composed of the following children:

Child	required?	CSS selector
Logo	REQUIRED	`.bolt-footer__logo`
Phone	REQUIRED	`.bolt-footer__phone`
Social	optional	`nav.bolt-footer__social`

1-877 On Your Side (1-877-669-6877)

Code

<div class="bolt-footer">
  <div class="bolt-container">
    <div class="bolt-footer__head">
      <div class="bolt-footer__intro">
        <!-- Logo -->
        <div class="bolt-footer__logo">
          <bolt-logo
            color="white"
            href="/"
            type="nw-vertical"
          ></bolt-logo>
        </div>
        <!-- Phone -->
        <div class="bolt-footer__phone">
          <span class="bolt-footer__phone__alpha">
            1-877 On Your Side
          </span>
          <span>(1-877-669-6877)</span>
        </div>
        <!-- Social -->
        <nav class="bolt-footer__social">
          <ul>
            <li>
              <a href="#" aria-label="Nationwide on Facebook">
                <bolt-icon name="facebook"></bolt-icon>
              </a>
            </li>
            <li>
              <a href="#" aria-label="Nationwide on Twitter">
                <bolt-icon name="twitter"></bolt-icon>
              </a>
            </li>
            <li>
              <a href="#" aria-label="Nationwide on Instagram">
                <bolt-icon name="instagram"></bolt-icon>
              </a>
            </li>
            <li>
              <a href="#" aria-label="Nationwide on LinkedIn">
                <bolt-icon name="linkedin"></bolt-icon>
              </a>
            </li>
            <!-- ...additional links -->
          </ul>
        </nav>
      </div>
    </div>
    <!-- ...footer body -->
    <!-- ...footer tail -->
  </div>
</div>

Define a <nav> child of the footer head.
Define child elements

The footer head nav is composed of the following, ordered children:

Order	Child	required?	CSS selector
1	Heading	optional	`header`
2	Nav List	REQUIRED	`ul > li > a[href]`

Code

<div class="bolt-footer">
  <div class="bolt-container">
    <div class="bolt-footer__head">
      <nav>
        <!-- optional -->
        <header>Head nav heading</header>
        <!-- required -->
        <ul>
          <li><a href="#">Head Link</a></li>
          <li><a href="#">Head Link</a></li>
          <li><a href="#">Head Link</a></li>
          <li><a href="#">Head Link</a></li>
          <!-- ...additional links -->
        </ul>
      </nav>
    </div>
    <!-- ...footer body -->
    <!-- ...footer tail -->
  </div>
</div>

Apply the bolt-footer__boxedInfo class to a <div> child of the footer head
Define an unordered list (<ul>) with one ore more list items

Code

<div class="bolt-footer">
  <div class="bolt-container">
    <div class="bolt-footer__head">
      <div class="bolt-footer__boxedInfo">
        <ul>
          <li>Info item 1</li>
          <li>Info item 2</li>
          <li>Info item 3</li>
          <li>Info item 4</li>
          <li>Info item 5</li>
          <!-- ...additional items -->
        </ul>
      </div>
    </div>
    <!-- ...footer body -->
    <!-- ...footer tail -->
  </div>
</div>

Footer Body

Apply the bolt-footer__body class to a <div> child of the footer
Define child elements

The footer body is composed of the following, ordered children:

Order	Part	required?	CSS selector
1	Body Nav	optional	`nav`
2	Content	REQUIRED	`.bolt-footer__content`

Code

<div class="bolt-footer">
  <div class="bolt-container">
    <!-- ...footer head -->
    <div class="bolt-footer__body">
      <nav>body nav...</nav>
      <div class="bolt-footer__content">content...</div>
    </div>
    <!-- ...footer tail -->
  </div>
</div>

Footer Body Nav

Define a <nav> child of the footer body
Define child elements

The footer body nav is composed of the following, ordered children:

Order	Child	required?	CSS selector
1	Heading	optional	`header`
2	Nav List	REQUIRED	`ul > li > a[href]`

Code

<div class="bolt-footer">
  <div class="bolt-container">
    <!-- ...footer head -->
    <div class="bolt-footer__body">
      <nav>
        <header>Body nav heading</header>
        <ul>
          <li><a href="#">Body Link</a></li>
          <li><a href="#">Body Link</a></li>
          <li><a href="#">Body Link</a></li>
          <li><a href="#">Body Link</a></li>
        </ul>
      </nav>
    </div>
    <!-- ...footer tail -->
  </div>
</div>

Footer Content

Apply the bolt-footer__content class to a <div> child of the footer body.
Define content

©YYYY Nationwide Mutual Insurance Company and affiliated companies

Code

<div class="bolt-footer">
  <div class="bolt-container">
    <!-- ...footer head -->
    <div class="bolt-footer__body">
      <div class="bolt-footer__content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo in quam fermentum pharetra. Vivamus efficitur ullamcorper leo sit amet mattis. Integer sed nisl arcu. <a href="#">Inline link</a> nulla convallis, velit in elementum semper, velit nisi egestas velit, sed condimentum arcu est et justo. Vestibulum pulvinar fringilla risus, in euismod neque vehicula consequat. Aliquam vel nunc eget dui eleifend sodales quis sed enim.
        </p>
        <p>
          &copy;YYYY Nationwide Mutual Insurance Company and affiliated companies
        </p>
      </div>
    </div>
    <!-- ...footer tail -->
  </div>
</div>

Apply the bolt-footer__tail class to a <div> child of the footer.
Define child elements

The footer tail is composed of one or more of the following, ordered children:

Order	Child	required?	CSS selector
1	Tagline	optional	`.bolt-footer__tagline`
2	Tail Nav	optional	`nav`
3	Badge List	optional	`.bolt-footer__badgeList`

Code

<div class="bolt-footer">
  <div class="bolt-container">
    <!-- ...footer head -->
    <!-- ...footer body -->
    <div class="bolt-footer__tail">
      <div class="bolt-footer__tagline">tagline...</div>
      <nav>tail nav...</nav>
      <div class="bolt-footer__badgeList">badge list...</div>
    </div>
  </div>
</div>

Apply the bolt-footer__tagline class to a <div> child of the footer tail

Code

<div class="bolt-footer">
  <div class="bolt-container">
    <!-- ...footer head -->
    <!-- ...footer body -->
    <div class="bolt-footer__tail">
      <div class="bolt-footer__tagline">
        Nationwide is on your side<sup>&reg;</sup>
      </div>
    </div>
  </div>
</div>

Define a <nav> child of the footer tail
Define child elements

The footer tail nav is composed of the following, ordered children:

Order	Child	required?	CSS selector
1	Heading	optional	`header`
2	Nav List	REQUIRED	`ul > li > a[href]`

Code

<div class="bolt-footer">
  <div class="bolt-container">
    <!-- ...footer head -->
    <!-- ...footer body -->
    <div class="bolt-footer__tail">
      <nav>
        <header>Tail nav heading</header>
        <ul>
          <li><a href="#">Tail Link</a></li>
          <li><a href="#">Tail Link</a></li>
          <li><a href="#">Tail Link</a></li>
          <li><a href="#">Tail Link</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>

Apply the bolt-footer__badgeList class to a <div> child of the footer tail
Define one or more badge children

Code

<div class="bolt-footer">
  <div class="bolt-container">
    <!-- ...footer head -->
    <!-- ...footer body -->
    <div class="bolt-footer__tail">
      <div class="bolt-footer__badgeList">
        badge list...
      </div>
    </div>
  </div>
</div>

Apply the bolt-footerBadge class to a <div> child of the footer badge list.
Define an image-only link (a > img) as the only child element
- Make sure that the hyperlink is properly configured for accessibility, using a[aria-label].

Code

<div class="bolt-footer">
  <div class="bolt-container">
    <!-- ...footer head -->
    <!-- ...footer body -->
    <div class="bolt-footer__tail">
      <div class="bolt-footer__badgeList">
        <div class="bolt-footerBadge">
          <a href="#" aria-label="link description goes here">
            <img
              src="images/placeholder-badge-max.png"
              alt="placeholder for maximum badge dimensions"
            />
          </a>
        </div>
        <div class="bolt-footerBadge">
          <a href="#" aria-label="link description goes here">
            <img
              src="images/placeholder-badge-max-square.png"
              alt="placeholder for maximum square badge dimensions"
            />
          </a>
        </div>
        <!-- ...additional badges -->
      </div>
    </div>
  </div>
</div>

Design guidelines

General guidelines

Footer is the section at the very bottom of a web page that appears on every page of the site. It typically contains a copyright notice, Links to important pages, contact information, and other key details. It should be consistent from page to page. It should also be predictable and easily discoverable.
A site’s footer is a clear signal to visitors that they have arrived at the end of a page.
Footer should be used to provide information about Nationwide, including legal and contact details. It should also provide access to Nationwide's site appropriate social media channels.

Full

For use on pages that are not inside a focused task.

Minimal

For use in focused tasks, like a form flow.
Should remove any Links and should only display regulatory information required by law.

Footer badges are used for displaying third-party logos for regulatory or credential verification. When used, ensure each badge links to its corresponding website or app store.
Also, consider including badges to guide users to install native mobile applications.
Third-party badges should not exceed 68px in height and 148px in width.

Do

Keep it organized.
Make it scannable.
Include the Nationwide Logo and tagline.
Use the provided colors for the Footer background and Links.
Use a Minimal Footer when users are in a focused task screen.

Don't

Don’t use Nationwide’s Footer to provide a site map or redundant site navigation.
Don't include Links or Buttons inside Footer when a user is navigating a focused process.
Don’t anchor the Footer to the bottom of the screen. This can create a “false bottom” where the user does not know whether they have reached the actual bottom of the screen or not.
Don’t use Footer inside other page components (e.g. Header, Modal, etc).

Content guidelines

Refer to the content guidelines sections in the Design guidelines tabs for Link and Button.

Accessibility

All Bolt components have gone through accessibility testing, but please keep our accessibility guidelines in mind.

Core foundations

Theming

Scaling

Visual Style

Content design

Using Bolt

Styling

Web components

HTML patterns

Components

About Bolt

General

Footer

Alternate layouts

Quick Links

Footer anatomy

Footer Head

Footer Intro

Footer Head Nav

Footer Boxed Info

Footer Body

Footer Body Nav

Footer Content

Footer Tail

Footer Tagline

Footer Tail Nav

Footer Badge List

Footer Badge

General guidelines

Two different types of footer: full and minimal

Full

Minimal

Footer badges

Do

Don't

Content guidelines

Display settings