TACC UI Pattern Library

X Action

For use at the end of an incomplete list as a link to see more e.g.

  • “See All Training”
  • “See All News”
<dl>
    <dt>Links</dt>
    <dd>
        <a href="#" class="x-action--with-icon">
            <i class="
                x-action__icon-at-start
                icon icon-push-right
            ">&gt;</i>
            Link with Icon
        </a>
    </dd>
    <dd>
        <button type="button" class="x-action--with-icon c-button c-button--as-link">
            <i class="
                x-action__icon-at-start
                icon icon-push-right
            ">&gt;</i>
            Button as Link with Icon
        </button>
    </dd>
    <dt>Buttons</dt>
    <dd>
        <button type="button" class="x-action--with-icon c-button c-button--primary">
            <i class="
                x-action__icon-at-start
                icon icon-push-right
            ">&gt;</i>
            Button with Icon
        </button>
    </dd>
    <dd>
        <a href="#" class="x-action--with-icon c-button c-button--primary" target="_blank">
            <i class="
                x-action__icon-at-start
                icon icon-push-right
            ">&gt;</i>
            Link as Button with Icon
        </a>
    </dd>
</dl>
 
{
  "shouldSkipPattern": false,
  "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": "tools",
  "supportStyles": [
    "../../assets/components/cortal-icon.css"
  ]
}