Alert Optional
Colored element to display a highlighted message. The element can have a closing link. This component is usually used to display a message or notification.
Features
- Can be used to style any Html element.
- Closing function (removes the element).
Configuration
- Sass file: components/_alert.scss
- Javascript file: components/_alert.js
- Include the Sass file in theme.scss:
@use "components/alert"; - Include the compiled javascript file in the Html:
<script src="/javascript/alert.min.js"></script>
Alternatives
Colors and class name.
Alert
success
Alert
error
Alert
warning
Alert
info
Examples
View source for Html code.
Tags:
Section with text:
This is a section with text content – this is the first paragraph.
This is another paragraph.
Section with icon:
This is a section with text content – a single paragraph.
Section with header:
Warning header
This is a section with text content – a single paragraph.
Section with header and list:
Error header
- List item 1
- List item 2
- List item 3
Closing
Badge with a closing link inside:
Badge, where the entire element is a closing link:
Section with text and a closing icon link:
This is a section with text content – a single paragraph.
Section with icon label, text and a closing icon link:
This is a section with text content – a single paragraph.
Section with multiple paragraphs and a closing icon link:
This is a section with text content – this is the first paragraph.
This is another paragraph.
Section with text and a closing text link:
This is a section with text content – this is the first paragraph.
Section with header and a closing icon link:
Error header
- List item 1
- List item 2
- List item 3