DSO Component Library

Panel: 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>
 
<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>
 
title: H1 Panel title
body: Panel content
modifier: default
header: h1
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