Paragon
Examples PowerPoint LTR

Portfolio Review

Generate the deck How a template is put together

Those are this report's own sheets, printed by the engine from the template and the payload below — not screenshots kept beside them.

The first sheet of Portfolio Review, as the engine prints it.

The source

This is the whole thing — the template, the pages that print from it, and the stylesheet they are dressed in, as HTML with {{ }} bindings. Nothing is generated from a designer format; what you see here is what the engine renders.

template.html 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<link rel="stylesheet" href="assets/css/report.css">

<style>
    body {
        margin: 0;
        font: 11pt sans-serif;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
</style>
</head>
<body>

<script id="report-data" type="application/json">{{json}}</script>

<template id="report-header"></template>
<template id="report-footer"></template>

</body>
</html>
page1.html 
<div class="page-background"></div>

<div class="page-content">
  <table class="data">
    <caption class="data-caption">
      <span class="subject">{{review.title}} — {{review.period}}</span>
      <span class="meta">
        {{review.entity}} — presented to the {{review.audience}} on {{date review.issued "d MMMM yyyy"}} — {{review.units}}
      </span>
    </caption>

    <thead>
      <tr>
        <th class="num">#</th>
        <th>Initiative</th>
        <th class="unit">Business unit</th>
        <th class="state">Status</th>
        <th class="num amount">Approved</th>
        <th class="num amount">Spent</th>
        <th class="progress">Progress</th>
      </tr>
    </thead>

    <tbody>
      {{#each initiatives}}
      <tr>
        <td class="seq"></td>
        <td>{{name}}</td>
        <td class="unit muted">{{unit}}</td>
        <td class="state"><span class="dot dot--{{state}}"></span>{{status}}</td>
        <td class="num amount">{{number budget "N0"}}</td>
        <td class="num amount">{{number spent "N0"}}</td>
        <td class="progress">
          <span class="bar"><span class="bar-fill" style="width: {{progress}}%"></span></span>
          <span class="pct">{{progress}}%</span>
        </td>
      </tr>
      {{/each}}
    </tbody>

    <tfoot>
      <tr>
        <td class="seq"></td>
        <td colspan="3">Delivered and closed — {{totals.closed.count}} initiatives</td>
        <td class="num amount">{{number totals.closed.budget "N0"}}</td>
        <td class="num amount">{{number totals.closed.spent "N0"}}</td>
        <td class="progress">
          <span class="bar"><span class="bar-fill" style="width: {{totals.closed.progress}}%"></span></span>
          <span class="pct">{{totals.closed.progress}}%</span>
        </td>
      </tr>
      <tr>
        <td class="seq"></td>
        <td colspan="3">In flight — {{totals.inFlight.count}} initiatives</td>
        <td class="num amount">{{number totals.inFlight.budget "N0"}}</td>
        <td class="num amount">{{number totals.inFlight.spent "N0"}}</td>
        <td class="progress">
          <span class="bar"><span class="bar-fill" style="width: {{totals.inFlight.progress}}%"></span></span>
          <span class="pct">{{totals.inFlight.progress}}%</span>
        </td>
      </tr>
      <tr class="grand">
        <td class="seq"></td>
        <td colspan="3">Portfolio total — {{review.units}}</td>
        <td class="num amount">{{number totals.portfolio.budget "N0"}}</td>
        <td class="num amount">{{number totals.portfolio.spent "N0"}}</td>
        <td class="progress">
          <span class="bar"><span class="bar-fill" style="width: {{totals.portfolio.progress}}%"></span></span>
          <span class="pct">{{totals.portfolio.progress}}%</span>
        </td>
      </tr>
    </tfoot>
  </table>
</div>
assets/css/report.css 
.page-background
{
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("../images/background.svg");
  background-color: #16203a; /* Behind the picture, for the moment before it has loaded. */
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.page-content
{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18mm 10mm;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.data
{
  width: 100%;
  max-width: 300mm;
  border-collapse: collapse;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 2mm 6mm rgba(0, 0, 0, .25);
  table-layout: fixed;
  font-size: 10pt;
}

.data th,
.data td
{
  padding: 2.4mm 3mm;
  border-bottom: 0.3mm solid #d8dce4;
  text-align: start;
}

.data thead th
{
  background: #0f766e;
  color: #fff;
  font-weight: 600;
  letter-spacing: .02em;
  border-bottom: 0;
}

/* Repeats the header on every sheet the table runs onto. */
.data thead
{
  display: table-header-group;
}

/* Never leave half a row on one sheet and half on the next. */
.data tr
{
  break-inside: avoid;
}

.data tbody tr:nth-child(even)
{
  background: rgba(15, 118, 110, .06);
}

.data tbody tr:last-child td
{
  border-bottom: 0;
}

/* Figures line up when they are all the same width. */
.data .num
{
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.data th.num
{
  text-align: end;
}

/* The first column is a counter, not a figure — it only needs room for two digits. */
.data th:first-child,
.data td:first-child
{
  width: 12mm;
  text-align: center;
}

.data .unit     { width: 36mm; }
.data .state    { width: 26mm; white-space: nowrap; }
.data .amount   { width: 24mm; }
.data .progress { width: 32mm; white-space: nowrap; }

.data .muted
{
  color: #4b5563;
}

.dot
{
  display: inline-block;
  width: 2.2mm;
  height: 2.2mm;
  border-radius: 50%;
  margin-inline-end: 1.8mm;
  background: #94a3b8;
}

.dot--ontrack { background: #16a34a; }
.dot--risk    { background: #d97706; }
.dot--delayed { background: #dc2626; }
.dot--done    { background: #0f766e; }

.bar
{
  display: inline-block;
  width: 17mm;
  height: 2.2mm;
  vertical-align: middle;
  border-radius: 1.1mm;
  background: rgba(15, 118, 110, .18);
  overflow: hidden;
}

.bar-fill
{
  display: block;
  height: 100%;
  background: #0f766e;
}

.pct
{
  display: inline-block;
  min-width: 9mm;
  margin-inline-start: 2mm;
  text-align: end;
  font-size: 9pt;
  font-variant-numeric: tabular-nums;
}

.data tbody
{
  counter-reset: line;
}

.data tbody .seq::before
{
  counter-increment: line;
  content: counter(line);
}

.data-caption
{
  padding: 3mm 3mm 2.4mm;
  background: #134e4a;
  color: #fff;
  text-align: start;
}

.data-caption .subject
{
  display: block;
  font-size: 12pt;
  font-weight: 600;
}

.data-caption .meta
{
  display: block;
  margin-top: 0.8mm;
  font-size: 8.5pt;
  opacity: .78;
}

.data tfoot
{
  display: table-row-group;
}

.data tfoot td
{
  padding-top: 3mm;
  padding-bottom: 3mm;
  border-bottom: 0;
  font-weight: 600;
}

.data tfoot tr:first-child td
{
  border-top: 0.5mm solid #0f766e;
}

.data tfoot .grand td
{
  background: rgba(15, 118, 110, .10);
  font-size: 11pt;
}
shared-assets/css/house.css 
/*
  The project's house style: what every report in it looks like before it looks like itself.

  It is in shared-assets rather than in a report because it is the project's, not one report's —
  the palette, the type, the sheet, the running header, and the handful of parts (card, chip, pill,
  meter, table) that every report here is assembled from. A report's own stylesheet composes these
  into its layout; it does not redecide what a card is.

  A template references it as assets/css/house.css, exactly as it references its own files. The
  shared folder is searched behind the report's own, so the path means the same thing in every
  report — and a report that needs its own version keeps a file at that path and wins.
*/

:root
{
  /* Named for the job, not the hue, so a rebrand is this block and nothing else. */
  --ink: #0f172a;
  --ink-soft: #475569;
  --ink-faint: #6b7a90;
  --ink-invert: #ffffff;

  --page: #ffffff;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --rule: #e2e8f0;
  --rule-soft: #eef2f7;

  --brand: #0b1f3a;
  --brand-2: #12325c;
  --accent: #1d4ed8;
  --accent-soft: #eef3ff;
  --cyan: #0ea5e9;

  --good: #047857;
  --good-soft: #e7f6f0;
  --warn: #b45309;
  --warn-soft: #fdf3e3;
  --bad: #b91c1c;
  --bad-soft: #fdeceb;
  --idle: #64748b;
  --idle-soft: #f1f5f9;

  --radius: 7px;
  --radius-sm: 4px;
}

body
{
  margin: 0;
  color: var(--ink);
  background: var(--page);

  /*
    No Arabic face here, and no Arabic font in shared-assets at all. Naming one for every report in
    the project meant seven reports asked for a typeface none of them loads, so what they actually
    printed in was the second name in the list. The one Arabic report carries the family and the
    files itself.
  */
  font-family: "Segoe UI", Tahoma, sans-serif;
  font-size: 11px;
  line-height: 1.55;

  /* Every figure in this project is read down a column, so digits are the same width. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/*
  The sheet.

  The engine prints with no page margin, so the edges are the report's own to leave. Cloned decoration
  keeps the padding on every sheet a long page runs onto rather than only the first, and the top
  padding is what the fixed running header sits in — it reserves no room of its own.
*/
.sheet
{
  box-sizing: border-box;
  width: 794px;
  min-height: 1123px;
  padding: 96px 40px 44px;

  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- the running header, on every sheet ---------- */

/*
  The engine fixes #report-page-header to the top of the sheet; everything below is this project's
  band inside it. A band rather than a line of text: it is the first thing on every page and the
  only thing carrying the mark, and at 76px it is still under a fifteenth of the sheet.
*/
#report-page-header
{
  height: 76px;
  background: linear-gradient(105deg, var(--brand) 0%, var(--brand-2) 62%, #17416f 100%);
  color: var(--ink-invert);
}

.masthead
{
  display: flex;
  align-items: center;
  gap: 14px;
  height: 73px;
  padding: 0 40px;
  box-sizing: border-box;
}

/* The accent edge, under the band. Three pixels is enough to read as deliberate. */
#report-page-header::after
{
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(to left, var(--accent), var(--cyan) 55%, rgba(14, 165, 233, 0));
}

.masthead .logo
{
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}

.masthead .titles
{
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.masthead .org
{
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.005em;
}

.masthead .subject
{
  font-size: 10.5px;
  color: #a9c2e0;
}

.masthead .meta
{
  margin-inline-start: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: end;
  white-space: nowrap;
}

.masthead .period
{
  font-size: 11px;
  font-weight: 600;
}

/* A quiet outline rather than a filled badge: it is a caveat, not a headline. */
.masthead .classification
{
  padding: 1px 7px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  font-size: 9px;
  color: #cddcee;
}

/* ---------- the page's own heading, under the band ---------- */

.pagehead
{
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--rule);
}

.pagehead h1
{
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.015em;
}

.pagehead .lede
{
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: 10.5px;
}

.pagehead .stamp
{
  margin-inline-start: auto;
  color: var(--ink-faint);
  font-size: 10px;
  white-space: nowrap;
}

/* ---------- parts ---------- */

.card
{
  box-sizing: border-box;
  padding: 12px 14px 10px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.card-head
{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.card h2
{
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
}

.card .note
{
  margin-inline-start: auto;
  color: var(--ink-faint);
  font-size: 9.5px;
  white-space: nowrap;
}

/* A chart draws itself left to right whatever the page does, and its own labels sit inside it. */
.chart
{
  width: 100%;
  direction: ltr;
}

.chip
{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
}

.chip--good { background: var(--good-soft); color: var(--good); }
.chip--bad  { background: var(--bad-soft);  color: var(--bad); }
.chip--warn { background: var(--warn-soft); color: var(--warn); }
.chip--idle { background: var(--idle-soft); color: var(--idle); }

/*
  A status, as a word with a dot rather than as a filled block: eight of them down a table column
  would otherwise be eight blocks of colour competing with the figures beside them.
*/
.pill
{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.pill::before
{
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.pill--good { color: var(--good); }
.pill--warn { color: var(--warn); }
.pill--bad  { color: var(--bad); }
.pill--idle { color: var(--idle); }
.pill--done { color: var(--accent); }

/*
  A proportion, drawn rather than written. Vector, so it stays sharp where a canvas would not — the
  small measures are the ones a reader leans in on.
*/
.meter
{
  height: 5px;
  border-radius: 3px;
  background: var(--rule-soft);
  overflow: hidden;
}

.meter > span
{
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
}

.meter--good > span { background: var(--good); }
.meter--warn > span { background: var(--warn); }
.meter--bad  > span { background: var(--bad); }

/* ---------- tables ---------- */

/*
  Fixed layout and a header group, which is the pair that keeps a long table on the sheet: without
  the first, columns size to their content and the far one runs off the paper; without the second,
  a table that paginates leaves the next sheet as unlabelled columns of numbers.
*/
table.grid
{
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 10.5px;
}

table.grid thead { display: table-header-group; }

table.grid tr { break-inside: avoid; }

/*
  Border-box, because a fixed layout takes the width it is given as the whole column: with padding
  added on top instead, six columns quietly cost another 96px and the one column left on auto pays
  for all of it.
*/
table.grid th,
table.grid td { box-sizing: border-box; }

table.grid th
{
  padding: 6px 8px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 9.5px;
  font-weight: 700;
  text-align: start;
  white-space: nowrap;
}

table.grid td
{
  padding: 6px 8px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
  overflow-wrap: break-word;
}

table.grid tbody tr:last-child td { border-bottom: 0; }

.num
{
  text-align: end;
  font-weight: 600;
}

/* ---------- the foot of the page ---------- */

.footnote
{
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
  color: var(--ink-faint);
  font-size: 9.5px;
}

/*
  The running footer, which the browser draws rather than the page.

  It is a document of its own at print time: this stylesheet is read and sent along with it, so type
  and layout arrive, but nothing it would have to fetch does — no webfont, no image, no background.
  So it is set in whatever face the renderer has, and kept to figures and a code, which read the same
  in any of them.
*/
.pagefoot
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 40px;
  box-sizing: border-box;
  color: #8a97a8;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 8.5px;
  letter-spacing: .04em;
}

What it carries

Stylesheets, scripts, images and fonts travel inside the report, so nothing is resolved from the outside while it renders. Anything under shared-assets/ belongs to the project rather than to this report — held once for every report in it, and reached from the template at the same assets/… path as the report's own.