Panel

Component preview opent in nieuw tabblad

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