<div class="amui-g-grid row">
  <div class="amui-g-grid__item col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <section class="amui-o-card amui-o-card--success panel panel-default clearfix">
      <div class="amui-o-card__heading">
        <i class="amui-o-card__heading-icon material-icons md-24" href="#evenement-modal" data-toggle="modal" data-whatever="465" data-whatever2="1">announcement</i>
        <h1 class="amui-o-card__heading-title">Title</h1>
      </div>
      <div class="amui-o-card__progress amui-m-progress">
        <p class="amui-m-progress__title">Criticité<span class="amui-m-progress--level"> Faible</span></p>
        <div class="amui-a-progress progress amui-m-progress__container">
          <div class="amui-a-progress__bar progress-bar is--success is--low" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
          </div>
        </div>
      </div>  <!-- Progress bar Molecule -->
      <div class="amui-o-card__details">
        <div class="amui-m-callout">
          <p class="amui-m-callout__title">Catégorie :<span class="amui-m-callout__description"> Nom</span></p>
        </div>  <!-- Callout Molecule -->
        <div class="amui-m-callout">
          <p class="amui-m-callout__title">Type :<span class="amui-m-callout__description"> Label</span></p>
        </div>  <!-- Callout Molecule -->
        <div class="amui-m-callout">
          <p class="amui-m-callout__title">Description :<span class="amui-m-callout__description"><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed orci dui, placerat in purus id, consequat tempor ex.</span></p>
        </div>  <!-- Callout Molecule -->
      </div>
      <div class="amui-o-card__date">
        <div class="amui-m-info-date">
          <p class="amui-m-info-date__title">Debut</p>
          <span class="amui-m-info-date__day">JJ/MM/YYYY</span>
          <span class="amui-m-info-date__time">00:00</span>
        </div>  <!-- Info date Molecule -->
        <div class="amui-m-info-date">
          <p class="amui-m-info-date__title">Fin</p>
          <span class="amui-m-info-date__day">JJ/MM/YYYY</span>
          <span class="amui-m-info-date__time">00:00</span>
        </div>  <!-- Info date Molecule -->
      </div>
    </section>  <!-- Card info Success Molecules -->
  </div>

  <div class="amui-g-grid__item col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <section class="amui-o-card amui-o-card--warning panel panel-default clearfix">
      <div class="amui-o-card__heading">
        <i class="amui-o-card__heading-icon material-icons md-24" href="#evenement-modal" data-toggle="modal" data-whatever="465" data-whatever2="1">announcement</i>
        <h1 class="amui-o-card__heading-title">Title</h1>
      </div>
      <div class="amui-o-card__progress amui-m-progress">
        <p class="amui-m-progress__title">Criticité<span class="amui-m-progress--level"> Moyenne</span></p>
        <div class="amui-a-progress  progress amui-m-progress__container">
          <div class="amui-a-progress__bar progress-bar is--warning is--medium" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
          </div>
        </div>
      </div>  <!-- Progress bar Molecule -->
      <div class="amui-o-card__details">
        <div class="amui-m-callout">
          <p class="amui-m-callout__title">Catégorie :<span class="amui-m-callout__description"> Nom</span></p>
        </div>  <!-- Callout Molecule -->
        <div class="amui-m-callout">
          <p class="amui-m-callout__title">Type :<span class="amui-m-callout__description"> Label</span></p>
        </div>  <!-- Callout Molecule -->
        <div class="amui-m-callout">
          <p class="amui-m-callout__title">Description :<span class="amui-m-callout__description"><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed orci dui, placerat in purus id, consequat tempor ex.</span></p>
        </div>  <!-- Callout Molecule -->
      </div>
      <div class="amui-o-card__date">
        <div class="amui-m-info-date">
          <p class="amui-m-info-date__title">Debut</p>
          <span class="amui-m-info-date__day">JJ/MM/YYYY</span>
          <span class="amui-m-info-date__time">00:00</span>
        </div>  <!-- Info date Molecule -->
        <div class="amui-m-info-date">
          <p class="amui-m-info-date__title">Fin</p>
          <span class="amui-m-info-date__day">JJ/MM/YYYY</span>
          <span class="amui-m-info-date__time">00:00</span>
        </div>  <!-- Info date Molecule -->
      </div>
    </section>  <!-- Card info Warning Molecules -->
  </div>

  <div class="amui-g-grid__item col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <section class="amui-o-card amui-o-card--danger panel panel-default clearfix">
      <div class="amui-o-card__heading">
        <i class="amui-o-card__heading-icon material-icons md-24" href="#evenement-modal" data-toggle="modal" data-whatever="465" data-whatever2="1">announcement</i>
        <h1 class="amui-o-card__heading-title">Title</h1>
      </div>
      <div class="amui-o-card__progress amui-m-progress">
        <p class="amui-m-progress__title">Criticité<span class="amui-m-progress--level"> Forte</span></p>
        <div class="amui-a-progress progress amui-m-progress__container">
          <div class="amui-a-progress__bar progress-bar is--danger is--high" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
          </div>
        </div>
      </div>  <!-- Progress bar Molecule -->
      <div class="amui-o-card__details">
        <div class="amui-m-callout">
          <p class="amui-m-callout__title">Catégorie :<span class="amui-m-callout__description"> Nom</span></p>
        </div>  <!-- Callout Molecule -->
        <div class="amui-m-callout">
          <p class="amui-m-callout__title">Type :<span class="amui-m-callout__description"> Label</span></p>
        </div>  <!-- Callout Molecule -->
        <div class="amui-m-callout">
          <p class="amui-m-callout__title">Description :<span class="amui-m-callout__description"><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed orci dui, placerat in purus id, consequat tempor ex.</span></p>
        </div>  <!-- Callout Molecule -->
      </div>
      <div class="amui-o-card__date">
        <div class="amui-m-info-date">
          <p class="amui-m-info-date__title">Debut</p>
          <span class="amui-m-info-date__day">JJ/MM/YYYY</span>
          <span class="amui-m-info-date__time">00:00</span>
        </div>  <!-- Info date Molecule -->
        <div class="amui-m-info-date">
          <p class="amui-m-info-date__title">Fin</p>
          <span class="amui-m-info-date__day">JJ/MM/YYYY</span>
          <span class="amui-m-info-date__time">00:00</span>
        </div>  <!-- Info date Molecule -->
      </div>
    </section>  <!-- Card info Danger Molecules -->
  </div>
</div>  <!-- amui-g-grid -->