TACC UI Pattern Library

C Update

  • Will show “Update” pill and date
  • Will show “ORIGINAL MESSAGE” and date
<dl>
  <dt>Update</dt>
  <dd>
    <aside class="c-update">
      <header class="c-update__header">
        <h3 class="c-update__title">
          <span class="c-pill c-pill--is-updated">Update</span>&nbsp;
        </h3>
        <span>Published:</span>&nbsp;
        <time datetime="2023-10-13T14:27:18.637000">
          October 13, 2023
        </time>
      </header>
    </aside>
  </dd>
  <dd>
  </dd>
  <dt>Original</dt>
  <dd>
    <header class="c-update__header">
      <span>Published:</span>&nbsp;
      <time datetime="2023-10-03T17:55:22.513000">
        October 03, 2023
      </time>
    </header>
  </dd>
</dl>
 
{
  "shouldSkipPattern": true,
  "bootstrap4Styles": [
    {
      "isInternal": true,
      "layer": "foundation",
      "path": "/assets/core-styles.bootstrap4.css"
    }
  ],
  "bootstrap5Styles": [
    {
      "isInternal": true,
      "layer": "foundation",
      "path": "/assets/core-styles.bootstrap5.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": "components",
  "shouldLoadCMS": true
}