{{#> web/layout/default title="Links" parentPageName="Helpers" }}

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Default</h2>

    <div class="docs-Stack docs-Stack--start">
      <p>
        <a href="#" class="link-primary">Primary Link</a>
      </p>
      <p>
        <a href="#" class="link-secondary">Secondary Link</a>
      </p>
      <p>
        <a href="#" class="link-tertiary">Tertiary Link</a>
      </p>
      <p>
        <button type="button" class="link-primary">Link as button</button>
      </p>
    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Disabled</h2>

    <div class="docs-Stack docs-Stack--start">
      <p>
        <a href="#" class="link-primary link-disabled">Primary Disabled Link</a>
      </p>
      <p>
        <a href="#" class="link-secondary link-disabled">Secondary Disabled Link</a>
      </p>
      <p>
        <a href="#" class="link-tertiary link-disabled">Tertiary Disabled Link</a>
      </p>
      <p>
        <button type="button" class="link-primary link-disabled" disabled>Link as button</button>
      </p>
    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Underlined</h2>

    <div class="docs-Stack docs-Stack--start">
      <p>
        <a href="#" class="link-primary link-underlined">Primary Underlined Link</a>
      </p>
      <p>
        <a href="#" class="link-secondary link-underlined">Secondary Underlined Link</a>
      </p>
      <p>
        <a href="#" class="link-tertiary link-underlined">Tertiary Underlined Link</a>
      </p>
      <p>
        <button type="button" class="link-primary link-underlined">Link as button</button>
      </p>
    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Underlined & Disabled</h2>

    <div class="docs-Stack docs-Stack--start">
      <p>
        <a href="#" class="link-primary link-disabled link-underlined">Primary Disabled Underlined Link</a>
      </p>
      <p>
        <a href="#" class="link-secondary link-disabled link-underlined">Secondary Disabled Underlined Link</a>
      </p>
      <p>
        <a href="#" class="link-tertiary link-disabled link-underlined">Tertiary Disabled Underlined Link</a>
      </p>
      <p>
        <button type="button" class="link-primary link-disabled link-underlined" disabled>Link as button</button>
      </p>
    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Not Underlined</h2>

    <div class="docs-Stack docs-Stack--start">
      <p>
        <a href="#" class="link-primary link-not-underlined">Primary Not Underlined Link</a>
      </p>
      <p>
        <a href="#" class="link-secondary link-not-underlined">Secondary Not Underlined Link</a>
      </p>
      <p>
        <a href="#" class="link-tertiary link-not-underlined">Tertiary Not Underlined Link</a>
      </p>
      <p>
        <button type="button" class="link-primary link-not-underlined" disabled>Link as button</button>
      </p>
    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Visited</h2>

    <div class="docs-Stack docs-Stack--start">
      <p>Please click on the link to see the visited state style</p>

      <p>
        <a href="#" class="link-primary link-allow-visited-style">Primary Visited Link</a>
      </p>
      <p>
        <a href="#" class="link-secondary link-allow-visited-style">Secondary Visited Link</a>
      </p>
      <p>
        <a href="#" class="link-tertiary link-allow-visited-style">Tertiary Visited Link</a>
      </p>
    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Visited Disabled</h2>

    <div class="docs-Stack docs-Stack--start">
      <p>
        <a href="#" class="link-primary link-disabled link-allow-visited-style">Primary Visited Disabled Link</a>
      </p>
      <p>
        <a href="#" class="link-secondary link-disabled link-allow-visited-style">Secondary Visited Disabled Link</a>
      </p>
      <p>
        <a href="#" class="link-tertiary link-disabled link-allow-visited-style">Tertiary Visited Disabled Link</a>
      </p>
    </div>

  </div>

</section>

{{/web/layout/default}}