mirror of
https://github.com/tabler/tabler.git
synced 2025-12-24 10:48:14 +04:00
115 lines
3.8 KiB
HTML
115 lines
3.8 KiB
HTML
{% assign link = include.link | default: false %}
|
|
<{% 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 %}">
|
|
|
|
{% if include['empty'] %}
|
|
{% include "ui/empty.html" illustration=true %}
|
|
|
|
{% else %}
|
|
|
|
{% if include.img-top %}
|
|
{% include "ui/photo.html" id=img-id class="card-img-top" ratio="21x9" id=7 %}
|
|
{% endif %}
|
|
|
|
{% if include.status-top %}
|
|
<div class="card-status-top bg-{{ include.status-top | default: 'blue' }}"></div>
|
|
{% elsif include.status-bottom %}
|
|
<div class="card-status-bottom bg-{{ include.status-bottom | default: 'blue' }}"></div>
|
|
{% elsif include.status-start %}
|
|
<div class="card-status-start bg-{{ include.status-start | default: 'blue' }}"></div>
|
|
{% endif %}
|
|
|
|
{% if include.header or include.header-title or include.header-tabs or include.header-pills %}
|
|
<div class="card-header">
|
|
{% if include.header-tabs or include.header-pills %}
|
|
{% include "ui/nav.html" header=true pills=include.header-pills tabs=include.header-tabs %}
|
|
|
|
{% else %}
|
|
<h3 class="card-title">{{ include.header-title | default: 'Header title' }}</h3>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if include.alert %}
|
|
<div class="card-alert alert alert-{{ include.alert-type | default: 'success' }} mb-0">
|
|
{{ include.alert }}
|
|
</div>
|
|
{% endif %}
|
|
<div class="card-body">
|
|
{% if include.title %}
|
|
<h3 class="card-title">{{ include.title }}</h3>
|
|
{% endif %}
|
|
{% if include.subtitle %}
|
|
<div class="card-subtitle">Card subtitle</div>
|
|
{% endif %}
|
|
|
|
{% if include.body %}
|
|
<p class="text-secondary">{{ include.body }}</p>
|
|
{% else %}
|
|
<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
|
|
neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
|
|
{% endif %}
|
|
|
|
{% if include.button %}
|
|
<div class="card-text">
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if include.footer or include.footer-button or include.footer-buttons or include.footer-elements %}
|
|
<!-- Card footer -->
|
|
<div class="card-footer">
|
|
{% if include.footer-elements %}
|
|
<div class="row align-items-center">
|
|
{% assign elements = include.footer-elements | split: "," %}
|
|
|
|
{% for element in elements %}
|
|
{% assign el = element %}
|
|
{% assign first_letter = el | slice: 0 %}
|
|
{% if first_letter == ">" %}
|
|
{% assign right = true %}
|
|
{% assign el = element | slice: 1, element.size %}
|
|
{% endif %}
|
|
|
|
<div class="col-auto{% if right %} ms-auto{% endif %}">
|
|
{% case el %}
|
|
{% when "switch" %}
|
|
{% include "ui/form/check.html" switch=true empty=true checked=true class="m-0" %}
|
|
{% when "check" %}
|
|
{% include "ui/form/check.html" empty=true checked=true class="m-0" %}
|
|
{% when "avatars" %}
|
|
{% include "ui/avatar-list.html" stacked=true text="+3" %}
|
|
{% when "more" %}
|
|
<a href="#">More information</a>
|
|
{% endcase %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{% elsif include.footer-button %}
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|
|
|
{% elsif include.footer-buttons %}
|
|
<div class="d-flex">
|
|
<a href="#" class="btn btn-link">Cancel</a>
|
|
<a href="#" class="btn btn-primary ms-auto">Go somewhere</a>
|
|
</div>
|
|
|
|
{% else %}
|
|
This is standard card footer
|
|
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if include.img-bottom %}
|
|
|
|
{% include "ui/photo.html" id=img-id class="card-img-bottom" ratio="21x9" id=11 %}
|
|
{% endif %}
|
|
|
|
{% if include.progress %}
|
|
{% include "ui/progress.html" class="progress-sm card-progress" %}
|
|
{% endif %}
|
|
{% endif %}
|
|
</{% if link %}a{% else %}div{% endif %}>
|