mirror of
https://github.com/tabler/tabler.git
synced 2026-08-03 00:44:37 +04:00
codecalm
68 lines
2.2 KiB
HTML
68 lines
2.2 KiB
HTML
<div class="card{% if include.active %} border-primary{% endif %}">
|
|
{% if include.img-top %}
|
|
<img src="//placehold.it/374x210" class="card-img-top" alt="{{ include.img-top-alt | default: 'Card top image' }}">
|
|
{% endif %}
|
|
|
|
{% if include.status-position %}
|
|
<div class="card-status-{{include.status-position}} bg-{{ include.status-color | default: 'blue' }}"></div>
|
|
{% endif %}
|
|
|
|
{% if include.header-title %}
|
|
<div class="card-header">
|
|
<h3 class="card-title">{{ include.header-title }}</h3>
|
|
</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>{{ include.body }}</p>
|
|
{% else %}
|
|
<p>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.link %}
|
|
<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 %}
|
|
<!-- Card footer -->
|
|
<div class="card-footer">
|
|
{% if 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 ml-auto">Go somewhere</a>
|
|
</div>
|
|
{% else %}
|
|
This is standard card footer
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if include.status-bottom %}
|
|
<div class="card-status card-status-bottom bg-{{ include.status-bottom }}"></div>
|
|
{% endif %}
|
|
|
|
{% if include.img-bottom %}
|
|
<img src="//placehold.it/374x210" class="card-img-bottom"
|
|
alt="{{ include.img-bottom-alt | default: 'Card bottom image' }}">
|
|
{% endif %}
|
|
</div>
|