tech-table
Applications table with blue header row. Used on all 13 technology pages. Two columns: Application name | Description.
Prototype
Content types & layout variants
Reference guide for all content-driven page layouts used across the site. Each variant is chosen based on the content structure from the Content Plan, with live examples below.
Layout Variants
9 content-driven layouts
Different content types use different layout patterns. The table below maps each layout to its use case and live example pages.
| Layout | Used For |
|---|---|
| Page-Intro + Feature List page-intro--split (spot) → section--soft → feature-list (ul) | Short modality pages with bullet-point content |
| Page-Intro + Content Sections (long-form) page-intro--split (spot) → content-section × N (h2 + p + feature-list + h3 subsections) | Content-heavy pages with multiple structured sections and sub-headings |
| Page-Intro + Card Grid (with spot icons) page-intro → section → grid-3 → card (card__spot + h3 + p) × N | Service pages and overview hubs with discrete focus areas presented as icon cards |
| Page-Intro + Tech Table + Key Features page-intro--split (spot) → section--soft → p (desc) + tech-table + key-features | All 13 technology detail pages — applications table + features list |
| Master-Detail (Hub Pattern) page-intro--split (spot) → section--soft → tech-hub (list + panel, JS-driven, keyboard nav) | Technology overview and Technology Hub — interactive node selector with detail panel |
| Page-Intro + Product Groups page-intro--split (spot) → section--soft → product-group × N (h3 + product-items grid) | Products page with categorized item grids |
| Page-Intro + Timeline page-intro--split (spot) → section--soft → timeline (ul, green dot markers) | Company timeline with vertical milestone markers |
| Page-Intro + Figure Modules (split text + spot) page-intro--split (spot) → figure-module × N (media | body, alternating reverse) | Company overview and text-heavy pages with alternating text + spot illustration splits |
| Overview Hub (Mega-Menu Landing) page-intro → section × N (section__head + grid-3 cards with card__spot) | Science and Company overview pages — the hub/landing for each mega-menu section |
CSS Components
Reusable content components
All layout variants are built from the following reusable CSS components, defined in global.css.
key-features
Green-tinted list with dot markers. Used on technology pages for key platform features. Each item is a single-line highlight.
tech-hub
Master-detail layout: grouped node list (left) + dynamic detail panel (right). JS-driven with keyboard navigation (Arrow keys, Home, End).
content-section
Sectioned long-form content block with h2 heading. Auto-separates with top border.
product-group
Product category with green-underlined heading and item grid. Used on Products page.
timeline
Vertical timeline with green dot markers on a left line. Each entry has a year (strong) and description (span).
Icon & Image Modules
Content-plan spot illustration components
Reusable icon and image modules that insert content-plan SVG spot illustrations into page layouts.
card__spot
56px tile with content-plan SVG icon inside cards. Blue tint background, green tint on hover with scale animation.
page-intro--split
Page intro with 160px spot illustration on the right. Grid layout (text | spot). Used on all content pages.
figure-module
Text + spot illustration split (50/50). Alternating standard and reverse variants.
spot-banner
Centered illustration break between sections. Gradient background (blue → green tint).
mega__col-icon
24px icon in mega-menu column headers.
hero__ticker-icon
56px anchor icons in hero capability card. Desaturated by default, full color on hover.
Design System
Open Design System (tokens, colors, icons) →