alerts.html 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. ---
  2. title: Alerts
  3. menu: base.alerts
  4. page-header: Alerts
  5. ---
  6. <div class="row row-cards">
  7. <div class="col-lg-6">
  8. <div class="card">
  9. <div class="card-body">
  10. <h2 class="card-title">Basic alerts</h2>
  11. <p class="text-secondary">Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p>
  12. {% include "ui/alert.html" type="success" %}
  13. {% include "ui/alert.html" type="warning" %}
  14. {% include "ui/alert.html" type="danger" %}
  15. {% include "ui/alert.html" type="info" %}
  16. </div>
  17. </div>
  18. </div>
  19. <div class="col-lg-6">
  20. <div class="card">
  21. <div class="card-body">
  22. <h2 class="card-title">Alerts with icon</h2>
  23. <p class="text-secondary">Build on any alert by adding an optional icon.</p>
  24. {% include "ui/alert.html" type="success" show-icon=true %}
  25. {% include "ui/alert.html" type="warning" show-icon=true %}
  26. {% include "ui/alert.html" type="danger" show-icon=true %}
  27. {% include "ui/alert.html" type="info" show-icon=true %}
  28. </div>
  29. </div>
  30. </div>
  31. <div class="col-lg-6">
  32. <div class="card">
  33. <div class="card-body">
  34. <h2 class="card-title">Dismissible alerts</h2>
  35. <p class="text-secondary">Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.</p>
  36. {% include "ui/alert.html" type="success" show-icon=true show-close=true %}
  37. {% include "ui/alert.html" type="warning" show-icon=true show-close=true %}
  38. {% include "ui/alert.html" type="danger" show-icon=true show-close=true %}
  39. {% include "ui/alert.html" type="info" show-icon=true show-close=true %}
  40. </div>
  41. </div>
  42. </div>
  43. <div class="col-lg-6">
  44. <div class="card">
  45. <div class="card-body">
  46. <h2 class="card-title">Alert with a description</h2>
  47. <p class="text-secondary">Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.</p>
  48. {% include "ui/alert.html" type="success" show-description=true show-icon=true %}
  49. {% include "ui/alert.html" type="warning" show-description=true show-icon=true %}
  50. {% include "ui/alert.html" type="danger" show-description=true show-icon=true %}
  51. {% include "ui/alert.html" type="info" show-description=true show-icon=true %}
  52. </div>
  53. </div>
  54. </div>
  55. <div class="col-lg-6">
  56. <div class="card">
  57. <div class="card-body">
  58. <h2 class="card-title">Important alerts</h2>
  59. {% include "ui/alert.html" important=true type="success" show-icon=true show-close=true %}
  60. {% include "ui/alert.html" important=true type="warning" show-icon=true show-close=true %}
  61. {% include "ui/alert.html" important=true type="danger" show-icon=true show-close=true %}
  62. {% include "ui/alert.html" important=true type="info" show-icon=true show-close=true %}
  63. </div>
  64. </div>
  65. </div>
  66. </div>