ClearReport — Article Component Library
Article Component Library
v1.0 — May 2026

Article Component Library

Every component below is copy-ready. Click "Copy Code" → open your CMS article → click the + button in Rich Text → Embed → paste. Each snippet is fully responsive and matches ClearReport's brand tokens exactly.

Responsive Brand tokens Copy ready Webflow CMS 10 components
01
Info Box
Sage green — educational notes, important context
cr-info-box
Responsive Ready to use

Live preview

ⓘ Educational note

Reference ranges can vary slightly between labs based on the equipment and methods used. Always compare your result to the reference range printed on your own report, not numbers from the internet.

HTML — copy this
<div style="background:#EAF2F0;border-radius:12px;padding:24px 28px;margin:32px 0;">
  <p style="font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#2F6B5F;margin-bottom:10px;font-family:sans-serif;">ⓘ Educational note</p>
  <p style="font-size:15px;color:#2F6B5F;line-height:1.65;margin:0;font-family:sans-serif;">YOUR TEXT HERE</p>
</div>
When to use: Educational context, lab variation notes, general health information caveats.
Replace: "Educational note" with your label · "YOUR TEXT HERE" with your content
02
Warning Box
Terracotta — urgent follow-up, when to see a doctor
cr-warning-box
Responsive Ready to use

Live preview

⚠ When to follow up promptly

A WBC count below 2,500 or above 30,000, especially with symptoms like fever, unusual fatigue, or unexplained weight loss, warrants prompt follow-up. Don't self-diagnose, but do contact your doctor the same day.

HTML — copy this
<div style="background:#F7EDE8;border-radius:12px;padding:24px 28px;margin:32px 0;">
  <p style="font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#C4785A;margin-bottom:10px;font-family:sans-serif;">⚠ When to follow up promptly</p>
  <p style="font-size:15px;color:#C4785A;line-height:1.65;margin:0;font-family:sans-serif;">YOUR TEXT HERE</p>
</div>
When to use: Urgent symptoms, dangerous ranges, "see your doctor if..." scenarios.
Replace: Warning label and body text with your content.
03
Key Takeaway
Dark — end of article summary, the one thing to remember
cr-takeaway
Responsive Ready to use

Live preview

✦ Key takeaway

Your CBC is most useful when read alongside your symptoms, your history, and any other tests ordered at the same time. That's the conversation worth having with your doctor — and now you're equipped to have it.

HTML — copy this
<div style="background:#1A1A1A;border-radius:12px;padding:24px 28px;margin:32px 0;">
  <p style="font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:10px;font-family:sans-serif;">✦ Key takeaway</p>
  <p style="font-size:16px;color:white;line-height:1.65;margin:0;font-family:sans-serif;">YOUR TEXT HERE</p>
</div>
When to use: Always at the end of every article — one per article only. The most important single sentence the reader should remember.
04
Pull Quote
Editorial — doctor quote, important insight mid-article
cr-pull-quote
Responsive Ready to use

Live preview

"A low haemoglobin isn't the whole answer — it's the start of the question. MCV tells you which direction to look next."

— Dr. Rina Mehta, Internal Medicine
HTML — copy this
<div style="border-left:3px solid #2F6B5F;padding:8px 0 8px 24px;margin:40px 0;">
  <p style="font-family:'DM Serif Display',Georgia,serif;font-size:22px;line-height:1.45;color:#1A1A1A;margin:0;font-style:italic;">YOUR QUOTE HERE</p>
  <cite style="display:block;font-size:13px;color:#6B7280;margin-top:10px;font-style:normal;font-family:sans-serif;">— Author, Role</cite>
</div>
When to use: One per article maximum. Best placed mid-article after a key insight has been made. Use a real doctor quote or a distilled version of the article's most important point.
05
Section Divider
Minimal — separates major sections, always before Key Takeaway
cr-divider
Responsive Ready to use

Live preview

HTML — copy this
<hr style="border:none;border-top:1px solid #EDE9E4;margin:48px 0;">
When to use: Before the Key Takeaway at the end of every article. Can also be used between major H2 sections for long articles.
06
Reference Table — 3 Column
Responsive — scrolls horizontally on mobile. Parameter / Range / Status
cr-table-3col
Responsive Ready to use

Live preview — scroll horizontally on mobile

Parameter Normal Range Status
Haemoglobin (Hb) Men: 13–17 g/dL
Women: 12–15 g/dL		 Key marker
RBC Count Men: 4.5–5.9 M/µL
Women: 4.1–5.1 M/µL		 Key marker
MCV 80–100 fL Diagnostic
RDW 11.5–14.5% Watch if high
HTML — copy this
<div style="overflow-x:auto;border-radius:12px;margin:32px 0;box-shadow:0 2px 12px rgba(0,0,0,0.06);-webkit-overflow-scrolling:touch;">
  <table style="width:100%;border-collapse:collapse;font-size:14px;font-family:sans-serif;min-width:480px;">
    <thead style="background:#2F6B5F;color:white;">
      <tr>
        <th style="padding:12px 16px;text-align:left;font-size:11px;letter-spacing:0.05em;text-transform:uppercase;font-weight:600;white-space:nowrap;">Parameter</th>
        <th style="padding:12px 16px;text-align:left;font-size:11px;letter-spacing:0.05em;text-transform:uppercase;font-weight:600;white-space:nowrap;">Normal Range</th>
        <th style="padding:12px 16px;text-align:left;font-size:11px;letter-spacing:0.05em;text-transform:uppercase;font-weight:600;white-space:nowrap;">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr style="background:white;border-bottom:1px solid #EDE9E4;">
        <td style="padding:12px 16px;"><strong>ROW 1 PARAMETER</strong></td>
        <td style="padding:12px 16px;color:#1A1A1A;">RANGE VALUE</td>
        <td style="padding:12px 16px;color:#2F6B5F;font-weight:600;font-size:12px;">Key marker</td>
      </tr>
      <tr style="background:#F8F5F2;border-bottom:1px solid #EDE9E4;">
        <td style="padding:12px 16px;"><strong>ROW 2 PARAMETER</strong></td>
        <td style="padding:12px 16px;color:#1A1A1A;">RANGE VALUE</td>
        <td style="padding:12px 16px;color:#2F6B5F;font-weight:600;font-size:12px;">Supporting</td>
      </tr>
      <tr style="background:white;">
        <td style="padding:12px 16px;"><strong>ROW 3 PARAMETER</strong></td>
        <td style="padding:12px 16px;color:#1A1A1A;">RANGE VALUE</td>
        <td style="padding:12px 16px;color:#C4785A;font-weight:600;font-size:12px;">Watch if high</td>
      </tr>
    </tbody>
  </table>
</div>
Status colours: #2F6B5F for normal/good · #C4785A for watch/elevated
Mobile: Table scrolls horizontally — the min-width:480px and overflow-x:auto handle this automatically.
Add rows: Alternate background:white and background:#F8F5F2 for striping.
07
Reference Table — 4 Column
Responsive — Type / Range / High means / Low means
cr-table-4col
Responsive Ready to use

Live preview — scroll horizontally on mobile

Type Normal Range High Suggests Low Suggests
Total WBC 4,000–11,000 /µL Infection, inflammation Viral illness, medication
Neutrophils 40–70% Bacterial infection Viral infections, medications
Lymphocytes 20–40% Viral infections HIV, immune conditions
HTML — copy this
<div style="overflow-x:auto;border-radius:12px;margin:32px 0;box-shadow:0 2px 12px rgba(0,0,0,0.06);-webkit-overflow-scrolling:touch;">
  <table style="width:100%;border-collapse:collapse;font-size:14px;font-family:sans-serif;min-width:560px;">
    <thead style="background:#2F6B5F;color:white;">
      <tr>
        <th style="padding:12px 16px;text-align:left;font-size:11px;letter-spacing:0.05em;text-transform:uppercase;font-weight:600;white-space:nowrap;">Type</th>
        <th style="padding:12px 16px;text-align:left;font-size:11px;letter-spacing:0.05em;text-transform:uppercase;font-weight:600;white-space:nowrap;">Normal Range</th>
        <th style="padding:12px 16px;text-align:left;font-size:11px;letter-spacing:0.05em;text-transform:uppercase;font-weight:600;white-space:nowrap;">High Suggests</th>
        <th style="padding:12px 16px;text-align:left;font-size:11px;letter-spacing:0.05em;text-transform:uppercase;font-weight:600;white-space:nowrap;">Low Suggests</th>
      </tr>
    </thead>
    <tbody>
      <tr style="background:white;border-bottom:1px solid #EDE9E4;">
        <td style="padding:12px 16px;"><strong>TYPE 1</strong></td>
        <td style="padding:12px 16px;color:#1A1A1A;">RANGE</td>
        <td style="padding:12px 16px;color:#1A1A1A;">HIGH INFO</td>
        <td style="padding:12px 16px;color:#1A1A1A;">LOW INFO</td>
      </tr>
      <tr style="background:#F8F5F2;border-bottom:1px solid #EDE9E4;">
        <td style="padding:12px 16px;"><strong>TYPE 2</strong></td>
        <td style="padding:12px 16px;color:#1A1A1A;">RANGE</td>
        <td style="padding:12px 16px;color:#1A1A1A;">HIGH INFO</td>
        <td style="padding:12px 16px;color:#1A1A1A;">LOW INFO</td>
      </tr>
      <tr style="background:white;">
        <td style="padding:12px 16px;"><strong>TYPE 3</strong></td>
        <td style="padding:12px 16px;color:#1A1A1A;">RANGE</td>
        <td style="padding:12px 16px;color:#1A1A1A;">HIGH INFO</td>
        <td style="padding:12px 16px;color:#1A1A1A;">LOW INFO</td>
      </tr>
    </tbody>
  </table>
</div>
When to use: WBC differential, comparison tables, anything with high/low interpretation.
Mobile: min-width:560px forces scroll on narrow screens — all content stays readable.
08
Stat Cards
3-up grid — key numbers, prevalence stats, quick facts
cr-stat-cards
Responsive New

Live preview

70%
of Indians are Vitamin D deficient
77M
Indians have diabetes
3×
more common in women
HTML — copy this
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:32px 0;">
  <div style="background:white;border-radius:12px;padding:20px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,0.05);">
    <div style="font-family:'DM Serif Display',Georgia,serif;font-size:32px;color:#2F6B5F;line-height:1;">STAT 1</div>
    <div style="font-size:12px;color:#6B7280;margin-top:6px;font-family:sans-serif;line-height:1.4;">LABEL 1</div>
  </div>
  <div style="background:white;border-radius:12px;padding:20px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,0.05);">
    <div style="font-family:'DM Serif Display',Georgia,serif;font-size:32px;color:#2F6B5F;line-height:1;">STAT 2</div>
    <div style="font-size:12px;color:#6B7280;margin-top:6px;font-family:sans-serif;line-height:1.4;">LABEL 2</div>
  </div>
  <div style="background:white;border-radius:12px;padding:20px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,0.05);">
    <div style="font-family:'DM Serif Display',Georgia,serif;font-size:32px;color:#2F6B5F;line-height:1;">STAT 3</div>
    <div style="font-size:12px;color:#6B7280;margin-top:6px;font-family:sans-serif;line-height:1.4;">LABEL 3</div>
  </div>
</div>
When to use: Opening statistics, prevalence data, key numbers that establish why the article matters.
Mobile: Goes to 2 columns automatically via browser flow — third card wraps cleanly.
09
Step List
Numbered — sequential steps, preparation guides, instructions
cr-step-list
Responsive New

Live preview

  • 1
    Fast for at least 8 hoursOnly water is allowed. No tea, coffee, or juice as these affect your blood sugar reading.
  • 2
    Avoid heavy exercise the day beforeStrenuous exercise can temporarily elevate certain markers including WBC and CPK.
  • 3
    Bring your previous reportsTrends over time are more meaningful than any single result.
HTML — copy this
<div style="margin:32px 0;display:flex;flex-direction:column;gap:12px;">

  <div style="display:flex;gap:14px;align-items:flex-start;">
    <div style="width:28px;height:28px;border-radius:50%;background:#2F6B5F;color:white;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:sans-serif;margin-top:2px;">1</div>
    <div style="font-size:15px;color:#1A1A1A;line-height:1.65;font-family:sans-serif;"><strong style="display:block;margin-bottom:2px;">STEP 1 TITLE</strong>Step 1 description goes here.</div>
  </div>

  <div style="display:flex;gap:14px;align-items:flex-start;">
    <div style="width:28px;height:28px;border-radius:50%;background:#2F6B5F;color:white;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:sans-serif;margin-top:2px;">2</div>
    <div style="font-size:15px;color:#1A1A1A;line-height:1.65;font-family:sans-serif;"><strong style="display:block;margin-bottom:2px;">STEP 2 TITLE</strong>Step 2 description goes here.</div>
  </div>

  <div style="display:flex;gap:14px;align-items:flex-start;">
    <div style="width:28px;height:28px;border-radius:50%;background:#2F6B5F;color:white;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:sans-serif;margin-top:2px;">3</div>
    <div style="font-size:15px;color:#1A1A1A;line-height:1.65;font-family:sans-serif;"><strong style="display:block;margin-bottom:2px;">STEP 3 TITLE</strong>Step 3 description goes here.</div>
  </div>

</div>
When to use: Test preparation steps, supplement protocols, doctor visit prep, any ordered sequence.
Add more steps: Copy one step block and change the number.
10
Highlight Box
Sage gradient — single powerful statement, mid-article emphasis
cr-highlight-box
Responsive New

Live preview

"Pre-diabetes is reversible. Multiple large studies show that lifestyle changes alone can bring HbA1c back into the normal range without medication."

HTML — copy this
<div style="background:linear-gradient(135deg,#2F6B5F 0%,#4A8C7E 100%);border-radius:12px;padding:28px 32px;margin:32px 0;text-align:center;">
  <p style="font-family:'DM Serif Display',Georgia,serif;font-size:20px;color:white;line-height:1.5;margin:0;font-style:italic;">YOUR STATEMENT HERE</p>
</div>
When to use: One powerful sentence that deserves emphasis — a surprising statistic, a reassuring fact, or a key clinical insight. Use sparingly — one per article maximum.
?
How to use this library
Step by step — copy, paste, publish
  • 1
    Open your article in Webflow CMSGo to CMS → Learns → click the article you want to edit
  • 2
    Click into the article-body Rich Text fieldPlace your cursor where you want the component to appear
  • 3
    Click the + button in the Rich Text toolbarSelect "Embed" from the options
  • 4
    Click "Copy" on the component you needCome back here, find the component, click the Copy button
  • 5
    Paste into the Embed fieldReplace all placeholder text (YOUR TEXT HERE, ROW 1, etc.) with real content
  • 6
    Save and publishThe component renders exactly as shown in the preview above

Standard article structure

Paragraph → Paragraph
[INFO BOX] — context or caveat
H2 heading
Paragraph
[TABLE 3COL or 4COL] — reference data
Paragraph
[WARNING BOX] — if needed
H2 heading
Paragraph
[PULL QUOTE] — one per article
H2 heading
Paragraph
[DIVIDER]
[KEY TAKEAWAY] — always last