Language selection

Government of Canada / Gouvernement du Canada

Health Infobase Design Manual

  Table of contents

Table of contents


Table of contents

Key highlights tiles

Key highlights tiles are used to draw attention to the key insights from the data product.

On this page

When to use

  • Use key highlights on most data products to quickly convey the important insights from the data
  • Provide proper context for key highlights to help users make sense of the numbers

What to avoid

  • Don’t use key highlights for numbers that are not meaningful out of context
  • Don’t add too many key highlights tiles - stick to the key take-aways

Design and code

53,064

Total adverse events following immunization reports

(0.032% of all doses administered)
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>Total adverse event following immunization reports</p>
        <p class="h2">
          <small>(0.032% of all doses administered) </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;
}

Content and design guidelines

  • Keep the text short, concise and descriptive
  • Where appropriate, include an indication of whether the data is trending up or down, or if it’s stable
  • Where appropriate, link the key highlight tile to the detailed data on the page
  • When possible, generate the data dynamically from the data source
  • Follow the general design guidelines

Accessibility guidelines

  • If you include an icon or an image, make sure that any information conveyed by the image is also conveyed in a non-visual fashion
  • Follow the general accessibility guidelines
Date modified: