Link

By default, there is no underline on a link that includes an icon. When a link contains both an icon and inline text, use the .bolt-link utility class to ensure text underline styles are applied.

<a class="bolt-link" href="#" rel="noopener noreferrer" target="_blank" title="open new window">
  Find an agent <bolt-icon fluid name="external-link" size="sm"></bolt-icon>
</a>

Skip links offer keyboard users, particularly sighted keyboard users, a shortcut to move focus to the main content area. The skip link is visually hidden until the user navigates to it using keyboard focus.

To see this in action, focus the skip link at the top of this page.

<a class="bolt-skiplink" href="#mainContent">Skip to main content</a>
...
<div id="mainContent">
  <h1>Heading</h1>
  <p>Content</p>
...
</div>

<section class="bolt-space-bottom-xl">
  <p>
    A 10% discount on your property insurance — average savings of $50 per year. <a href="#explanation1" id="footnotes1" class="bolt-footnote-link">[1]</a>

    Water damage is the source of most insurance claims — almost 25%, in fact. And the average cost of these claims is $11,650. <a href="#explanation2" id="footnotes2" class="bolt-footnote-link opt1">[2]</a>

    Offer available for a limited time only. <a href="#explanation3" id="footnotes3" class="bolt-footnote-link opt2">[3]</a>
  </p>

  <!-- additional page content... -->
</section>

<hr class="bolt-space-bottom-xl">

<div class="bolt-footnote-list">
  <!-- 1 paragraph body -->
  <div class="bolt-footnote">
    <p
      class="bolt-footnote__body"
      id="explanation1"
      tabindex="0"
    >
      Duis at tellus...
    </p>

    <!-- MUST be after body -->
    <a
      aria-label="return to content"
      class="bolt-footnote__return"
      href="#footnotes1"
    >1</a>
  </div>

  <!-- multi-paragraph body -->
  <div class="bolt-footnote">
    <!-- MUST use DIV to wrap paragraphs -->
    <div
      class="bolt-footnote__body"
      id="explanation2"
      tabindex="0"
    >
      <p>Lorem ipsum...</p>
      <p>Vitae suscipit tellus...</p>
    </div>

    <!-- MUST be after body -->
    <a
      aria-label="return to content"
      class="bolt-footnote__return"
      href="#footnotes2"
    >2</a>
  </div>

  <!-- 1 sentence body -->
  <div class="bolt-footnote">
    <p
      class="bolt-footnote__body"
      id="explanation3"
      tabindex="0"
    >
      Lorem ipsum...
    </p>

    <!-- MUST be after body -->
    <a
      aria-label="return to content"
      class="bolt-footnote__return"
      href="#footnotes3"
    >3</a>
  </div>
</div>

Links to PDF documents should have "(PDF)" appended inside the <a> tag (see example in Variations).

a.bolt-footnote-link # 1

...

.bolt-footnote-list # 2
  .bolt-footnote            # 3
    .bolt-footnote__body    # 3a
    a.bolt-footnote__return # 3b

1. a.bolt-footnote-link -- inline link for navigating to a footnote
   • MUST have [href] target matching the [id] of an associated .bolt-footnote__body element
   • Content MUST be displayed in the format of "[N]", where N is a number
2. .bolt-footnote-list -- wrapper/container for all footnotes
3. .bolt-footnote -- an individual footnote
   1. .bolt-footnote__body -- footnote content / definition
      • MUST have [tabindex="0"]
      • MUST have [id] matching the [href] of associated a.bolt-footnote-link
   2. a.bolt-footnote__return -- return link to the associated inline link
      • MUST have [href] target matching [id] of associated a.bolt-footnote-link
      • MUST be last in DOM order
      • MUST have [aria-label="return to content"]
      • Content MUST be a number matching the number in the associated a.bolt-footnote-link
        • if a.bolt-footnote-link is "[8]", this must have content of "8"

• Links should not look like buttons, except in rare circumstances.
• The text of a Link alone should convey its purpose.
• Link size should match text size and line height (or be complimentary) of nearby content.
• Write out email and phone Links.
• Open a Link's destination in the same browser tab unless necessary for specific cases (e.g., linking to an external site).
• A Link to an external site should have a small "external-link" Icon, otherwise avoid using Icons as an indicator of a Link; rather, rely on clear link text.
• Links MUST maintain a 4.5:1 contrast ratio against any surface color.
• Make sure (color-blind) users can easily make a visual distinction between body text and Links by implementing one of these options:
  • Option A: link text should be underlined in its default state. Its hover state temporarily removes the underline.
  • Option B: use a color contrast of 3:1 between Links and body text. Use a color contrast of 4.5:1 for a Link's hover and focus state color and the surface color it is placed on. Use a redundant indicator such as an underline for a Link's hover state.
• Do not try to disable a Link. It is not semantically possible to disable a Link. Consider using a tertiary Button instead if an action is being triggered, or hide the Link if it is not applicable in a certain situation.

• Use to initiate an action (e.g., call a phone number, send an email).
• When directing users to another page or jumping to a different portion of the same page.
• Highlighting URL destinations.

• Avoid using a Link in a heading, as headings aren't easily recognizable as interactive elements.

• If there are actions that change data, manipulate display, or trigger actions, use Button or Chip.
• Don't use Links for actions; use Buttons instead.
• If you need to draw visual attention to an area, consider a Button or Tile.

• Link labels should use sentence case.
• Link labels should describe a single event or action.
• Link labels should be short with recognizable "trigger words."
• Avoid including the word "link" in the Link text.

• Place footnotes at the bottom of the same page, chart or spread where the superscript number appears in the main text - unless advised otherwise by Compliance.
• Sequentially mark footnotes in the order they appear in the main text.
• Format with a left-aligned, plain-text style, without bullets or special formatting.
• Always include a full citation the first time you reference a source.
• Repeated footnotes need only have the footnote reference number in the copy; no need to repeat the footnote explanation at the bottom of the page; this is for space and simplicity considerations.

• Cite author’s names as they appear within the text; don’t replace names with initials.
• If no author is listed, organize the entry by title.
• Use this order for footnotes: title, source, date, page (if from a book).
• Reference numbers:
  • follow a comma or a period (e.g., There are more than 3,000 stocks on the New York Stock Exchange.¹)
  • goes inside a colon or semicolon.
  • follow the closing parenthesis unless the reference number directly refers to info in the parentheses — then it is included in the parentheses (e.g., Despite risking investigation by federal agents, tax protesters use bits and pieces of history (and various interpretations of the Constitution and federal laws¹) to bolster their belief that sidestepping taxes is not a crime.)
• Use a period at the end of each footnote.
• Use quotation marks around titles of books or reference books cited in footnotes as well as around article titles.
• Use full date, if available, in parentheses (Sept. 29, 2022) or month and year (September 2022) or just the year (2022); year isn’t needed if it’s part of the title.

• Links MUST maintain a 4.5:1 contrast ratio against any background color.
• Avoid relying on color alone to distinguish Links. But, if that is the only indicator, it MUST maintain at least a 3:1 contrast ratio for its color compared to surrounding text.
• Ensure that a Link’s hover state is applied on focus for both mouse and keyboard users.
• Provide visible focus states for Links.
• Allow keyboard navigation of Links.

• Links should make sense out of context. Phrases such as "click here", "more" and "click for details" and so on are ambiguous when read out of context.
• Users must be able to navigate to and select each link using the keyboard alone. In most browsers, the Tab key allows users to jump from link to link, and the Enter key allows users to select a link.
• When images are used as links, it MUST have alternative text that matches the link description so someone using a screen reader understands the purpose of the link.
• Include a non-empty href attribute to be considered true links and to be accessible to keyboard users.
• When a link doesn't have context that describes where the link goes, include an aria-label that describes the link. For example :

    <a href="december_2019_financial_report.pdf" aria-label="December 2019 Financial Report PDF Document">Click here to download</a>
  

• When a link forces users to leave the current window or tab, please add title="open new window" in <a href> attribute.
• Include an aria-describedby IF there is element visible on the page that describes the link.

    <a href="" aria-label="Close" aria-describedby="closeThisWindow"
        onclick="myDialog.close()">X</a>
    ...
    <div id="closeThisWindow">Closing this window will discard any information</div>
  

• DO NOT include "link" in the link text, because screen reader users already know that the link is a link
• DO NOT include negative TABINDEX, such as <a tabindex="-1" href="/" ></a>, because it will remove keyboard focus
• DO NOT write aria-label text in all caps, screen readers read all cap text one letter at a time
• DO NOT include dashes or mathematical characters within an aria-label; these symbols are not recognized by screen readers.
• DO NOT add outline:none in *:focus, because it will disable a visible outline around the element where the keyboard focus is.
• DO NOT omit href from the link, because it will not receive keyboard focus.
• Footnote link :
  • A footnote link at the end of a sentence does not need to meet the 44x44 pixels touch target size requirements. The footnote at the end of the sentence is considered to be part of the sentence.
  • Targeted footnote background can be updated to fit design requirements, but please make sure foreground vs background contrast meets at least 4.5:1 color contrast ratio.

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