TACC UI Pattern Library

Links (Irregular)

This allows us to satisfy clients who strongly prefer standard CMS links¹ are underlined.

⚠️ Warning

Do not add to <body> tag, otherwise header may adversely inherit styles.

Instructions

  1. Add s-irregular-links class to an ancestor element.

Examples

<main class="s-irregular-links">
    ... <a href="...">Click me</a> ...
</main>
<section class="some-unique-content s-irregular-links">
    ... <a href="...">Click me</a> ...
</section>

¹ The standard CMS links do meet “WCAG 2.0 Level AA” link contrast.

<dl class="demo-narrow-paragraphs s-irregular-links">
    <dt>Normal</dt>
    <dd>
        <p>Pack my red box with five dozen quality jugs. A quick brown fox jumps over the <a href="#">lazy dog</a>. A waxy gent chuckled over my fab jazzy quips.</p>
    </dd>
    <dt>No <code>href</code></dt>
    <dd>
        <p>Pack my red box with five dozen quality jugs. A quick brown fox jumps over the <a>lazy dog</a> (with no <code>href</code> attribute). A waxy gent chuckled over my fab jazzy quips.</p>
    </dd>
    <dt>Button as Link</dt>
    <dd>
        <p>Pack my red box with five dozen quality jugs. A quick brown fox jumps over the <button class="c-button c-button--as-link">lazy dog</button>. A waxy gent chuckled over my fab jazzy quips.</p>
    </dd>
</dl>
 
{
  "shouldSkipPattern": true,
  "globalStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.demo.css"
    },
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.base.css"
    }
  ],
  "cmsStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.cms.css"
    }
  ],
  "docsStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.docs.css"
    }
  ],
  "portalStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.portal.css"
    }
  ],
  "subdir": "trumps"
}