TACC UI Pattern Library

X Message: by Type

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

Mixin Reason
message--type-success action completed
message--type-info just info, no problem
message--type-warning event could prevent function
message--type-error event does prevent function
Mixin Usage
message base class required only for message-- modifiers
message--type-... express reason for message
message--scope-... define context of message 
<dl>
    <dt>Type <strong>info</strong></dt>
    <dd>
        <div class="
        x-message
        x-message--type-info
        x-message--scope-inline
        
        
      ">

            <p>
                <strong>Inline:</strong>
                Notify user of any details that are <strong>not</strong> a problem.
                <a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
            </p>

        </div>
        <div class="
        x-message
        x-message--type-info
        x-message--scope-section
        
        
      ">

            <p>
                <strong>Section:</strong>
                Notify user of any details that are <strong>not</strong> a problem.
                <a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
            </p>

        </div>
        <div class="
        x-message
        x-message--type-info
        x-message--scope-section
        
        x-message--has-icon
      ">

            <p>
                <strong>Section:</strong>
                Notify user of any details that are <strong>not</strong> a problem.
                <a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
            </p>

        </div>
        <div class="
        x-message
        x-message--type-info
        x-message--scope-global
        
        
      ">

            <p>
                <strong>Global:</strong>
                Notify user of any details that are <strong>not</strong> a problem.
                <a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
            </p>

        </div>
    </dd>
    <dt>Type <strong>success</strong></dt>
    <dd>
        <div class="
        x-message
        x-message--type-success
        x-message--scope-inline
        
        
      ">

            <p>
                <strong>Inline:</strong>
                Notify user of a successful event.
                <a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
            </p>

        </div>
        <div class="
        x-message
        x-message--type-success
        x-message--scope-section
        
        
      ">

            <p>
                <strong>Section:</strong>
                Notify user of a successful event.
                <a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
            </p>

        </div>
        <div class="
        x-message
        x-message--type-success
        x-message--scope-section
        
        x-message--has-icon
      ">

            <p>
                <strong>Section:</strong>
                Notify user of a successful event.
                <a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
            </p>

        </div>
        <div class="
        x-message
        x-message--type-success
        x-message--scope-global
        
        
      ">

            <p>
                <strong>Global:</strong>
                Notify user of a successful event.
                <a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
            </p>

        </div>
    </dd>
    <dt>Type <strong>warning</strong></dt>
    <dd>
        <div class="
        x-message
        x-message--type-warning
        x-message--scope-inline
        
        
      ">

            <p>
                <strong>Inline:</strong>
                Notify user of an <strong>un</strong>successful event that <em>could prevent</em> functionality.
                <a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
            </p>

        </div>
        <div class="
        x-message
        x-message--type-warning
        x-message--scope-section
        
        
      ">

            <p>
                <strong>Section:</strong>
                Notify user of an <strong>un</strong>successful event that <em>could prevent</em> functionality.
                <a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
            </p>

        </div>
        <div class="
        x-message
        x-message--type-warning
        x-message--scope-section
        
        x-message--has-icon
      ">

            <p>
                <strong>Section:</strong>
                Notify user of an <strong>un</strong>successful event that <em>could prevent</em> functionality.
                <a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
            </p>

        </div>
        <div class="
        x-message
        x-message--type-warning
        x-message--scope-global
        
        
      ">

            <p>
                <strong>Global:</strong>
                Notify user of an <strong>un</strong>successful event that <em>could prevent</em> functionality.
                <a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
            </p>

        </div>
    </dd>
    <dt>Type <strong>error</strong></dt>
    <dd>
        <div class="
        x-message
        x-message--type-error
        x-message--scope-inline
        
        
      ">

            <p>
                <strong>Inline:</strong>
                Notify user of an <strong>un</strong>successful event that <em>does prevent</em> functionality.
                <a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
            </p>

        </div>
        <div class="
        x-message
        x-message--type-error
        x-message--scope-section
        
        
      ">

            <p>
                <strong>Section:</strong>
                Notify user of an <strong>un</strong>successful event that <em>does prevent</em> functionality.
                <a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
            </p>

        </div>
        <div class="
        x-message
        x-message--type-error
        x-message--scope-section
        
        x-message--has-icon
      ">

            <p>
                <strong>Section:</strong>
                Notify user of an <strong>un</strong>successful event that <em>does prevent</em> functionality.
                <a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
            </p>

        </div>
        <div class="
        x-message
        x-message--type-error
        x-message--scope-global
        
        
      ">

            <p>
                <strong>Global:</strong>
                Notify user of an <strong>un</strong>successful event that <em>does prevent</em> functionality.
                <a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.
            </p>

        </div>
    </dd>
</dl>
  • 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."
    }
  ]
}