Links

Links

We use a variety of link styles depending on function and context. We use at least two visual characteristics in combination to denote links (e.g., color and underline or color and heavier weight).

  • links with relatively heavy font weight (400)
  • underline on hover
  • underlined until hover
  • comprises the majority of links on the site
  • relatively heavy font weight (400)
  • proceeded by an icon

External sites, typically data providers

  • relatively heavy font weight
  • trailing arrow

Glossary

These aren’t technically links, but rather span elements that toggle an interactive glossary

  • dotted underline style with book icons
<!-- <div class=""></div> -->

<div class="preview">
    <div class="container-margin">
        <!-- floating link style -->
        <a href="#">Floating links are underlined only on hover</a></p>
    </div>
    <!-- inline link style -->
    <div class="container-margin">
        <p>Links within sentences (or otherwise surrounded by non-linked words) <a href="#">are underlined</a>, so they can be seen more easily.</p>
    </div>

    <!-- new: link-icon-doc -->
    <div class="chart-selector-wrapper">

        <div class="chart-description">
            <p>
                The Energy Information Administration collects data about energy-related natural resources produced on federal, state, and privately owned lands and waters. This data does not include information about nonenergy minerals.
            </p>
            <p>
                <a href="/downloads/#all-lands-and-waters">
          <object type="image/svg+xml" data="../../img/icons/file-text-o.svg" class="u-padding-right icon-small">
          </object>Data and documentation
        </a>
            </p>
        </div>
    </div>

    <!-- rename?: downloads-download_links -->
    <div class="container-margin">
        <ul class="downloads-download_links list-unstyled">
            <li>
                <a href="#">
                    <icon class="icon-cloud icon-padded"></icon>Text link with download icon</a>
            </li>
        </ul>
    </div>

    <!-- external link -->
    <ul class="list-sections list-unstyled">
        <li class="downloads-download_links">
            <div class="container-margin">
                <a href="http://www.bea.gov/API/signup/index.cfm">Go to BEA API docs →</a>
            </div>
        </li>
    </ul>

    <!-- term -->
    <div class="container-margin">
        <p>A dotted underline (and trailing book icon) indicates a <span class="term" data-term="extractive industry" title="[term name]" tabindex="0">technical term<icon class="icon-book"></icon></span> which is defined in the glossary.</p>
    </div>

    <!-- term term-end -->
    <div class="container-margin">
        <p>If punctuation immediately follows a glossary term, <span class="term
    " data-term="extractive industry" title="[term name]" tabindex="0">like this<icon class="icon-book"></icon></span>, the <strong>.term-end</strong> style should also be included. This shifts the punctuation closer to the icon.</p>
    </div>

</div>
<!-- <div class="{{ className }}">{{ text }}</div> -->

<div class="preview">
  <div class="container-margin">
  <!-- floating link style -->
    <a href="#">Floating links are underlined only on hover</a></p>
  </div>
  <!-- inline link style -->
  <div class="container-margin">
    <p>Links within sentences (or otherwise surrounded by non-linked words) <a href="#">are underlined</a>, so they can be seen more easily.</p>
  </div>

  <!-- new: link-icon-doc -->
  <div class="chart-selector-wrapper">

    <div class="chart-description">
      <p>
        The Energy Information Administration collects data about energy-related natural resources produced on federal, state, and privately owned lands and waters. This data does not include information about nonenergy minerals.
      </p>
      <p>
        <a href="{{site.baseurl}}/downloads/#all-lands-and-waters">
          <object type="image/svg+xml" data="../../img/icons/file-text-o.svg" class="u-padding-right icon-small">
          </object>Data and documentation
        </a>
      </p>
    </div>
  </div>

  <!-- rename?: downloads-download_links -->
  <div class="container-margin">
    <ul class="downloads-download_links list-unstyled">
      <li><a href="#"><icon class="icon-cloud icon-padded"></icon>Text link with download icon</a></li>
    </ul>
  </div>

  <!-- external link -->
  <ul class="list-sections list-unstyled">
      <li class="downloads-download_links">
  <div class="container-margin">
    <a href="http://www.bea.gov/API/signup/index.cfm">Go to BEA API docs →</a>
  </div>
    </li>
  </ul>

  <!-- term -->
  <div class="container-margin">
    <p>A dotted underline (and trailing book icon) indicates a <span class="term" data-term="extractive industry" title="[term name]" tabindex="0">technical term<icon class="icon-book"></icon></span> which is defined in the glossary.</p>
  </div>

  <!-- term term-end -->
  <div class="container-margin">
    <p>If punctuation immediately follows a glossary term,  <span class="term
    " data-term="extractive industry" title="[term name]" tabindex="0">like this<icon class="icon-book"></icon></span>, the <strong>.term-end</strong> style should also be included. This shifts the punctuation closer to the icon.</p>
  </div>

</div>
/* No context defined for this component. */