Sélection de la langue

Gouvernement du Canada / Government of Canada

Manuel de conception de l'Infobase Santé

  Table des matières

Table des matières


Table des matières

Indicateurs clés

Les tuiles d'indicateurs clés sont utilisées pour attirer l'attention sur les principales conclusions du produit de données.

Sur cette page

Quand utiliser cette composante

  • Utilisez les indicateurs clés pour la plupart des produits de données afin de transmettre rapidement les renseignements les plus importants à tirer des données.
  • Fournissez le bon contexte aux indicateurs clés pour aider les utilisateurs à comprendre les chiffres.

Quoi éviter

  • N'utilisez pas les indicateurs clés pour des chiffres qui ne sont pas significatifs hors contexte.
  • N'ajoutez pas trop de tuiles d'indicateurs clés – limitez-vous aux principales conclusions.

Design et code

53 064

Nombre total de rapports de déclarations des manifestations cliniques inhabituelles suivant l'indemnisation

(0,032 % de toutes les doses administrées)
HTML 
<div class="row">
    <div class='boxes col-md-6'>
      <a href="#" data-figure="1" class="innerBox" style="display: flex; align-items: center;">
        <div class="mrgn-tp-lg mrgn-bttm-lg" style="width: 100%">
          <p class="h2">53 064</p>
          <p>Nombre total de rapports de déclarations des manifestations cliniques inhabituelles suivant l'indemnisation</p>
          <p class="h2">
            <small>(0.032% de toutes les doses administrées) </small>
          </p>
        </div>
      </a>
    </div>
  </div>
CSS 
.boxes {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-left: 1px;
  padding-right: 1px;
  height: 10%;
  }
  
  .boxes a,
  .boxes a:visited,
  .boxes a:focus {
    text-decoration: none;
    color: black;
  }
  
  .innerBox {
    flex: 0 0 48.5%;
    border: 3px solid #ccc;
    border-radius: 10px;
    margin-left: 0px;
    margin-right: 8px;
    text-decoration: none;
    color: black;
    margin-bottom: 5px;
  }
  
  .innerBox:hover {
    border: 3px solid #000;
    border-radius: 10px;
    box-shadow: 2px 2px;
  }
  
  .innerBox div {
    padding-left: 3px;
    padding-right: 3px;
  }
  
  .boxes p {
    font-size: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  
  .boxes p.h2 {
    font-size: 30px;
    margin-top: 5px;
  }

Lignes directrices sur le contenu et le design

  • Gardez le texte court, concis et descriptif.
  • Lorsque cela est approprié, incluez une indication de la tendance des données (en hausse, en baisse ou stable).
  • Lorsque cela est approprié, liez la tuile d'indicateur clé aux données détaillées sur la page.
  • Lorsque cela est possible, générez les données de manière dynamique à partir de la source de données.
  • Suivez les lignes directrices générales sur le design.

Lignes directrices sur l'accessibilité

Date de modification :