card.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. {% assign link = include.link | default: false %}
  2. <{% if link %}a href="#"{% else %}div{% endif %} class="card{% if include.active %} card-active{% endif %}{% if include.inactive %} card-inactive{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
  3. {% if include['empty'] %}
  4. {% include "ui/empty.html" illustration=true %}
  5. {% else %}
  6. {% if include.img-top %}
  7. {% include "ui/photo.html" id=img-id class="card-img-top" ratio="21x9" id=7 %}
  8. {% endif %}
  9. {% if include.status-top %}
  10. <div class="card-status-top bg-{{ include.status-top | default: 'blue' }}"></div>
  11. {% elsif include.status-bottom %}
  12. <div class="card-status-bottom bg-{{ include.status-bottom | default: 'blue' }}"></div>
  13. {% elsif include.status-left %}
  14. <div class="card-status-start bg-{{ include.status-left | default: 'blue' }}"></div>
  15. {% endif %}
  16. {% if include.header or include.header-title or include.header-tabs or include.header-pills %}
  17. <div class="card-header">
  18. {% if include.header-tabs or include.header-pills %}
  19. {% include "ui/nav.html" header=true pills=include.header-pills tabs=include.header-tabs %}
  20. {% else %}
  21. <h3 class="card-title">{{ include.header-title | default: 'Header title' }}</h3>
  22. {% endif %}
  23. </div>
  24. {% endif %}
  25. {% if include.alert %}
  26. <div class="card-alert alert alert-{{ include.alert-type | default: 'success' }} mb-0">
  27. {{ include.alert }}
  28. </div>
  29. {% endif %}
  30. <div class="card-body">
  31. {% if include.title %}
  32. <h3 class="card-title">{{ include.title }}</h3>
  33. {% endif %}
  34. {% if include.subtitle %}
  35. <div class="card-subtitle">Card subtitle</div>
  36. {% endif %}
  37. {% if include.body %}
  38. <p class="text-secondary">{{ include.body }}</p>
  39. {% else %}
  40. <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
  41. neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
  42. {% endif %}
  43. {% if include.button %}
  44. <div class="card-text">
  45. <a href="#" class="btn btn-primary">Go somewhere</a>
  46. </div>
  47. {% endif %}
  48. </div>
  49. {% if include.footer or include.footer-button or include.footer-buttons or include.footer-elements %}
  50. <!-- Card footer -->
  51. <div class="card-footer">
  52. {% if include.footer-elements %}
  53. <div class="row align-items-center">
  54. {% assign elements = include.footer-elements | split: "," %}
  55. {% for element in elements %}
  56. {% assign el = element %}
  57. {% assign first_letter = el | slice: 0 %}
  58. {% if first_letter == ">" %}
  59. {% assign right = true %}
  60. {% assign el = element | slice: 1, element.size %}
  61. {% endif %}
  62. <div class="col-auto{% if right %} ms-auto{% endif %}">
  63. {% case el %}
  64. {% when "switch" %}
  65. {% include "ui/form/check.html" switch=true empty=true checked=true class="m-0" %}
  66. {% when "check" %}
  67. {% include "ui/form/check.html" empty=true checked=true class="m-0" %}
  68. {% when "avatars" %}
  69. {% include "ui/avatar-list.html" stacked=true text="+3" %}
  70. {% when "more" %}
  71. <a href="#">More information</a>
  72. {% endcase %}
  73. </div>
  74. {% endfor %}
  75. </div>
  76. {% elsif include.footer-button %}
  77. <a href="#" class="btn btn-primary">Go somewhere</a>
  78. {% elsif include.footer-buttons %}
  79. <div class="d-flex">
  80. <a href="#" class="btn btn-link">Cancel</a>
  81. <a href="#" class="btn btn-primary ms-auto">Go somewhere</a>
  82. </div>
  83. {% else %}
  84. This is standard card footer
  85. {% endif %}
  86. </div>
  87. {% endif %}
  88. {% if include.img-bottom %}
  89. {% include "ui/photo.html" id=img-id class="card-img-bottom" ratio="21x9" id=11 %}
  90. {% endif %}
  91. {% if include.progress %}
  92. {% include "ui/progress.html" class="progress-sm card-progress" %}
  93. {% endif %}
  94. {% endif %}
  95. </{% if link %}a{% else %}div{% endif %}>