TACC UI Pattern Library

Alerts

To skin Bootstrap v4 Alerts for Django CMS Bootstrap 4 Alert plugin output.

<section>
    <h3>Basic</h3>
      <div
        class="alert alert-primary"
        role="alert"
      >
          A simple primary alert <a href="#" class="alert-link">with a link</a>.
              </div>
      <div
        class="alert alert-secondary"
        role="alert"
      >
          A simple secondary alert <a href="#" class="alert-link">with a link</a>.
              </div>
      <div
        class="alert alert-success"
        role="alert"
      >
          A simple success alert <a href="#" class="alert-link">with a link</a>.
              </div>
      <div
        class="alert alert-danger"
        role="alert"
      >
          A simple danger alert <a href="#" class="alert-link">with a link</a>.
              </div>
      <div
        class="alert alert-warning"
        role="alert"
      >
          A simple warning alert <a href="#" class="alert-link">with a link</a>.
              </div>
      <div
        class="alert alert-info"
        role="alert"
      >
          A simple info alert <a href="#" class="alert-link">with a link</a>.
              </div>
      <div
        class="alert alert-light"
        role="alert"
      >
          A simple light alert <a href="#" class="alert-link">with a link</a>.
              </div>
      <div
        class="alert alert-dark"
        role="alert"
      >
          A simple dark alert <a href="#" class="alert-link">with a link</a>.
              </div>
  </section>
  <section>
    <h3>Dismissible</h3>
      <div
        class="alert alert-warning alert-dismissible fade show"
        role="alert"
      >
          Holy guacamole! You should check in on some of those fields below.
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
      </div>
  </section>
  <section>
    <h3>with Heading</h3>
      <div
        class="alert alert-secondary"
        role="alert"
      >
          <h4 class="alert-heading">Well done!</h4>
          <p>
            Aww yeah, you successfully read this important alert message.
          </p>
      </div>
      <div
        class="alert alert-success"
        role="alert"
      >
          <h4 class="alert-heading">Well done!</h4>
          <p>
            Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
          </p>
            <hr>
            <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
      </div>
  </section>
  • Content: 
    /* Pattern library only */

.alert {
  margin-block: 1em;
}
  • URL: /components/raw/alert/demo.css
  • Filesystem Path: src/lib/_imports/bootstrap4/components/alert/demo.css
  • Size: 60 Bytes 
{
  "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": "bootstrap4/components",
  "shouldLoadBootstrap": true,
  "groups": [
    {
      "title": "Basic",
      "linkText": "with a link",
      "types": [
        {
          "type": "primary"
        },
        {
          "type": "secondary"
        },
        {
          "type": "success"
        },
        {
          "type": "danger"
        },
        {
          "type": "warning"
        },
        {
          "type": "info"
        },
        {
          "type": "light"
        },
        {
          "type": "dark"
        }
      ]
    },
    {
      "title": "Dismissible",
      "message": "Holy guacamole! You should check in on some of those fields below.",
      "types": [
        {
          "type": "warning",
          "dismissible": true
        }
      ]
    },
    {
      "title": "with Heading",
      "heading": "Well done!",
      "message": "Aww yeah, you successfully read this important alert message.",
      "messageAfterHr": "Whenever you need to, be sure to use margin utilities to keep things nice and tidy.",
      "types": [
        {
          "type": "secondary"
        },
        {
          "type": "success",
          "hasHr": true
        }
      ]
    }
  ]
}