Voeg een kop toe met .panel-heading
. Je kunt daarbinnen elke <h1>
-<h6>
met een .panel-title
class plaatsen om een pre-styled heading te krijgen. Let op, de font-sizes van de <h1>
-<h6>
wordt overschreven door de .panel-heading
.
Voeg een footer toe met ‘.panel-footer`. Let op, de panel footer erft geen kleuren en randen wanneer ‘contextual variations’ worden gebruikt.
<!-- Default -->
<div class="panel panel-default">
<div class="panel-heading">
Standaard panel
</div>
<div class="panel-body">
<p>Panel content</p>
</div>
</div>
<!-- Footer -->
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">
H1 Panel title
</h1>
</div>
<div class="panel-body">
<p>Panel content</p>
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
<!-- Primary -->
<div class="panel panel-primary">
<div class="panel-heading">
Panel contextual primary
</div>
<div class="panel-body">
<p>Panel content</p>
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
<!-- Success -->
<div class="panel panel-success">
<div class="panel-heading">
Panel contextual success
</div>
<div class="panel-body">
<p>Panel content</p>
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
<!-- Info -->
<div class="panel panel-info">
<div class="panel-heading">
Panel contextual info
</div>
<div class="panel-body">
<p>Panel content</p>
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
<!-- Warning -->
<div class="panel panel-warning">
<div class="panel-heading">
Panel contextual warning
</div>
<div class="panel-body">
<p>Panel content</p>
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
<!-- Danger -->
<div class="panel panel-danger">
<div class="panel-heading">
Panel contextual danger
</div>
<div class="panel-body">
<p>Panel content</p>
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
<div {{ className('panel', 'panel-' + modifier) }}>
{% if title -%}
<div class="panel-heading">
{% if header -%}
<{{ header }} class="panel-title">
{{ title }}
</{{ header }}>
{% else -%}
{{ title }}
{% endif -%}
</div>
{% endif -%}
<div class="panel-body">
<p>{{ body }}</p>
</div>
{% if footer -%}
<div class="panel-footer">
{{ footer }}
</div>
{% endif -%}
</div>
/* Default */
title: Standaard panel
body: Panel content
modifier: default
/* Footer */
title: H1 Panel title
body: Panel content
modifier: default
header: h1
footer: Panel footer
/* Primary */
title: Panel contextual primary
body: Panel content
modifier: primary
footer: Panel footer
/* Success */
title: Panel contextual success
body: Panel content
modifier: success
footer: Panel footer
/* Info */
title: Panel contextual info
body: Panel content
modifier: info
footer: Panel footer
/* Warning */
title: Panel contextual warning
body: Panel content
modifier: warning
footer: Panel footer
/* Danger */
title: Panel contextual danger
body: Panel content
modifier: danger
footer: Panel footer