Exploratory
Feed · Client component
↓
Download build packClient component spec. Markdown to prompt and build the section from.
Sketch docWDS Design Sys - Moodys Skin v1
Sketch pageEvent Series - HTML Component › Section 3 - Event Series
Event Series
Moody's Event Series section (Section 3) — a branded series header with a live world event map and an event photo strip. Hand-crafted reference from the Moody's skin file.
01
Details
Canvas · 1920 × 775 (full-bleed section)
TierSection (page section, not a card)
ClientMoody's
SkinMoody's Skin v1 (copy of WDS v3.0)
PlacementEvent Series page · Section 3
CompositionSeries header + Event map + Photo strip
TreatmentSingle branded (Moody's dark canvas)
RelatedEvent Series · Ribbon (compact — no map or strip)
SourceWDS Design Sys - Moodys Skin v1 · Event Series - HTML Component
02
Component Anatomy
| # | Layer | Colour | Data | Notes |
|---|---|---|---|---|
| 1 | Section Canvas | Brand Dark | — | Full-bleed dark brand band, 1920 × 640. Bottom layer of the header region. |
| 2 | Brand Graphic | Accent Gradient | — | Decorative motif (diagonal accent lines + arcs), right-anchored. A branded overlay, not content. Placed via the Featured Image symbol. |
| 3 | Series Title | Text On-Dark | Series Name | The section headline. "Global Financial Institutions Series 2026". Financier Display. |
| 4 | Summary | Text On-Dark | Series Summary | Supporting paragraph beneath the title. GT America. |
| 5 | Meta Row | Icon Text On-Dark | Event Count City Count | Two figures with leading icons (seat · pin). "12 Events" · "12 Cities". |
| 6 | City List | Text On-Dark | Cities | Comma-set of the twelve host cities. Muted weight. |
| 7 | CTA Button | Primary | Call to Action | Pill button + arrow ("FIND OUT MORE"). The section's one interactive affordance. Placed via the Secondary Button symbol. |
| 8 | Event Map | Primary · Marker | City Markers ×12 | World map (continents in Primary) with a black dot marker per city. Driven by the Moody's world-map marker engine (official Moodys-World-Map.svg, lat/lon projection). 680 × 382. |
| 9 | Photo Strip | — | Event Photos ×8 | Full-width contiguous row of eight 240 × 135 event photos. Foot of the section. |
Notes
- The section is a fixed composition: a dark header region (title · summary · meta · city list · CTA on the left, the event map on the right) sitting above a full-width photo strip.
- Colour tokens name the Moody's Brand Pack slots — the Brand Pack owns the values; bind the token, never a raw hex.
- Event Phase and Booking Status carry unchanged from the system (fixed semantics) — neither appears in this section.
- The Meta Row and City List still resolve to system Inter rather than the Moody's GT America role (see Typography) — a skin miss to reconcile before handover.
03
Spacing
| Region | Applies to | Size / position |
|---|---|---|
| Canvas | Whole section | 1920 × 775 |
| Header band | Dark brand region (title → map) | 1920 × 640 |
| Text block | Title · summary · meta · cities · CTA | 609 wide, inset ≈272 from the left edge |
| Event map | World map + markers | 680 × 382, right of the text block |
| Photo strip | Event photos | 1920 × 135, flush to the header band |
| Photo cell | Each event photo | 240 × 135, 8-up, no gap |
Notes
- The section is full-bleed: the header band and photo strip both span the full 1920 width.
- The photo strip is a contiguous 8-up row (8 × 240 = 1920) with no gutter between cells, sitting flush beneath the header band.
- The text block is left-inset; the event map fills the right of the header band.
- Spacing is fixed for the section — this is a client hero, not a density-scaled card, so there is no S / M / L step.
04
Typography
Series Title · Display · Financier
Global Financial Institutions Series 2026
Summary · Body · GT America
Twelve cities. One conversation. Moody's brings credit analysts and market leaders together to unpack how banks, insurers and capital flows are adapting.
Meta Row · Utility · Inter (unskinned)
12 Events · 12 Cities
City List · Utility · Inter (unskinned)
Stockholm, Paris, Hong Kong, Amsterdam, Milan, Singapore, London, Tokyo, Shanghai, New York, Toronto, Frankfurt
CTA Button · Button · GT America
FIND OUT MORE
Notes
- Moody's resolves Financier on the Display role only and GT America on every other role. GT America has no SemiBold, so 600-weight roles resolve up to Bold.
- Role metrics (size · line-height) inherit the WDS 30-role registry unchanged — only the font family and weight resolution change in the skin.
- The Meta Row and City List are still on system Inter, not the Moody's GT America Utility role — reconcile before handover.
- The 52px Display title is a recorded client size override, not drift.
05
Examples
The live Section 3 of the Moody's Event Series page — the full hero with the event map and photo strip.
Notes
- A compact sibling exists: Event Series · Ribbon — the header only, no map or strip.
- A second series (different cities / photo set) earns further examples when it exists.
- Both-mode exhibit is not applicable: this is a single branded treatment on the Moody's dark canvas, not a dual-mode WDS component.
Feed · Moody's · Event Series
Hand-crafted reference of the Moody's Event Series section. Details, anatomy, spacing and typography read from the Moody's skin file (Event Series - HTML Component › Section 3).
Hand-crafted reference of the Moody's Event Series section. Details, anatomy, spacing and typography read from the Moody's skin file (Event Series - HTML Component › Section 3).