Panel

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>


  {% if title -%}
    
      {% if header -%}
        <{{ header }} class="panel-title">
          {{ title }}
        
      {% else -%}
        {{ title }}
      {% endif -%}
    
  {% endif -%}
  
    {{ body }}
  
  {% if footer -%}
    
      {{ footer }}
    
  {% endif -%}

      /* 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