DSO Component Library

Panel 

<!-- Default -->
<div class="panel panel-default">
    <div class="panel-heading">
        Standaard panel
    </div>
    <div class="panel-body">
        Panel content
    </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">
        Panel content
    </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">
        Panel content
    </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">
        Panel content
    </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">
        Panel content
    </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">
        Panel content
    </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">
        Panel content
    </div>
    <div class="panel-footer">
        Panel footer
    </div>
</div>


<div class="panel panel-{{ modifier }}">
  {{#if title }}
    <div class="panel-heading">
      {{#if header}}
        <{{header}} class="panel-title">
          {{ title }}
        </{{header}}>
      {{else}}
        {{ title }}
      {{/if}}
    </div>
  {{/if}}
  <div class="panel-body">
    {{ body }}
  </div>
  {{#if footer }}
    <div class="panel-footer">
      {{ footer }}
    </div>
  {{/if}}
</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

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.

WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

<div class="panel-heading"> Standaard panel </div>

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

<title>Panel