A row of headline figures that survives a narrow page

Why this block is harder than it looks

The strip is copied from a dashboard, and a dashboard is a wide, scrolling surface where five items across is comfortable. A portrait page is not: five items across a 170mm text block leaves 34mm each, which is not enough for a figure with a thousands separator plus a label, so both get shrunk until the strip is a row of small grey text and the hierarchy it was supposed to create is gone. The second problem is that the labels vary in length and the figures vary in magnitude, so a flex row distributes the space by content and the items stop being comparable.

The decisions that make it work

Reasons rather than a description of the code. Each of these is a choice that has a wrong answer, and the wrong answer is usually the default.

• Cap it at four items on a portrait page and three if the figures carry thousands separators. A fifth item goes on a second row.
• Use a grid with equal columns rather than a flex row, so every item gets the same width regardless of how long its label is.
• Set the figure large enough to be the first thing read, at least twice the body size, and the label small above it rather than below.
• Let the label wrap to two lines and reserve the space for two, so a longer label does not make its item taller than the rest.
• Separate the items with space or a hairline rather than with boxes. A row of bordered boxes reads as a table of one row and competes with the real tables below.
• Keep the strip together with break-inside: avoid and pin it above the first section rather than letting it float into the middle of the document.

The fragment

Markup and the CSS it needs, and nothing else. It expects a document that already has a page rule and a base stylesheet, so paste it into one rather than opening it on its own.

<section class="keyfigures">
  <div class="fig">
    <p class="label">Documents rendered</p>
    <p class="value">18,204</p>
  </div>
  <div class="fig">
    <p class="label">Average pages per document</p>
    <p class="value">4.2</p>
  </div>
  <div class="fig">
    <p class="label">Failed renders</p>
    <p class="value">31</p>
  </div>
</section>

<style>
  .keyfigures {
    display: grid;
    grid-template-columns: repeat(3, 1fr);   /* equal, not content-sized */
    column-gap: 10mm;
    break-inside: avoid;
    margin: 12pt 0 18pt;
    border-top: 0.5pt solid #ccc;
    border-bottom: 0.5pt solid #ccc;
    padding: 8pt 0;
  }
  .keyfigures .label {
    margin: 0 0 3pt;
    min-height: 2.4em;                       /* room for two lines, always */
    font-size: 8pt;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #666;
  }
  .keyfigures .value {
    margin: 0;
    font-size: 22pt;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
</style>

What breaks when it is built the obvious way

Laying it out with flexbox and letting the items size themselves. The item with the longest label takes the most width, so the figures sit at four different distances from the left and the row stops reading as a set. Equal grid columns fix it in one line.

How to prove it survived pagination

Render with your longest label and your largest figure in the same strip. Nothing should wrap to three lines, no figure should shrink, and all the items should be the same width. Then check it at the narrowest page size the document supports.

Where it sits in a finished document

This page is one block. The document it belongs to has a page rule, a base stylesheet, a header and everything else around it, and repeating all of that here would make thirty pages that say the same thing. The multi-page report template is a complete file with this block already in it, so take that and change the fragment rather than assembling one from parts. The property doing most of the work here is covered on its own page, with the support caveats that belong there rather than here.

Frequently asked

Other parts of a document

The blocks that sit next to this one, and one from the next group along so you are not sealed inside a single kind of problem.