Production-grade component library for the Preologi WordPress theme. All tokens, components, and patterns are defined with vanilla CSS custom properties and semantic HTML.
01 — Design Tokens
Core custom properties that define the visual language of the Preologi system.
--colour-primary
#A040E0
--colour-primary-dark
#6A5AE0
--colour-primary-light
#C855E8
--colour-accent
#EE4BE4
--colour-accent-warm
#FF6F61
--colour-accent-blue
#80C8F8
--colour-secondary
#4F46E5
--colour-ink
#0E0B1A
--colour-bg-soft
#FAF8FF
--gradient-primary
135deg palette
--gradient-button
Button gradient
--gradient-text
3-stop spectrum
content-area--gradient
Radial glow (accent @16%)
heading-1 · var(--text-4xl) · clamp(2.0rem, 4vw + 0.5rem, 3.6rem)
heading-2 · var(--text-3xl) · clamp(1.75rem, 2.5vw + 0.5rem, 2.25rem)
heading-3 · var(--text-2xl) · 24px
heading-4 · var(--text-xl) · 20px
body-lg · var(--text-lg) · 17px
Larger body text for ledes and summaries.
body-base · var(--text-base) · 15px
Standard body text used throughout the site. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
heading-1 + gradient-text · For hero headlines and key messaging
Gradient text is applied to an inline span within the heading — this gives the gradient enough horizontal space to display the full spectrum.
heading-2 + gradient-text · For section headers
Use on the key phrase within the heading, not the entire heading.
--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
20px
--space-6
24px
--space-8
32px
--space-10
40px
--space-12
48px
--space-16
64px
--space-20
80px
--space-24
96px
--space-32
128px
--space-40
160px
--space-48
192px
--bp-sm
480px
--bp-md
768px
--bp-lg
1024px
--bp-xl
1240px
--bp-2xl
1440px
--radius-sm
4px
--radius-md
8px
--radius-lg
16px
--radius-xl
24px
--radius-2xl
32px
--radius-card
32px
--radius-pill
999px
02 — Buttons
All button variants for calls to action, links, and interactive elements.
03 — Form Inputs
All input types with labels, placeholders, and states.
04 — Cards
Reusable card components for content, stats, testimonials, and partner logos. Hover to see gradient border effect.
Core card with image, content, and footer. Hover to see gradient border effect.
Eyebrow label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.
.card → .card__image + .card__content + .card-footer
All card modifier variants — news, screening, team, partner, resource, and video.
News Card (Text Over Image)
A landmark study published in The Lancet demonstrates the test's ability to identify multiple cancer types from a single blood draw.
.card.card--news.card--overlay.card--overlay--bottom-left
Video Card (Text Over Image)
Learn how the Galleri® test uses advanced DNA analysis to screen for over 50 types of cancer from a single blood draw.
.card.card--video.card--overlay.card--overlay--bottom-left
Screening Card
One blood test that can help detect over 50 types of cancer at an early stage.
Learn more.card.card--screening
Team Card
Chief Medical Officer
Dr Chen leads our clinical team with 20+ years of experience in oncology and early cancer detection.
.card.card--team
Full-height promo cards with image overlay and gradient text. Used on Get Tested page.
Default Promo Card
The most advanced multi-cancer early detection test available in the UK. A single blood draw analyses cell-free DNA to identify cancer signals and predict the tissue of origin.
.card.card-promo
Selected Promo Card
The most advanced multi-cancer early detection test available in the UK. A single blood draw analyses cell-free DNA to identify cancer signals and predict the tissue of origin.
.card.card-promo.card-promo--selected
Coming Soon Promo Card
Early identification of dementia risk through advanced blood analysis. Understand your risk profile and take proactive steps.
.card.card-promo.card-promo--coming-soon
Pill-shaped chips showing cancer types with purple dot indicator. Used on Galleri page.
Cancer Type Cards
.cancer-card + .cancer-card--more
Hidden State (toggled via JS)
.cancer-card.cancer-card--hidden
Outcome cards for "Results Explained" step. Shows result state with icon, heading, and description.
No Signal (Inactive)
The test did not detect a signal for cancer. This is a reassuring result, but it does not rule out the presence of cancer.
.results-card
05 — Accordion
Expandable sections for FAQs and detailed content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="preologi-accordion-group">
<button class="preologi-accordion" aria-expanded="false">
Question title
<svg>...</svg>
</button>
<div class="preologi-accordion-content">
<div>Answer text</div>
</div>
<!-- Repeat for each accordion item -->
</div>
Variant with faq-accordion-group modifier — used on the Galleri page FAQs panel. Uses <div role="button"> elements with preologi-accordion-content__inner wrapper for the answer.
The test analyses cell-free DNA (cfDNA) in your blood. When cells die – including cancer cells – they release fragments of DNA into the bloodstream. Galleri® identifies patterns in these DNA fragments that are associated with cancer, including methylation signatures that can often indicate where the cancer originated.
In clinical studies, the Galleri® test demonstrated 99.6% specificity and 52.2% overall sensitivity. This means it correctly identifies people without cancer in 99.6% of cases, and detects cancer when present in 52.2% of cases. Sensitivity is significantly higher for later-stage cancers (73.8% for Stage I, and up to 99.3% for Stage IV).
A positive Galleri® result is not a cancer diagnosis. It indicates a cancer signal that requires further investigation. Your trained clinician will review your results and guide you through the appropriate next steps, which may include referral to specialist services for confirmatory testing.
<div class="preologi-accordion-group faq-accordion-group">
<div class="preologi-accordion" role="button" aria-expanded="false" tabindex="0">
<span>Question title</span>
<svg>...</svg>
</div>
<div class="preologi-accordion-content">
<div class="preologi-accordion-content__inner">
<p>Answer text</p>
</div>
</div>
<!-- Repeat for each accordion item -->
</div>
06 — Page Hero
Reusable page hero component — appears on all 9+ pages. Shown at prototype width (constrained container).
Health screenings
<section class="page-hero">
<div class="page-hero__inner">
<p class="preologi-eyebrow">Health screenings</p>
<h1 class="page-hero__title preologi-heading-1">From concern to clarity</h1>
<div class="page-hero__subtitle preologi-body-lg">...</div>
<div class="page-hero__actions">
<a class="preologi-btn preologi-btn--primary page-hero__cta-btn">Register now</a>
<a class="preologi-btn preologi-btn--secondary page-hero__cta-btn">Learn more</a>
</div>
</div>
</section>
Galleri® test
<section class="page-hero page-hero--compact">
The science
<section class="page-hero page-hero--centered">
Get tested
<section class="page-hero page-hero--with-image">
<div class="page-hero__inner">
<div>...content...</div>
<div class="page-hero__image">...</div>
</div>
</section>
<section class="page-hero page-hero--eyebrow">
<div class="page-hero__inner">
<div class="page-hero__eyebrow-row">
<span class="page-hero__eyebrow-line"></span>
<h1 class="page-hero__eyebrow-text">Latest news</h1>
<span class="page-hero__eyebrow-line"></span>
</div>
</div>
</section>
Login
<section class="page-hero page-hero--short">
Galleri® test
<section class="page-hero page-hero--dark" style="--hero-bg: url('...')">
<div class="page-hero__inner"> ... </div>
</section>
07 — Alerts & Banners
Semantic alert components for notices, warnings, and information.
08 — Badges
Compact label/pill for status, categories, and metadata.
<span class="preologi-badge preologi-badge--info">Info</span>
<span class="preologi-badge preologi-badge--news">News</span>
<span class="preologi-badge preologi-badge--primary preologi-badge--sm">SM badge</span>
09 — Filter Pills
Horizontal pill-style filter bar with active state.
<div class="filter-pills">
<button class="filter-pill filter-pill--active">All</button>
<button class="filter-pill">Articles</button>
<button class="filter-pill">Press Releases</button>
</div>
<button class="filter-pill filter-pill--small filter-pill--active">All</button>
10 — Stat & Stats Bar
Stat number + label pair, and full stats bar grid for key metrics.
<div class="stat">
<span class="stat__number stat__number--gradient">50+</span>
<span class="stat__label">Cancers detected</span>
</div>
<div class="stats-bar">
<div class="stat">
<span class="stat__number stat__number--gradient">50+</span>
<span class="stat__label">Cancers</span>
</div>
<!-- Repeat ×5 -->
</div>
11 — Early Stat
Stat pair with large number + label for early detection metrics.
<div class="early-stat">
<span class="early-stat__number">93%</span>
<span class="early-stat__label">Detected at Stage I or II</span>
</div>
12 — Price Callout
Large price display with label — for pricing sections.
<div class="price-callout">
<span class="price-callout__amount">£995</span>
<span class="price-callout__label">Full Galleri® test</span>
</div>
13 — Performance List
Value + label list for test performance metrics.
<ul class="performance-list">
<li class="performance-item">
<span class="performance-item__value">89%</span>
<span class="performance-item__label">Stage I cancer detection rate</span>
</li>
<!-- Repeat for each metric -->
</ul>
14 — Breadcrumbs
Navigation trail for deep pages. Semantic <nav> + <ol> structure.
15 — Steps
Numbered step indicators for multi-step processes — horizontal step grid with gradient number circles and connecting lines.
Classic horizontal step indicator with gradient number circles and connecting lines.
<div class="step-grid">
<div class="step">
<div class="step__number">1</div>
<div class="step__title">Request</div>
<div class="step__desc">Order your test kit</div>
</div>
<!-- Repeat for each step -->
</div>
16 — How It Works
Vertical stacked card layout with gradient number blocks. Appears on the Home page.
Choose your test online and receive your kit with everything you need. No GP referral required.
Visit your local clinic for a quick blood draw. Our trained phlebotomists make it comfortable and easy.
Get your results online within 10 working days, with support from our clinical team if needed.
<section class="hiw">
<div class="hiw__steps">
<div class="hiw-step">
<div class="hiw-step__num" style="background: ...">1</div>
<div class="hiw-step__content">
<h3 class="hiw-step__title preologi-heading-4">Title</h3>
<p>Description</p>
</div>
</div>
<!-- Repeat for each step -->
</div>
</section>
17 — Comparison Table
NHS vs Galleri comparison table with alternating row backgrounds and column shading. Appears on Galleri page.
<div class="comparison-table">
<div class="comparison-row comparison-row--header">
<div class="comparison-cell">Feature</div>
<div class="comparison-cell">Galleri®</div>
<div class="comparison-cell">NHS CT</div>
</div>
<div class="comparison-row">
<div class="comparison-cell">Cancers detected</div>
<div class="comparison-cell">50+</div>
<div class="comparison-cell">2</div>
</div>
<!-- Repeat for each row -->
</div>
18 — Pull-Quote
Blockquote with left accent bar — used in article body for citations and expert quotes.
"The Galleri® test represents a fundamental shift in how we approach cancer screening — moving from symptom-based detection to proactive, early identification."
— Dr Sarah Chen, Chief Medical Officer<blockquote class="article-body__quote">
<p>"Quote text here."</p>
<cite>— Name, Title</cite>
</blockquote>
19 — Checklist
Checklist items with icon (check/cross/dash), text, padding, border. Appears on Galleri page.
<div class="checklist">
<div class="checklist__item">
<div class="checklist__icon checklist__icon--success">
<svg>check</svg>
</div>
<span>Item text</span>
</div>
<!-- Repeat for each item -->
</div>
20 — Pagination
Tight, low-weight pagination for content pages. Shown at prototype width.
<nav class="pagination" aria-label="Pagination">
<a class="pagination__item">1</a>
<a class="pagination__item pagination__item--current" aria-current="page">2</a>
<a class="pagination__item">3</a>
<a class="pagination__item pagination__item--disabled">
<svg>chevron</svg>
</a>
</nav>
21 — Search Bar
Input with magnifying glass icon — appears on The Science and FAQs pages. Shows focus state on hover.
<div class="search-bar">
<svg class="search-bar__icon">...</svg>
<input class="search-bar__input" type="search" placeholder="Search...">
</div>
<div class="search-bar search-bar--wide">
<!-- same structure -->
</div>
22 — Download List
Vertical list of downloadable documents (PDFs, guides, etc.) with icon, title, metadata, and CTA button. Appears on The Science page.
<div class="download-list">
<a href="#" class="download-item">
<div class="download-item__icon">
<svg>PDF icon</svg>
</div>
<div class="download-item__info">
<div class="download-item__title">Document title</div>
<div class="download-item__meta">PDF · 2.4 MB</div>
</div>
<span class="download-item__cta">Download</span>
</a>
<!-- Repeat for each item -->
</div>
23 — Modal
Reusable modal dialog with backdrop blur, panel, and close button. Activate with .is-active class.
We'll notify you when this service becomes available. No spam — just updates when it matters.
<div class="modal" id="my-modal" role="dialog" aria-modal="true">
<div class="modal__backdrop"></div>
<div class="modal__panel">
<button class="modal__close" aria-label="Close">
<svg>×</svg>
</button>
<div class="modal__content">
<h2 class="modal__title" id="modal-title">Title</h2>
<p class="modal__desc">Description</p>
<form class="modal__form">...</form>
</div>
</div>
</div>
<!-- Activate: -->
<script>document.getElementById('my-modal').classList.add('is-active')</script>
24 — CTA Block
Full-width gradient blocks for key messaging sections. Shown at prototype width (constrained container).
White text on brand gradient. Use for key CTAs and messaging sections.
Preologi is the first provider in the UK to offer the Galleri® multi-cancer early detection blood test. We work with clinics and healthcare providers to bring this revolutionary screening to patients who need it.
<div class="cta-block">
<div class="cta-block__inner">
<h2 class="cta-block__title">Title</h2>
<div class="cta-block__body"><p>...</p></div>
<a class="cta-block__cta">CTA</a>
</div>
</div>
Dark text on light gradient. Use for safety information, lab details, and disclaimers.
The Galleri® test is a screening tool, not a diagnostic test. A positive result requires follow-up with your healthcare provider for confirmatory testing.
<div class="cta-block cta-block--light">
Contained card variant with a darker gradient and rounded corners — ideal for partner-facing CTAs.
We work with clinics and healthcare providers to bring this revolutionary screening to patients who need it.
<div class="cta-block cta-block--compact">
25 — Contact Strip
Inline contact information with icon + text, used in hero sections and footers.
<div class="preologi-contact-strip">
<a href="tel:03305550444" class="preologi-contact-strip__item">
<svg>...</svg> 0330 555 0444
</a>
<div class="preologi-contact-strip__divider"></div>
<a href="mailto:enquiries@preologi.com" class="preologi-contact-strip__item">
<svg>...</svg> enquiries@preologi.com
</a>
</div>
26 — Partner Logo Grid
Responsive grid for partner clinic logos with hover states.
<div class="partner-grid">
<div class="partner-card">
<img src="logo.svg" alt="Partner name">
</div>
<!-- Repeat for each partner -->
</div>