<h2 class="mb-3">
Examples
</h2>
<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
This is a dark alert—check it out!
</div>
<hr />
<h2 class="mb-3">
Link color
</h2>
<div class="alert alert-primary" role="alert">
This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
This is a light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<hr />
<h2 class="mb-3">
Additional content
</h2>
<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>
<hr />
<h2 class="mb-3">
Dismissing
</h2>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> 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">×</span>
</button>
</div>
<hr />
{% block main %}
{% for section in sections %}
{% if section %}
{% if section.title %}
<h2 class="mb-3">
{{ section.title }}
</h2>
{% endif %}
{% for variant in section.variants %}
{% include '@atom-alert' with variant %}
{% endfor %}
{% endif %}
<hr />
{% endfor %}
{% endblock %}
{
"sections": [
{
"title": "Examples",
"variants": [
{
"style": "primary",
"content": "This is a primary alert—check it out!\n"
},
{
"style": "secondary",
"content": "This is a secondary alert—check it out!\n"
},
{
"style": "success",
"content": "This is a success alert—check it out!\n"
},
{
"style": "danger",
"content": "This is a danger alert—check it out!\n"
},
{
"style": "warning",
"content": "This is a warning alert—check it out!\n"
},
{
"style": "info",
"content": "This is a info alert—check it out!\n"
},
{
"style": "light",
"content": "This is a light alert—check it out!\n"
},
{
"style": "dark",
"content": "This is a dark alert—check it out!\n"
}
]
},
{
"title": "Link color",
"variants": [
{
"style": "primary",
"content": "This is a primary alert with <a href=\"#\" class=\"alert-link\">an example link</a>. Give it a click if you like.\n"
},
{
"style": "secondary",
"content": "This is a secondary alert with <a href=\"#\" class=\"alert-link\">an example link</a>. Give it a click if you like.\n"
},
{
"style": "success",
"content": "This is a success alert with <a href=\"#\" class=\"alert-link\">an example link</a>. Give it a click if you like.\n"
},
{
"style": "danger",
"content": "This is a danger alert with <a href=\"#\" class=\"alert-link\">an example link</a>. Give it a click if you like.\n"
},
{
"style": "warning",
"content": "This is a warning alert with <a href=\"#\" class=\"alert-link\">an example link</a>. Give it a click if you like.\n"
},
{
"style": "info",
"content": "This is a info alert with <a href=\"#\" class=\"alert-link\">an example link</a>. Give it a click if you like.\n"
},
{
"style": "light",
"content": "This is a light alert with <a href=\"#\" class=\"alert-link\">an example link</a>. Give it a click if you like.\n"
},
{
"style": "dark",
"content": "This is a dark alert with <a href=\"#\" class=\"alert-link\">an example link</a>. Give it a click if you like.\n"
}
]
},
{
"title": "Additional content",
"variants": [
{
"style": "success",
"content": "<h4 class=\"alert-heading\">Well done!</h4>\n<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>\n<hr>\n<p class=\"mb-0\">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>\n"
}
]
},
{
"title": "Dismissing",
"variants": [
{
"style": "warning",
"dismissible": true,
"content": "<strong>Holy guacamole!</strong> You should check in on some of those fields below.\n"
}
]
}
]
}
No notes defined.