Basic example Panel without padding Panel with heading Panel with footer Panel info Panel highlight Panel success Panel warning Panel danger

UI Molecules

Panel

1.1 Basic example

Basic panel example 
<div class="amui-m-panel">
  <div class="amui-m-panel__body">
    Basic panel example
  </div>
</div>

Pour utiliser un panel avec fond blanc ajouter la class modifier is--light à la class amui-m-panel

Basic light panel example 
<div class="amui-m-panel is--light">
  <div class="amui-m-panel__body">
    Basic light panel example
  </div>
</div>

1.2 Panel without padding

Pour utiliser un panel sans marge interne (padding) ajouter la class modifier is--fluid à la class amui-m-panel

Fluid panel example 
<div class="amui-m-panel is--fluid">
  <div class="amui-m-panel__body">
    Fluid panel example
  </div>
</div>

1.3 Panel with heading

Panel title

Panel content 
<div class="amui-m-panel">
  <div class="amui-m-panel__heading">
    <h3 class="amui-m-panel__heading-title">Panel title</h3>
  </div>
  <div class="amui-m-panel__body">
    Panel content
  </div>
</div>

1.4 Panel with footer

Panel title

Panel content
Panel footer 
<div class="amui-m-panel">
  <div class="amui-m-panel__heading">
    <h3 class="amui-m-panel__heading-title">Panel title</h3>
  </div>
  <div class="amui-m-panel__body">
    Panel content
  </div>
  <div class="amui-m-panel__footer">
    Panel footer
  </div>
</div>

1.5 Panel Info

Responsables Développement
<div class="amui-m-panel is--info">
  <div class="amui-m-panel__heading">
    <h5 class="amui-m-panel__heading-title">Responsables Développement</h5>
  </div>

  <div class="amui-m-panel__body">
    <label class="amui-a-form-check">
      <input type="checkbox" id="Checkbox1" name="Checkbox1" value="option1">
      <span class="amui-a-form-check__indicator"></span>
      <span class="amui-a-form-check__label">Ajouter ces adresses aux destinataires de la note d'information</span>
    </label>
  </div>
</div>

1.6 Panel Highlight

Responsables Développement
<div class="amui-m-panel is--highlight">
  <div class="amui-m-panel__heading">
    <h5 class="amui-m-panel__heading-title">Responsables Développement</h5>
  </div>

  <div class="amui-m-panel__body">
    <label class="amui-a-form-check">
      <input type="checkbox" id="Checkbox1" name="Checkbox1" value="option1">
      <span class="amui-a-form-check__indicator"></span>
      <span class="amui-a-form-check__label">Ajouter ces adresses aux destinataires de la note d'information</span>
    </label>
  </div>
</div>

1.7 Panel Success

Responsables Développement
<div class="amui-m-panel is--success">
  <div class="amui-m-panel__heading"">
    <h5 class="amui-m-panel__heading-title">Responsables Développement</h5>
  </div>

  <div class="amui-m-panel__body">
    <label class="amui-a-form-check">
      <input type="checkbox" id="Checkbox1" name="Checkbox1" value="option1">
      <span class="amui-a-form-check__indicator"></span>
      <span class="amui-a-form-check__label">Ajouter ces adresses aux destinataires de la note d'information</span>
    </label>
  </div>
</div>

1.8 Panel Warning

Responsables Développement
<div class="amui-m-panel is--warning">
  <div class="amui-m-panel__heading">
    <h5 class="amui-m-panel__heading-title">Responsables Développement</h5>
  </div>

  <div class="amui-m-panel__body">
    <label class="amui-a-form-check">
      <input type="checkbox" id="Checkbox1" name="Checkbox1" value="option1">
      <span class="amui-a-form-check__indicator"></span>
      <span class="amui-a-form-check__label">Ajouter ces adresses aux destinataires de la note d'information</span>
    </label>
  </div>
</div>

1.9 Panel Danger

Responsables Développement
<div class="amui-m-panel is--danger">
  <div class="amui-m-panel__heading">
    <h5 class="amui-m-panel__heading-title">Responsables Développement</h5>
  </div>

  <div class="amui-m-panel__body">
    <label class="amui-a-form-check">
      <input type="checkbox" id="Checkbox1" name="Checkbox1" value="option1">
      <span class="amui-a-form-check__indicator"></span>
      <span class="amui-a-form-check__label">Ajouter ces adresses aux destinataires de la note d'information</span>
    </label>
  </div>
</div>
← Navigation Icon Pagination →