Alerts

Dismissable and non-dismissable alerts container styles.

Source file: src/css/alerts.css
View on GitHub: https://github.com/pmbrown/ming-css/blob/main/src/css/alerts.css

Included with:

ming.css
ming.min.css
ming.mono.css
ming.mono.min.css

Default (anchor)

The quick brown fox jumps over the lazy dog.

<div class="alert">
  <p>Basic alert</p>
</div>

<dialog id="alert-icon-demo" class="alert" open>
  <p>Dismissable alert</p>
  <button class="close-alert ico-btn ico-close" commandfor="alert-icon-demo" command="close"><span class="vis-hidden">Close</span></button>
</dialog>

Without the icon button utilities:

<dialog id="alert-demo" class="alert" open>
  <p>Dismissable alert</p>
  <button class="close-alert" commandfor="alert-demo" command="close">Close</button>
</dialog>

Light & dark (anchor)

Fixed color-scheme utilities included with the backgrounds.

Light

Dark

Example HTML

<div class="alert light">
  <p>Light</p>
</div>

<div class="alert dark">
  <p>Dark</p>
</div>

Primary colors (anchor)

The alerts color classes use the primary colors variables, the source file is included separately.

Source file: src/css/colors/color-alerts.css
View on GitHub: https://github.com/pmbrown/ming-css/blob/main/src/css/colors/color-alerts.css

Included with:

ming.css
ming.min.css

Primary

Success

Danger

Info

Warning

Secondary

Example HTML

<div class="alert-primary">
  <p>Primary</p>
</div>

<div class="alert-success">
  <p>Success</p>
</div>

<div class="alert-danger">
  <p>Danger</p>
</div>

<div class="alert-info">
  <p>Info</p>
</div>

<div class="alert-warning">
  <p>Warning</p>
</div>

<div class="alert-secondary">
  <p>Secondary</p>
</div>

Previous: Accordions

Next: Badges