2.3 KiB
title, menu, description, bootstrap-link
| title | menu | description | bootstrap-link |
|---|---|---|---|
| Alerts | docs.alerts | Bootstrap provides an easy way to create predefined alert messages. | components/alerts/ |
Default markup
{% capture code %} {% for variant in site.variants %} {% capture variant-text %} This is a {{ variant.name }} alert — check it out! {% endcapture %} {% include ui/alert.html type=variant.name text=variant-text %} {% endfor %} {% endcapture %} {% include example.html code=code %}
Alert Links
Add the alert-link class to any links inside the alert box to create "matching colored links":
{% capture code %} {% for variant in site.variants %} {% capture variant-text %} This is a {{ variant.name }} alert — check it out! {% endcapture %} {% include ui/alert.html type=variant.name text=variant-text %} {% endfor %} {% endcapture %} {% include example.html code=code %}
Dismissible Alerts
{% capture code %} {% for variant in site.variants %} {% capture variant-text %} This is a {{ variant.name }} alert — check it out! {% endcapture %} {% include ui/alert.html type=variant.name text=variant-text close=true %} {% endfor %} {% endcapture %} {% include example.html code=code %}
Alerts with icons
{% capture code %} {% for variant in site.variants %} {% capture variant-text %} This is a {{ variant.name }} alert — check it out! {% endcapture %} {% include ui/alert.html type=variant.name icon=variant.icon text=variant-text %} {% endfor %} {% endcapture %} {% include example.html code=code %}
Alert with avatar
{% capture code %} {% for variant in site.variants %} {% capture variant-text %} Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. {% endcapture %} {% include ui/alert.html type=variant.name text=variant-text person-id=forloop.index %} {% endfor %} {% endcapture %} {% include example.html code=code %}
Alert with buttons
{% capture code %} {% capture variant-text %}
Some Title
Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.
{% endcapture %} {% include ui/alert.html type='success' close=true text=variant-text buttons=true %} {% endcapture %} {% include example.html code=code %}