TACC UI Pattern Library

C Tag: HTML Elements

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

Class (Std.) Class (Alt.) Description
.c-tag .tag space, shape, and size
.c-tag--is-... .tag--... to apply custom colors 
<dl>
    <dt><code>&lt;span&gt;</code> <small>e.g. <code>display: inline</code></small></dt>
    <dd>
        <span class="c-tag">I am a tag</span>
    </dd>
    <dt><code>&lt;span <small>style="display: inline-block"</small>&gt;</code></dt>
    <dd>
        <span class="c-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="c-tag">I am a tag</div>
    </dd>
    <dt><code>&lt;a&gt;</code></dt>
    <dd>
        <a href="#" class="c-tag">I am a tag</a>
    </dd>
    <dt><code>&lt;button&gt;</code></dt>
    <dd>
        <button class="c-tag">I am a tag</button>
    </dd>
</dl>
  • Content: 
    /* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */

.c-tag:not([class*="c-tag--"]) {
  color: var(--global-color-primary--xx-light);
  background-color: var(--global-color-primary--xxx-dark);
}

.c-tag--is-whatever {
  color: var(--global-color-tertiary--xx-light);
  background-color: var(--global-color-tertiary--dark);
}
  • URL: /components/raw/c-tag/demo.css
  • Filesystem Path: src/lib/_imports/components/c-tag/demo.css
  • Size: 352 Bytes 
{
  "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": "components"
}