Standard charts (Chart.js)

data-igem-chart on <canvas>

A

Line chart (single series)

line

Growth curves, OD600, metrics over time.

View HTML

<div class="igem-chart-wrap">
  <canvas data-igem-chart="line"
    data-chart-config='{"labels":["W1","W2"],"datasets":[{"label":"OD600","data":[0.2,0.8]}]}'>
  </canvas>
</div>

B

Multi-series line

line

Control vs experimental groups, culture conditions.

View HTML

data-chart-config='{
  "labels": ["0h","12h","24h"],
  "datasets": [
    {"label":"Control","data":[0.1,0.3,0.5],"fill":false},
    {"label":"Test","data":[0.1,0.45,0.95],"fill":false}
  ]
}'

C

Bar chart

bar

Endpoint yield, strain/plasmid comparisons.

View HTML

data-igem-chart="bar"
data-chart-config='{"labels":["A","B"],"datasets":[{"label":"Yield","data":[12,18]}]}'

D

Grouped bar chart

bar / multi

Two factors (e.g. pH × temperature).

View HTML

data-chart-config='{
  "labels":["pH 5","pH 7"],
  "datasets":[{"label":"30°C","data":[8,15]},{"label":"37°C","data":[12,22]}]
}'

E

Pie chart

pie

Team roles, budget split, simple proportions.

View HTML

data-igem-chart="pie"
data-chart-config='{"labels":["Dry","Wet"],"datasets":[{"data":[28,35]}]}'

F

Doughnut chart

doughnut

Lighter visual weight for homepage stats.

View HTML

data-igem-chart="doughnut"
data-chart-config='{"labels":["A","B","C","D"],"datasets":[{"data":[25,25,25,25]}]}'

G

Area line chart

line / fill

Cumulative yield or totals over time (fill:true).

View HTML

data-igem-chart="line"
data-chart-config='{"datasets":[{"label":"Total","data":[3,18,48],"fill":true}]}'

H

Stacked bar chart

bar / stacked

Hours by track (Wet / Dry / HP) per month.

View HTML

data-chart-config='{
  "datasets":[{"label":"Wet","data":[...],"stack":"s"}],
  "options":{"scales":{"x":{"stacked":true},"y":{"stacked":true}}}
}'

02

Advanced charts (ECharts)

data-igem-echart · preset or full data-echart-option

—

Chart.js vs ECharts — when to use which

Chart.js — line, bar, pie, doughnut, area, stacked bar ECharts — radar, gauge, heatmap, scatter, funnel, rose

Use Chart.js for standard experiment curves and simple comparisons. Use ECharts for multi-axis summaries, single KPI gauges, correlation heatmaps, dose–response scatter, and HP funnel charts. Load echarts.min.js from static/vendor/ (same as Chart.js).

A

Radar chart

preset: radar

Compare project pillars (Science, Engineering, HP, Safety, Communication) on one chart.

View HTML

<div class="igem-echart-wrap">
  <div data-igem-echart data-igem-echart-preset="radar" data-chart-height="320"></div>
</div>

B

Gauge (single KPI)

preset: gauge

Hero stats, accuracy %, completion rate — one number with visual weight.

View HTML

<div data-igem-echart data-igem-echart-preset="gauge" data-chart-height="280"></div>

C

Heatmap

preset: heatmap

Metal specificity across replicate runs — or any matrix (rows × columns).

View HTML

<div data-igem-echart data-igem-echart-preset="heatmap"></div>
<!-- Or pass full option: data-echart-option='{...}' -->

D

Scatter (dose–response)

preset: scatter

Concentration vs signal — ideal for calibration curves and binding assays.

View HTML

<div data-igem-echart data-igem-echart-preset="scatter"></div>

E

Funnel (HP / outreach)

preset: funnel

Survey → responses → interviews → workshops — show engagement drop-off.

View HTML

<div data-igem-echart data-igem-echart-preset="funnel"></div>

F

Nightingale / rose pie

preset: rose

Time or effort split across Wet lab, Dry lab, HP, Wiki — more visual than a flat pie.

View HTML

<div data-igem-echart data-igem-echart-preset="rose"></div>

03

Scroll reveal animations

GSAP + IntersectionObserver · data-animate

A

fade-up (rise in)

default

The most common entrance effect for paragraphs, cards, and images.

This content fades up when scrolled into view

View HTML

<div data-animate="fade-up">Content</div>

B

Child stagger (sequential reveal)

list

Best for 3–6 parallel items (feature lists, contributor cards).

Item 1

Item 2

Item 3

View HTML

<div data-animate="fade-up" data-animate-stagger="0.12">
  <div data-animate-child>Item 1</div>
  <div data-animate-child>Item 2</div>
</div>

C

Scale emphasis

scale

For key conclusions or a single hero figure.

Our project increased E. coli degradation capacity by 1.8×

View HTML

<div data-animate="scale">Key conclusion</div>

D

Alternating left/right slide-in

narrative

For narrative sections with alternating text and images.

Slides in from the right

Slides in from the left

View HTML

<div data-animate="fade-left">...</div>
<div data-animate="fade-right">...</div>

E

Number counter animation

counter

Counts from 0 to the target when scrolled into view; ideal for key metrics.

Participants

%

Conversion efficiency

View HTML

<span class="igem-counter"
  data-igem-counter="1245"
  data-counter-duration="1.6"></span>

<!-- With decimals / suffix -->
<span class="igem-counter"
  data-igem-counter="87.5"
  data-counter-decimals="1"
  data-counter-suffix="%"></span>

G

Blur-to-focus

blur

Blurs in to sharp focus; suits hero titles and key concepts.

Text sharpens from blur as you scroll here

View HTML

<div data-animate="blur" data-animate-duration="1.2">...</div>

H

Rotate entrance

rotate

Slight −6° rotation for extra motion; use sparingly so it does not distract.

Subtle rotate-in

View HTML

<div data-animate="rotate">...</div>

F

Progress bar animation

progress

Percentage metrics such as experiment completion or modeling coverage.

Experiment completion75%

Modeling coverage42%

View HTML

<div class="igem-progress__label">
  <span>Label</span><strong>75%</strong>
</div>
<div class="igem-progress" data-igem-progress="75">
  <div class="igem-progress__bar"></div>
</div>

04

Tab panels

data-igem-tabs

A

Pill style

default

Rounded pill tabs for 3–5 equal-weight labels.

Design phase: vector design and part selection.

Build phase: transformation and screening.

Test phase: enzyme assays and replicate experiments.

View HTML

<div data-igem-tabs>
  <div class="igem-tabs__list" role="tablist">
    <button role="tab" data-tab="d1" aria-selected="true">Design</button>
    <button role="tab" data-tab="b1">Build</button>
  </div>
  <div data-tab-panel="d1" class="igem-tabs__panel is-active">...</div>
  <div data-tab-panel="b1" class="igem-tabs__panel">...</div>
</div>

B

Underline style

academic

A restrained style for academic sections such as Description, Methods, and Results.

Methods summary.

Results summary.

Discussion summary.

View HTML

<div data-igem-tabs class="igem-tabs--underline">...</div>

C

Vertical tabs

long content

Left navigation with a right panel; suited to longer per-tab content (e.g. SDG breakdowns).

How the project aligns with good health and well-being.

How the project aligns with clean water and sanitation.

How the project aligns with climate action.

View HTML

<div data-igem-tabs class="igem-tabs--vertical">
  <div class="igem-tabs__list">...</div>
  <div><!-- wrap panels in a div -->
    <div data-tab-panel="...">...</div>
  </div>
</div>

D

Card tabs

browser-style

Browser-like tabs: the active tab connects to a bordered panel.

Hardware overview (PCR, sequencers, detection equipment).

Software overview (data analysis, modeling, web tools).

Wetware overview (strains, plasmids, media).

View HTML

<div data-igem-tabs class="igem-tabs--card">
  <div class="igem-tabs__list" role="tablist">...</div>
  <div data-tab-panel="c1" class="igem-tabs__panel is-active">...</div>
</div>

05

Accordion

data-igem-accordion · GSAP height animation

A

Accordion (single open)

default

For FAQs and concept explainers; only one panel open at a time.

Engineering biological systems by design.

A reusable library of wiki interaction components.

View HTML

<div data-igem-accordion data-accordion-single="true">
  <div class="igem-accordion__item" data-accordion-open="true">
    <button class="igem-accordion__trigger" data-accordion-trigger>Title</button>
    <div data-accordion-panel>
      <div class="igem-accordion__content">Content</div>
    </div>
  </div>
</div>

B

Multiple panels open

appendix

For appendices, references, and other parallel content.

Lab protocols and biosafety practices.

Human Practices considerations.

View HTML

<div data-igem-accordion data-accordion-single="false">...</div>

C

Card shadow style

elevated

Elevated cards with shadow; better for landing sections.

Add igem-accordion--card to enable.

Softer shadow treatment.

View HTML

<div data-igem-accordion class="igem-accordion--card">...</div>

D

FAQ Q&A style

faq

Shows Q before the question and A before the answer; ideal for FAQs at the end of Description.

Why use E. coli instead of yeast as the chassis?

E. coli grows quickly with mature tooling, which suits multiple experimental iterations within one iGEM summer.

How do you ensure data reproducibility?

All wet lab work is run in at least three independent replicates; raw data and outlier handling are published on the Engineering page.

Has biosafety been considered?

Strains are lab-only; we include an auxotrophic kill-switch—see the Safety page.

View HTML

<div class="igem-accordion igem-accordion--faq" data-igem-accordion>
  <div class="igem-accordion__item">
    <button class="igem-accordion__trigger">Question text</button>
    <div class="igem-accordion__content"><p>Answer text</p></div>
  </div>
</div>

D

Numbered step accordion

SOP / lab steps

Auto-prefixes titles with 01/02/03; suited to lab steps and SOPs.

CaCl₂ method for E. coli competent cells.

42°C heat shock for 90 s.

Pick single colonies for colony PCR.

View HTML

<div data-igem-accordion class="igem-accordion--numbered">
  <div class="igem-accordion__item">
    <button class="igem-accordion__trigger" data-accordion-trigger>
      Competent cell preparation
    </button>
    ...
  </div>
</div>

06

Image lightbox

data-igem-lightbox / data-igem-gallery

07

Experiment timeline

data-igem-timeline + data-timeline-item

A

Alternating timeline

desktop two-column

Alternates left and right on desktop; stacks vertically on mobile.

View HTML

<div data-igem-timeline>
  <div data-timeline-item
       data-date="2025-06"
       data-title="Project kickoff"
       data-content="Description text"></div>
</div>

B

Left-aligned minimal

compact

Uniform left alignment; more compact for long lists.

View HTML

<div data-igem-timeline class="igem-timeline--simple">...</div>

C

Horizontal timeline

narrative

Horizontal scroll; good for quick “project milestones” on the home page.

View HTML

<div data-igem-timeline class="igem-timeline--horizontal">
  <div data-timeline-item data-date="Jun" data-title="Kickoff"></div>
  ...
</div>

08

Stat counters

Key metric cards · pairs with counter animation

A

Equal-width grid

default

Display 3–5 headline numbers in a row; common on the home page.

12

Plasmids built

28

Team members

15people

Interviewees

4

Partner institutions

View HTML

<div class="igem-stats">
  <div class="igem-stats__item">
    <div class="igem-stats__value">12</div>
    <div class="igem-stats__label">Plasmids built</div>
  </div>
</div>

B

With scroll counter

animated

Counts up from 0 when scrolled into view.

Survey responses

%

Satisfaction

Interview rounds

View HTML

<div class="igem-stats igem-stats--accent">
  <div class="igem-stats__item">
    <div class="igem-stats__value">
      <span data-igem-counter="2350"></span>
    </div>
    <div class="igem-stats__label">Survey responses</div>
  </div>
</div>

C

With icon

With trend badge

trend

Shows change vs. a prior period; for year-over-year or cycle-over-cycle metrics.

2,350

Interview samples

▲ 18%

12%

False positive rate

▼ 7%

98.5%

Expression stability

— flat

View HTML

<div class="igem-stats__item">
  <div class="igem-stats__value">2,350</div>
  <div class="igem-stats__label">Interview samples</div>
  <span class="igem-stats__trend igem-stats__trend--up">▲ 18%</span>
</div>

09

Callouts & quotes

Four semantic colors + blockquote

A

Four semantic callouts

info / success / warning / danger

For lab notes, safety reminders, and highlighted conclusions.

i

Info

This experiment must be performed in a BSL-1 laboratory.

✓

Success

Plasmid transformation efficiency reached 10⁶ CFU/μg DNA.

!

Warning

Ice the culture immediately after IPTG induction to limit protein degradation.

×

Danger

EtBr is carcinogenic—wear gloves and eye protection when handling.

View HTML

<div class="igem-callout igem-callout--info">
  <div class="igem-callout__icon">i</div>
  <div class="igem-callout__body">
    <p class="igem-callout__title">Info</p>
    <p class="igem-callout__text">Message body</p>
  </div>
</div>

<!-- Other variants: --success / --warning / --danger -->

B

Blockquote

interviews / HP

Common on HP pages for interview quotes.

What excites me most about synthetic biology is treating life as an engineerable system. Ms. Amina Okoro, county health officer

View HTML

<blockquote class="igem-quote">
  Interview quote
  <span class="igem-quote__author">Name, role</span>
</blockquote>

C

Highlight box

key insight

Pulls the core takeaway out of a long paragraph.

Key finding: At 0.5 mM IPTG, target protein expression reached 4.8× the control within 12 h—the turning point of Engineering Iteration #3.

View HTML

<div class="igem-callout igem-callout--highlight">
  <strong>Key finding:</strong> Message body
</div>

D

Tip callout

tip

Brand-colored callout for practical advice and recommended practices.

✎

Tip

Explanations longer than ~60 words are easier to scan as callouts—judges may skip dense blocks.

View HTML

<div class="igem-callout igem-callout--tip">...</div>

10

Process steps

Numbered workflow display

A

Grid steps

default

Responsive grid with auto-incrementing step numbers.

Design

Vector and part design

Build

Transformation and screening

Test

Function and reproducibility

Learn

Iterate from data

View HTML

<div class="igem-steps">
  <div class="igem-steps__item">
    <p class="igem-steps__title">Design</p>
    <p class="igem-steps__desc">Vector and part design</p>
  </div>
</div>

B

Horizontal with connectors

DBTL cycle

Connectors between steps emphasize flow.

Design

Build

Test

Learn

View HTML

<div class="igem-steps igem-steps--horizontal">
  <div class="igem-steps__item">
    <p class="igem-steps__title">Design</p>
    <p class="igem-steps__desc">Design</p>
  </div>
</div>

11

Team member cards

Members / Attributions layout

A

Avatar grid cards

default

Avatar, name, and role; subtle lift on hover.

Alice Chen

Team Leader

Brian Liu

Wet Lab

Cathy Wang

Dry Lab

David Zhao

HP

View HTML

<div class="igem-members">
  <div class="igem-member">
    <img class="igem-member__img" src="..." alt="" />
    <div class="igem-member__body">
      <p class="igem-member__name">Alice Chen</p>
      <p class="igem-member__role">Team Leader</p>
    </div>
  </div>
</div>

B

Flip card (bio on hover)

interactive

Photo on the front; hover flips to a short bio on the back.

Alice Chen

Team Leader

Sophomore at SZ Foreign Language School. Interests: synthetic biology, electric guitar.

Brian Liu

Wet Lab

Leads vector construction and cloning.

Cathy Wang

Dry Lab

Leads modeling and data analysis.

View HTML

<div class="igem-members">
  <div class="igem-member igem-member--flip">
    <div class="igem-member__inner">
      <div class="igem-member__face igem-member__face--front">
        <img src="..." alt="" />
        <div class="igem-member__caption">Name</div>
      </div>
      <div class="igem-member__face igem-member__face--back">
        <p class="igem-member__name">Name</p>
        <p class="igem-member__role">Role</p>
        <p>Bio</p>
      </div>
    </div>
  </div>
</div>

C

Horizontal detail card (bio & tags)

Attributions / partners

Photo left, details right; for collaborators, sponsors, or key external contributors (not student coaches).

Dr. James Okonkwo

Environmental chemist · Regional Water Quality Laboratory

External lab partner; co-designed field protocols and provided reference ICP-MS measurements for blinded validation.

Collaborator Validation

Ms. Amina Okoro

County environmental health officer · Field liaison

Community stakeholder who hosted site visits, connected the team with clinic staff, and reviewed outreach materials for local context.

Human Practices Stakeholder

View HTML

<div class="igem-members igem-members--wide">
  <div class="igem-member igem-member--wide">
    <img class="igem-member__img" src="..." />
    <div class="igem-member__body">
      <p class="igem-member__name">Name</p>
      <p class="igem-member__role">Role</p>
      <p class="igem-member__bio">Bio</p>
      <div class="igem-member__tags">
        <span class="igem-member__tag">Tag</span>
      </div>
    </div>
  </div>
</div>

12

Hero banner

Home / subpage banner templates

A

Basic hero (eyebrow + title + lead + CTA)

general

Standard opening block for content pages (Description, HP, Engineering, etc.).

PROJECT · DESCRIPTION

Engineered bacteria for in situ heavy-metal monitoring in water

We built a visual E. coli reporting system with an IoT data pipeline that screens and quantifies field samples within four hours.

Read project background Watch 1-minute video

View HTML

<div class="igem-hero" data-animate="fade-up">
  <p class="igem-hero__eyebrow">PROJECT · DESCRIPTION</p>
  <h1 class="igem-hero__title">Headline with <em>keyword</em></h1>
  <p class="igem-hero__lead">One-line lead...</p>
  <div class="igem-hero__actions">
    <a class="igem-btn igem-btn--primary">Primary CTA</a>
    <a class="igem-btn igem-btn--ghost">Secondary CTA</a>
  </div>
</div>

B

Hero + headline stats

home page

Four key numbers under the hero give judges a quick project hook.

SUSTAINABLE BIOSENSOR

30 minutes instead of 3 days for water testing

An engineered E. coli reporter brings lab-grade detection to the field and community.

%

Detection accuracy

min

Time to result

¥

Cost per test

View HTML

<div class="igem-hero">
  <h1 class="igem-hero__title">...</h1>
  <p class="igem-hero__lead">...</p>
  <div class="igem-stats igem-stats--accent">...</div>
</div>

13

Tables

Semantic HTML · .igem-table modifiers

A

Striped data table

default

Experiment results, primer lists, strain inventory.

Transformation efficiency (CFU/μg DNA)
Construct	Replicate 1	Replicate 2	Replicate 3	Mean
pSB1C3-GFP	1.2 × 10⁶	1.1 × 10⁶	1.3 × 10⁶	1.2 × 10⁶
pSB1C3-sensor	8.4 × 10⁵	9.1 × 10⁵	8.8 × 10⁵	8.8 × 10⁵
Empty vector	2.1 × 10⁵	1.9 × 10⁵	2.0 × 10⁵	2.0 × 10⁵

View HTML

<div class="igem-table-wrap">
  <table class="igem-table igem-table--striped">
    <caption>...</caption>
    <thead><tr><th>...</th></tr></thead>
    <tbody><tr><td>...</td></tr></tbody>
  </table>
</div>

B

Comparison table

compare

Our system vs existing methods — highlight the winning column with .is-highlight.

Field detection methods
Criteria	Test strips	Lab ICP-MS	AquaSense
Time to result	~15 min	3–5 days	30 min
Detection limit (Pb²⁺)	~10 μM	~0.01 μM	0.12 μM
Cost per test	~$2	~$80	~$1
Field-ready	Yes	No	Yes

View HTML

<table class="igem-table igem-table--compare igem-table--striped">
  <th class="is-highlight">Our solution</th>
  <td class="is-highlight">...</td>
</table>

C

Compact bordered table

compact

Dense parts list, oligo sequences, or attribution credits.

Part	Type	Registry	Status
PzntA promoter	Regulatory	BBa_Kxxxxxx	Verified
AmilCP	Coding	BBa_Kxxxxxx	Submitted
T7 cascade	Composite	BBa_Kxxxxxx	In progress

View HTML

<table class="igem-table igem-table--bordered igem-table--compact">...</table>
<span class="igem-table__badge">Verified</span>

14

Typography / font picker

Preview heading + body pairs before locking team branding

A

Recommended pairings (Google Fonts)

8 stacks

For production wiki, self-host font files under static/fonts/ (iGEM pages may block external CDNs). Apply on .igem-theme: style="--igem-font: 'Inter', sans-serif;" and set font-family: var(--igem-font); in your team CSS.

Clean / modern

Inter

Engineering biology for everyone

AquaSense · 2026

We built a field-ready biosensor that reports heavy-metal levels in under 30 minutes — accurate, affordable, and safe.

Best for: Description, Engineering, general body text.

Friendly / startup

DM Sans

Engineering biology for everyone

AquaSense · 2026

We built a field-ready biosensor that reports heavy-metal levels in under 30 minutes.

Best for: HP, Education, youth-facing pages.

Tech / geometric

Space Grotesk

Engineering biology for everyone

AquaSense · 2026

Synthetic biology meets IoT: real-time water quality data from engineered microbes.

Best for: Hardware, Software, dry-lab dashboards.

Editorial / serif H

Playfair Display

Engineering biology for everyone

AquaSense · 2026

Pair a serif display face with a neutral sans body — common on award-winning team wikis.

Heading only — pair with Inter or Source Sans for body.

Scholarly / readable

Merriweather

Engineering biology for everyone

AquaSense · 2026

Long-form narrative pages stay comfortable to read; good for Safety and integrated Human Practices essays.

Best for: long prose, policy, ethics sections.

Neutral serif

Source Serif 4

Engineering biology for everyone

AquaSense · 2026

Balances academic tone with modern spacing — works for bilingual teams (EN + CJK fallback in team CSS).

Best for: bilingual wikis, formal reports.

System stack (zero load)

system-ui

Engineering biology for everyone

AquaSense · 2026

Fastest load time — no external font requests. Use when GitLab wiki blocks Google Fonts CDN.

font-family: system-ui, sans-serif;

Data / code

JetBrains Mono

Part BBa_K123456

ATGCGTACGGTAGCTAGCT

Use monospace for sequences, registry IDs, and tabular numerics — not for full paragraphs.

Tables, Parts, Protocol steps with code blocks.

View HTML + CSS

<!-- Load fonts (preview only — self-host for production) -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

<div class="igem-theme" style="--igem-font: 'Inter', system-ui, sans-serif;">
  <h1 style="font-family: var(--igem-font);">Title</h1>
</div>

15

Page navigation

TOC · reading progress · back to top · reduced motion aware

A

Reading progress bar

fixed top

Thin bar at the top of the viewport — helps judges see how much of a long Description page remains.

On real pages, place once in layout.html or at the top of page_content.

View HTML

<div class="igem-reading-progress" data-igem-reading-progress></div>
<!-- Optional: scroll a custom container -->
<div data-igem-reading-progress data-reading-root=".my-article"></div>

B

Sticky table of contents

auto from h2

Scans h2 inside data-toc-root, assigns IDs, highlights the active section on scroll.

Background

Section one content…

Results

Section two content…

Safety

Section three content…

View HTML

<div class="igem-layout-toc">
  <nav class="igem-toc" data-igem-toc data-toc-root=".wiki-article">
    <p class="igem-toc__title">On this page</p>
  </nav>
  <article class="wiki-article">
    <h2>Background</h2>
    ...
  </article>
</div>

C

Before / after image compare

wet lab

Drag the slider to compare gel bands, microscopy, or assay readouts.

Before After

View HTML

<div class="igem-compare" data-igem-compare>
  <img class="igem-compare__after" src="after.jpg" alt="After" />
  <img class="igem-compare__before" src="before.jpg" alt="Before" />
  <input type="range" class="igem-compare__slider" min="0" max="100" value="50" />
  <div class="igem-compare__handle" aria-hidden="true"></div>
</div>

D

Back to top

fixed button

Appears after scrolling ~400px. Respects prefers-reduced-motion.

View HTML

<button type="button" data-igem-back-top aria-label="Back to top"></button>

E

Chart error fallback

resilience

Invalid JSON in data-chart-config shows a message instead of a blank box.

↑ intentional bad config (3 data points, 1 label) for demo

View HTML

<!-- Valid JSON required; broken config shows .igem-chart-fallback -->
<div class="igem-chart-wrap">
  <canvas data-igem-chart="line" data-chart-config='{"labels":[],"datasets":[]}'></canvas>
</div>

Standard charts (Chart.js)

Line chart (single series)

Multi-series line

Bar chart

Grouped bar chart

Pie chart

Doughnut chart

Area line chart

Stacked bar chart

Advanced charts (ECharts)

Chart.js vs ECharts — when to use which

Radar chart

Gauge (single KPI)

Heatmap

Scatter (dose–response)

Funnel (HP / outreach)

Nightingale / rose pie

Scroll reveal animations

fade-up (rise in)

Child stagger (sequential reveal)

Scale emphasis

Alternating left/right slide-in

Number counter animation

Blur-to-focus

Rotate entrance

Progress bar animation

Tab panels

Pill style

Underline style

Vertical tabs

Card tabs

Accordion

Accordion (single open)

Multiple panels open

Card shadow style

FAQ Q&A style

Numbered step accordion

Image lightbox

Single image zoom

Thumbnail + full-size link

Gallery grid (prev/next)

Video lightbox (thumbnail trigger)

Experiment timeline

Alternating timeline

Left-aligned minimal

Horizontal timeline

Stat counters

Equal-width grid

With scroll counter

With icon

With trend badge

Callouts & quotes

Four semantic callouts

Blockquote

Highlight box

Tip callout

Process steps

Grid steps

Horizontal with connectors

Team member cards

Avatar grid cards

Flip card (bio on hover)

Horizontal detail card (bio & tags)

Hero banner

Basic hero (eyebrow + title + lead + CTA)

Engineered bacteria for in situ heavy-metal monitoring in water

Hero + headline stats

30 minutes instead of 3 days for water testing

Tables

Striped data table

Comparison table

Compact bordered table

Typography / font picker

Recommended pairings (Google Fonts)

Engineering biology for everyone

Engineering biology for everyone

Engineering biology for everyone

Engineering biology for everyone

Engineering biology for everyone

Engineering biology for everyone