Horizontal logo
Vertical logo
Logo mark
Logo
Logos are graphic symbols that represent a company or organization.
Refer to Nationwide's brand guidelines for correct use of the Nationwide logo. Please use Bolt's Web Component or another authorized source to implement logos. DO NOT SAVE AND RE-HOST THE LOGO IMAGES.
<bolt-logo></bolt-logo>
<bolt-logo type="nw-vertical"></bolt-logo>
<bolt-logo type="nw-mark"></bolt-logo>
Horizontal logo
Vertical logo
Logo mark
<div class="bolt-background-charcoal">
<bolt-logo color="white"></bolt-logo>
<bolt-logo color="white" type="nw-vertical"></bolt-logo>
<bolt-logo color="white" type="nw-mark"></bolt-logo>
</div>
Horizontal logo
Vertical logo
Logo mark
<bolt-logo size="sm"></bolt-logo>
<bolt-logo type="nw-vertical" size="sm"></bolt-logo>
<bolt-logo type="nw-mark" size="sm"></bolt-logo>
Horizontal logo
Vertical logo
Logo mark
<bolt-logo size="lg"></bolt-logo>
<bolt-logo type="nw-vertical" size="lg"></bolt-logo>
<bolt-logo type="nw-mark" size="lg"></bolt-logo>The bolt-logo web component displays a Nationwide logo.
<bolt-logo></bolt-logo>The component supports the following attributes:
<bolt-logo type="nw-horizontal" color="full" href="/" alt="Nationwide logo" size="md"></bolt-logo>type: optional.nw-horizontal(default), the full logo with N and eagle and "Nationwide" to the right;nw-vertical, the N and eagle placed vertically over a smaller "Nationwide"; ornw-mark, only the N and eagle.color: optional.full(default),white, whether to render the logo in full color for use on light backgrounds, or in white for use on dark backgrounds.size: optional.md(default),sm,lg, size to render the logo.href: optional. Sets the URL to navigate to when the logo is clicked. Wraps the logo in anAtag and adds a hover state.allowhover: optional. If present, this adds the hover state to a logo that does not have anhref. This option should be used when the logo does not have anhref, but does have some other behavior on click, e.g. via the Angular[routerLink]directive.alt: optional. Defaults to "Nationwide logo". Sets the alt text for the logo image.
General guidelines
Permalink to "General guidelines"- When using Logo, comply with Nationwide's Brand Guidelines.
- Avoid copyright issues; do not use third-party artwork.
When to use
Permalink to "When to use"- To support visual branding of a Nationwide product or page.
- To convey to users that the digital experience is authorized by the company or organization.
When not to use
Permalink to "When not to use"- Do not use for any user experience not authorized by the company or organization identified by the Logo.
Do
- Use only in available variations.
- If the user IS logged in, link the Logo to the top-level screen of the authenticated site (e.g., the page a user lands on when first logging in).
- If the user is NOT logged in, link the Logo to the home page of the site.
Don't
- Don't apply a stroke to the Logo.
- Don't recolor any part of the Logo.
- Don't transform, scale, or alter the Logo in any way.
- Don't rearrange the Logo in any way.
- Don't apply drop shadow or effects to the Logo.
- Don't rotate the Logo in any way.
- Don't distort the Logo in any way.
- Don't use the Logo as a framing device for imagery.
- Don't use the Logo in a line of text.
Accessibility compliance
Permalink to "Accessibility compliance"-
WCAG 2.2 Compliant
-
JAWS 2025 Tested
-
NVDA 2025 Tested
-
VoiceOver Tested
-
Keyboard Tested
-
aXe Tested
All Bolt components have gone through accessibility testing, but please keep our accessibility guidelines in mind.