TACC UI Pattern Library

X Tag

To organize similar elements e.g. category, tag, type, group.

<dl>
    <dt><code>&lt;span&gt;</code> <small>e.g. <code>display: inline</code></small></dt>
    <dd>
        <span class="x-tag">I am a tag</span>
    </dd>
    <dt><code>&lt;span <small>style="display: inline-block"</small>&gt;</code></dt>
    <dd>
        <span class="x-tag" style="display: inline-block">I am a tag</span>
    </dd>
    <dt><code>&lt;div&gt;</code> <small>e.g. <code>display: block</code></small></dt>
    <dd>
        <div class="x-tag">I am a tag</div>
    </dd>
    <dt><code>&lt;a&gt;</code></dt>
    <dd>
        <a href="#" class="x-tag">I am a tag</a>
    </dd>
    <dt><code>&lt;button&gt;</code></dt>
    <dd>
        <button class="x-tag">I am a tag</button>
    </dd>
</dl>
 
{
  "shouldSkipPattern": true,
  "bootstrap4Styles": [
    {
      "isInternal": true,
      "layer": "foundation",
      "path": "/assets/core-styles.bootstrap4.css"
    }
  ],
  "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/tools/x-tag.demo.css"
  ]
}