optimists — Component Library
Components rendered from Figma design context with mock data. Use Figma designs for reference against the API.
Stat-driven 220px accent card. Props: number, unit, description, category?, bgColor?, stripColor?, categoryBgColor?, categoryTextColor?, numberColor?, unitColor?, dividerColor?, descriptionColor?.
COMMUNITY
3,456
volunteers
Joined the coastal clean-up this weekend — a record turnout across 14 counties.
SCIENCE
94%
success rate
Achieved in the latest targeted cancer immunotherapy trial — the highest ever recorded.
CLIMATE
1.2M
trees planted
In the last 12 months by community forestry groups across Scotland, England and Wales.
Compact ranked story list. Props: items[{headline, time, category?, categoryColor?, categoryTextColor?}], bgColor?, borderColor?, badgeBgColor?, badgeTextColor?, headlineColor?, timeColor?, dividerColor?, onItemClick?.
1
Global Coffee Prices Hit Five-Year Low as Supply Chains Recover
BUSINESS
4h ago
2
WHO Issues New Treatment Protocol for Faster Stroke Recovery
HEALTH
5h ago
3
Open-Source AI Model Outperforms Commercial Systems on Key Benchmarks
TECH
6h ago
1
Scotland's Rewilding Programme Surpasses Woodland Coverage Target Three Years Early
CLIMATE
2h ago
2
Youth Voter Turnout Breaks Records in Local Elections Across Seven Cities
POLITICS
3h ago
3
Breakthrough Battery Tech Extends EV Range by 40% at No Extra Cost
SCIENCE
4h ago
1
New Mental Health App Reaches One Million Users in Under Six Months
HEALTH
1h ago
2
Paralympic Athletes Set Seven World Records at Paris 2024 Games
SPORT
3h ago
3
Community Broadband Initiative Connects 200 Rural Villages Across Wales
COMMUNITY
5h ago
Compact 220px brief card — no image. Props: headline, description, time, readMore?, category?, bgColor?, borderColor?, accentColor?, categoryTextColor?, headlineColor?, descriptionColor?, timeColor?, readMoreColor?, dividerColor?.
WORLD
1h ago
UN Climate Summit Reaches Historic Fossil Fuel Phase-Out Agreement
140 countries sign a landmark accord to phase out coal by 2040 — the most ambitious commitment yet.
→ Read more
Half-page 360px story card with image area. Props: headline, description, author, date, readTime, category?, imageSrc?, bgColor?, borderColor?, accentColor?, categoryTextColor?, headlineColor?, descriptionColor?, metaColor?, readTimeColor?, authorColor?, dividerColor?.
📸 Photo
SCIENCE
·
Mon 25 May
4 min read
New Research Confirms Why Your Coffee Actually Makes You More Productive
MIT researchers have pinpointed the exact neural pathway caffeine activates to boost sustained concentration.
M
Marcus Chen
📸 Photo
SCIENCE
·
Mon 25 May
4 min read
New Research Confirms Why Your Coffee Actually Makes You More Productive
MIT researchers have pinpointed the exact neural pathway caffeine activates to boost sustained concentration.
M
Marcus Chen
📸 Photo
SPORT
·
Tue 3 Jun
5 min read
Young Athletes Are Rewriting the Record Books — And Science Explains Why
Advances in sports nutrition and data-driven training have pushed human performance to levels once thought impossible.
P
Priya Nair
📸 Photo
SCIENCE
·
Mon 25 May
4 min read
New Research Confirms Why Your Coffee Actually Makes You More Productive
MIT researchers have pinpointed the exact neural pathway caffeine activates to boost sustained concentration.
M
Marcus Chen
📸 Photo
SPORT
·
Tue 3 Jun
5 min read
Young Athletes Are Rewriting the Record Books — And Science Explains Why
Advances in sports nutrition and data-driven training have pushed human performance to levels once thought impossible.
P
Priya Nair
📸 Photo
CLIMATE
·
Wed 4 Jun
6 min read
The Rewilding of Scotland's Highlands Is Transforming the Entire Ecosystem
Wolves, beavers, and native woodland are returning — and the data shows a cascade of positive effects across the food chain.
A
Aoife Brennan
Top-5 ranked list (360px). Props: title, subtitle, entries[{flag, item, value}], source, headerBgColor?, titleColor?, subtitleColor?, cardBgColor?, borderColor?, altRowBgColor?, footerBgColor?, rankBadgeColor?, rankTextColor?, itemColor?, valuePillBgColor?, valueColor?, sourceColor?.
TOP 5 HAPPIEST COUNTRIES
World Happiness Report 2024 ranking
1
🇫🇮
Finland
7.74
2
🇩🇰
Denmark
7.58
3
🇮🇸
Iceland
7.53
4
🇸🇪
Sweden
7.34
5
🇮🇱
Israel
7.34
Source: UN World Happiness Report, 2024
Vertical 4-entry timeline. Props: title, entries[{year, event, detail, badgeColor?}], source, headerBgColor?, titleColor?, cardBgColor?, borderColor?, altRowBgColor?, footerBgColor?, badgeTextColor?, eventColor?, detailColor?, sourceColor?.
THE INTERNET — A TIMELINE
1969
ARPANET goes online
The first message is sent between UCLA and Stanford University
1991
World Wide Web is born
Tim Berners-Lee creates HTML and launches the first website
2004
Social media era begins
Facebook launches, permanently changing how billions of people connect
2023
AI reshapes the web
Large language models transform search, content and creative work forever
Source: Computer History Museum, 2024
A vs B comparison card (746px). Props: labelA, labelB, statA, statALabel, descA, statB, statBLabel, descB, emojiA?, emojiB?, bgColor?, headerBgColor?, labelAColor?, labelBColor?, vsBadgeBgColor?, vsBadgeTextColor?, colABgColor?, colBBgColor?, iconABgColor?, iconBBgColor?, statColor?, statLabelColor?, descColor?, dividerColor?, vDividerColor?.
ISCHEMIC STROKE
VS
HEMORRHAGIC STROKE
87%
of all strokes are ischemic
Occurs when arteries are blocked by blood clots or gradual build-up of plaque. Most common — and most treatable.
13%
of strokes, yet 30%+ of deaths
Occurs when a blood vessel breaks. Less common than ischemic but far more likely to be fatal.
2×2 stat grid (400px). Props: title, cells[4] ({value, label, emoji?, cellColor?}), headerBgColor?, titleColor?, valueColor?, labelColor?, badgeBgColor?, cardBgColor?, borderColor?, dividerColor?.
BIG DATA — KEY NUMBERS
90%
Fortune 500 have big data initiatives underway
1.5M
data-savvy jobs needed in the next 5 years
$97K
average annual salary for data analysts in the US
3/4
executives are increasing their use of analytics
Full-width hero stat block. Props: sectionTag, value, unit, context, emoji, bgColor?, stripColor?, sectionTagColor?, valueColor?, unitColor?, contextColor?, ringColor?, badgeBgColor?.
DATA & SOCIETY · SPECIAL REPORT
1.5 MILLION
data-savvy managers and analysts
will be needed in the next 5 years to drive decisions globally
Full-width story card. Props: headline, deck, author, role, date, readTime, imageSrc?, category?, categoryColor?, categoryTextColor?, cardBgColor?, borderColor?, headlineColor?, deckColor?, authorColor?, roleColor?, dateColor?, readTimeColor?, avatarColor?, avatarTextColor?.
Three major ocean garbage patches have reduced in size simultaneously for the first time in recorded history.
Editorial pull quote. Props: quote, attribution, bgColor?, ruleColor?, quoteColor?, decorativeQuoteColor?, accentColor?, attributionColor?.
The sexy job in the next 10 years will be statisticians. The ability to take data, to understand it, to process it, to extract value from it, to visualise it and communicate it is going to be enormously important.
— Hal Varian, Chief Economist at Google
Each prop corresponds to a Figma $handle text layer.
| React prop | Figma handle | Type | Description |
|---|---|---|---|
| headline | $headline | string | Primary story headline |
| deck | $deck | string | Short standfirst |
| author | $author | string | Author display name |
| role | $role | string | Author role / title |
| date | $date | string | Publication date |
| readTime | $read-time | string | Read time label |
| imageSrc? | — | string | Hero image URL |
| category? | — | string | Category chip label |
| categoryColor? | — | string | Category chip background override |
| categoryTextColor? | — | string | Category chip text override |
| cardBgColor? | — | string | Card background override |
| borderColor? | — | string | Card border override |
| headlineColor? | — | string | Headline text override |
| deckColor? | — | string | Deck text override |
| authorColor? | — | string | Author text override |
| roleColor? | — | string | Role text override |
| dateColor? | — | string | Date text override |
| readTimeColor? | — | string | Read-time text override |
| avatarColor? | — | string | Avatar badge background override |
| avatarTextColor? | — | string | Avatar badge text override |
| React prop | Figma handle | Type | Description |
|---|---|---|---|
| quote | $quote | string | Pull quote text (100–200 chars) |
| attribution | $attribution | string | Attribution with em-dash |
| bgColor? | — | string | Component background override |
| ruleColor? | — | string | Divider/rule override |
| quoteColor? | — | string | Quote text override |
| decorativeQuoteColor? | — | string | Large quotation mark override |
| accentColor? | — | string | Accent pill override |
| attributionColor? | — | string | Attribution text override |
| React prop | Figma handle | Type | Description |
|---|---|---|---|
| sectionTag | $section-tag | string | Overline category label |
| value | $value | string | Giant hero number/stat |
| unit | $unit | string | Unit label below value |
| context | $context | string | Supporting sentence |
| emoji? | — | string | Decorative badge emoji |
| bgColor? | — | string | Card background override |
| stripColor? | — | string | Top strip override |
| sectionTagColor? | — | string | Section tag text override |
| valueColor? | — | string | Value text override |
| unitColor? | — | string | Unit text override |
| contextColor? | — | string | Context text override |
| ringColor? | — | string | Decorative ring override |
| badgeBgColor? | — | string | Emoji badge background override |
| React prop | Figma handle | Type | Description |
|---|---|---|---|
| label | $label | string | Uppercase category label |
| headline | $headline | string | Header headline |
| body | $body | string | Body copy |
| source | $source | string | Source line |
| emoji? | — | string | Emoji badge |
| cardBgColor? | — | string | Shell background override |
| headerBgColor? | — | string | Header background override |
| bodyBgColor? | — | string | Body background override |
| labelColor? | — | string | Label text override |
| headlineColor? | — | string | Headline text override |
| bodyColor? | — | string | Body text override |
| sourceColor? | — | string | Source text override |
| badgeBgColor? | — | string | Emoji badge background override |
| borderColor? | — | string | Card border override |