DSO Component Library

# Panel: Warning

Ready

- HTML
- View
- Context
- Info
- Notes
- WCAG

`

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

`
`

    <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: Panel contextual warning
    body: Panel content
    modifier: warning
    footer: Panel footer

`

- Handle: @panel--warning
- Variants (7): Default , Footer , Primary , Success , Info , Warning , Danger
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\02-content\panel\panel.hbs

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`