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,
  "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
}