TACC UI Pattern Library

X Message: Single

To notify users for different reasons (type) and at different contexts (scope).

<div class="
    x-message
    
    
    x-message--scope-global
    
  ">

    <p>

        <a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
    </p>

</div>
  • Content: 
    /* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */

.x-message {
  margin-top: 1em;
}

dt {
  text-transform: capitalize;
}
dd {
  margin-block: 2em;
}
  • URL: /components/raw/x-message/demo.css
  • Filesystem Path: src/lib/_imports/tools/x-message/demo.css
  • Size: 180 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": "tools",
  "supportStyles": [
    "../../assets/tools/x-message.demo.css"
  ],
  "types": [
    {
      "name": "info",
      "content": "Notify user of any details that are <strong>not</strong> a problem."
    },
    {
      "name": "success",
      "content": "Notify user of a successful event."
    },
    {
      "name": "warning",
      "content": "Notify user of an <strong>un</strong>successful event that <em>could prevent</em> functionality."
    },
    {
      "name": "error",
      "content": "Notify user of an <strong>un</strong>successful event that <em>does prevent</em> functionality."
    }
  ],
  "scopes": [
    {
      "name": "inline",
      "content": "An inline message."
    },
    {
      "name": "section",
      "content": "A wide block message."
    },
    {
      "name": "global",
      "content": "A site-wide banner message."
    }
  ]
}