tabler-ui/src/_includes/cards/card.html

Premium and Open Source dashboard template with responsive and high quality UI. For Free!

<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 href="#" class="btn btn-primary btn-sm">Action 1</a>
				<a href="#" 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>