mirror of
https://github.com/tabler/tabler.git
synced 2025-12-26 11:16:12 +04:00
66 lines
2.6 KiB
HTML
66 lines
2.6 KiB
HTML
<div class="card{% if include.collapsed %} card-collapsed{% endif %}">
|
|
{% if include.status or include.status-left %}
|
|
<div class="card-status{% if include.status-left %} card-status-left{% endif %} bg-{{ include.status | default: include.status-left }}"></div>
|
|
{% endif %}
|
|
|
|
<div class="card-header">
|
|
<h3 class="card-title">{{ include.title | default: 'Card title' }}</h3>
|
|
|
|
{% unless include.hide-options %}
|
|
<div class="card-options">
|
|
{% if include.show-form %}
|
|
<form action="">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control form-control-sm" placeholder="Search something..." name="s">
|
|
<span class="input-group-btn ml-2">
|
|
<button class="btn btn-sm btn-default" type="submit">
|
|
<span class="fe fe-search"></span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
{% elsif include.show-buttons %}
|
|
<a class="btn btn-secondary btn-sm">Action 1</a>
|
|
<a class="btn btn-secondary btn-sm ml-2">Action 2</a>
|
|
{% elsif include.show-switch %}
|
|
<label class="custom-switch m-0">
|
|
<input type="checkbox" value="1" class="custom-switch-input" checked>
|
|
<span class="custom-switch-indicator"></span>
|
|
</label>
|
|
{% elsif include.options %}
|
|
{{ include.options }}
|
|
{% else %}
|
|
<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
|
|
{% if include.show-fullscreen %}
|
|
<a href="#" class="card-options-fullscreen" data-toggle="card-fullscreen"><i class="fe fe-maximize"></i></a>
|
|
{% endif %}
|
|
<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
|
|
{% endif %}
|
|
</div>
|
|
{% endunless %}
|
|
</div>
|
|
{% 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.body %}
|
|
{{ include.body }}
|
|
{% elsif include.show-loader %}
|
|
<div class="dimmer active">
|
|
<div class="loader"></div>
|
|
<div class="dimmer-content">
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
|
|
{% endif %}
|
|
</div>
|
|
{% if include.show-footer %}
|
|
<div class="card-footer">
|
|
This is standard card footer
|
|
</div>
|
|
{% endif %}
|
|
</div> |