Clinical page template (v7)

This page documents every component available in the v7 design system and shows exactly how to use them in Markdown / HTML.

Jump bar

Add at the top of any clinical pathway page for quick in-page navigation:

<nav class="nephron-jumpbar" aria-label="Jump to section">
  <a href="#summary">Summary</a>
  <a href="#staging">Staging</a>
  <a href="#management">Management</a>
</nav>

Reading intro box

<div class="nephron-reading-intro">
<strong>Quick read:</strong> One sentence that orients the reader to the page.
</div>

Clinical note (blue info box)

<div class="clinical-note-top">
  <strong>Practical orientation:</strong> Key framing statement for the clinician.
</div>

Usage strip (3-column)

<div class="clinical-usage-strip">
  <div><strong>Use first:</strong> summary and algorithm.</div>
  <div><strong>Then:</strong> workup tables.</div>
  <div><strong>Escalate:</strong> red flags section.</div>
</div>

Summary cards

<div class="clinical-summary-grid">
  <div class="clinical-summary-card">
    <div class="clinical-summary-label">Definition</div>
    <div class="clinical-summary-value">Content here.</div>
  </div>
  <!-- repeat as needed -->
</div>

Tables

Standard Markdown tables are automatically wrapped in .nephron-table-wrap by the render hook. They render with a teal header row, alternating row stripes, and horizontal scroll on small screens.

For staging/severity tables where the first column should use traffic-light colours, wrap in:

<div class="table-staging">

| Stage | Criterion |
|---|---|
| 1 | Mild |
| 2 | Moderate |
| 3 | Severe |

</div>

Expandable sections

Use for background information, detailed RRT criteria, follow-up protocols — anything that should be available but not in the primary reading flow:

<details class="nephron-expand">
<summary>Section title shown to user</summary>

Your detailed content here — prose, lists, tables all work.

</details>

Figure

<figure class="clinical-figure">
  <img src="../media/figure.svg" alt="Description">
</figure>

Domain accent classes

Add to .nephron-card elements to apply the coloured top border:

Class	Colour	Domain
`.domain-ckd`	Blue	Chronic kidney disease
`.domain-cardio`	Rose	Cardiovascular
`.domain-metabolic`	Green	Diabetes / metabolism
`.domain-glom`	Purple	Glomerular / immunology
`.domain-genetic`	Sky blue	Genetic / cystic
`.domain-palliative`	Slate	Conservative / palliative
`.domain-bone`	Amber	Bone, mineral, endocrine
`.domain-handbook`	Teal	Handbook

Clinical callout blocks (shortcodes)

Five semantic callout types. Use them in any .md file.

Red flag

{{< redflag title="Do not miss" >}}
Anuria, RPGN, severe hyperkalaemia, uraemic pericarditis.
{{< /redflag >}}

Clinical pearl (blue)

{{< pearl >}}
FENa <1% suggests pre-renal but is unreliable after diuretics.
{{< /pearl >}}

Key takeaway (gold)

{{< keytake title="When to act" >}}
eGFR <20 → start dialysis modality education.
{{< /keytake >}}

Work-up (purple)

{{< workup >}}
UA with microscopy · UPCR · BMP · anti-GBM · ANCA · complement
{{< /workup >}}

Management (green)

{{< manage >}}
Stop nephrotoxins · correct volume · treat underlying cause
{{< /manage >}}

Semantic colour map

Colour	Use for
🔵 Blue	Information, pearls, mechanisms
🔴 Red	Danger, urgency, do not miss
🟡 Gold	Key decisions, takeaways
🟣 Purple	Work-up, investigations
🟢 Green	Management, treatment