DSO Toolkit | Component Library

Panel: 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>
 
<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">
    <p>{{ body }}</p>
  </div>
  {{#if footer }}
    <div class="panel-footer">
      {{ footer }}
    </div>
  {{/if}}
</div>
 
title: Panel contextual success
body: Panel content
modifier: success
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.