Card pour la PAR01

Card

<div class="implantations">
  <mat-card class="implantations__item">
    <mat-card-title>
      Centre de détention de Meulun <span class="implantations__badge implantations__badge-inactive">Inactif</span>
    </mat-card-title>
    <mat-card-content>
      <p>10 quai de la courtille - 45000 Melun</p>
      <button class="implantations__arrow"><mat-icon >chevron_right</mat-icon></button>
    </mat-card-content>
  </mat-card>
</div>
  
 h1 {
  text-align: center;
}

// Colors
.implantations {
  .implantations__item {
    position: relative;
    mat-card-title {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-right: 30px;
    }
    .implantations__badge {
      padding: 4px 8px;
      border-radius: 12px;
      font-size: 0.8rem;
      font-weight: normal;
      z-index: 2;
      &.implantations__badge-active {
        background-color: var(--sucess-color);
        color: white;
      }
      &.implantations__badge-inactive {
        background-color: var(--danger-color);
        color: white;
      }
    }
    .implantations__arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 16px;
      background-color: white;
      border: none;
      cursor: pointer;
      .mat-icon {
        font-size: 2.5em;
      }
    }
  }
}

  /**
   * Permet de déconnecter l'utilisateur de l'application
   */
  deconnexion(): void {
    this.userInfos = null;
    sessionStorage.clear();
    window.location.replace(this.configProvider.get().apiUrl + 'saml/logout');
  }