Skip Navigation

Links

Links are used to provide navigation to another screen or prompt the display of additional information on the current screen.

Available in React


When to Use

  • When the interactivity of a link is strongly implied by its context or wording.

Examples

The language includes over 40 coded user interface elements, including buttons, form controls, navigation, modals and more, as well as several page templates. We’re continuing to release additional components to meet the needs of our diverse product suite.


When to Use

  • Use for access points that appear within body text, ordered, and unordered lists.

When Not to Use

  • Do not use when an action needs to be prominently displayed. Instead, use a button.
  • When the link appears in a stand-alone context (not within a string of text).

Additional Guidelines

When access to a page or resource is unavailable to a user due to lack of permissions or similar reasons, it is recommended that the link pointing to that page be made unavailable to the user by removing the link itself from the page i.e. removing the link from the page’s HTML markup.

For scenarios where you may want to indicate to a user where a link would be located even though they currently do not have permission/access to the linked page, a text label could be provided. Refer to the Developer tab for more details on how this could be implemented.

Developer Notes

  • All text links will default to the Stand-Alone Link styling when used with an anchor element <a>.
  • A Stand-Alone Link can also be invoked with the use of the .spark-link class.
<div class="row">
  <div class="col-xs-12 col-md-8 col-xl-6">
    <div class="spark-panel">
      <div class="spark-panel__content">
        <label class="spark-input">
          <input class="spark-input__field" name="example1" placeholder="Enter Username..." role="textbox">
          <span class="spark-label">Username</span>
        </label>

        <label class="spark-input">
          <input type="password" class="spark-input__field" name="example1" placeholder="What is your password?" role="textbox">
          <span class="spark-label">Password</span>
        </label>

        <div class="spark-mar-b-.5">
          <a href="#example-link" class="spark-link">Forgot Username or Password?</a>
        </div>

        <div>
          <a href="#example-link" class="spark-link">Create a new account</a>
        </div>
      </div>
    </div>
  </div>
</div>

<style type="text/css">
  
</style>

The language includes over 40 coded user interface elements, including buttons, form controls, navigation, modals and more, as well as several page templates. We’re continuing to release additional components to meet the needs of our diverse product suite. 

<p class="spark-mar-b-0">
  The language includes over <a href="#example-link" class="spark-link--underline">40 coded user interface elements</a>, including buttons,
  form controls, navigation, modals and more, as well as several <a href="#example-link" class="spark-link--underline">page templates</a>.
  We’re continuing to release <a href="#example-link" class="spark-link--underline">additional components</a> to meet the needs of our diverse
  product suite.
</p>

<style type="text/css">
  
</style>

If a user should not have access to a link’s destination page due to permissions or other product-specific reasons but it is desired to indicate where the link would be on the page, it is recommended that the anchor (<a>) element be changed to a span (<span>) element. The reason for this is that it is not possible to disable a link using a disabled attribute and as such it needs to be converted to simple text to prevent link behaviors and to remove it from the page’s tab order/index. It is also important to style it in such a way that it is differentiated from actual links.

Visit the Spark website
Visit the Spark website 
<!-- Active Link -->
<a href="http://sabrespark.com">Visit the Spark website</a>

<br />

<!-- "Disabled" Link using <span> -->
<span class="example-inactive-link">Visit the Spark website</span>
<style>
  .example-inactive-link {
    font-weight: 400;
    color: #898989;
  }
</style>