TechnicalCollectible prompt

Company history timeline that tells a story

A vertical timeline of real milestones with dates, photos and context, readable on any screen.

v0LovableBolt

Curated by Nvoka

Nvoka wordmark logo
Nvoka wordmark logoTechnical

Company history timeline that tells a story

Act as an editorial designer. Build a company history timeline for {{business_name}} in this style: {{visual_style}}, from this material: {{source_notes}} Choosing milestones: 6 to 12 moments that changed something for customers or the team: the founding, a first location, a hard year, a big launch. Skip years with nothing to say. Never invent a milestone, date or number; where the material is thin, ask me instead. Each milestone: the date or year, a short title, 1 or 2 sentences, and optionally a photo with a caption, or a then-and-now number with its source. Semantics: an ordered list; dates in time elements; headings for eras if there are more than 8 milestones; the line and dots are decorative and aria-hidden. Layout: - 360: a single column with the line on the left at 16px, dates above titles - 768: the same, with photos to the right of the text - 1280: a date column of 2 (sticky within its milestone) and content in 7, max width 1000px; no two-sided zig-zag, which is harder to scan Spacing between milestones 40 / 48 / 64px. Type: years 28 to 36px, weight 700, tabular-nums, in the accent token; titles 18 to 20px weight 600; body 16px at 4.5:1, max 60ch. Photos: archival photos keep their grain and color, with captions naming the year and people (with permission); width and height set; lazy below the fold; a missing photo collapses the slot. States: long titles wrap; a milestone without a date isn't shown until it has one; the latest milestone ends with a forward-looking line, not a slogan. Motion: the line fills with the scroll using a scroll-driven animation, falling back to a static line and staying static under prefers-reduced-motion. Avoid: horizontal scrolling timelines, an icon in a circle for every year, invented history, "Our journey" headings with nothing behind them.
Technicalnvoka.com/library/nvoka-company-history-timeline-that-tells-a-storyScan to open
Technical

Company history timeline that tells a story

A vertical timeline of real milestones with dates, photos and context, readable on any screen.

Nvoka logo

Curated by Nvoka

v0LovableBolt
Add to my library

Make it yours

Fill in the blanks and change any word. Only your copy changes, never the card.

Fill in the blanks

0 of 3 filled

Your prompt

Act as an editorial designer. Build a company history timeline for {{business_name}} in this style: {{visual_style}}, from this material: {{source_notes}} Choosing milestones: 6 to 12 moments that changed something for customers or the team: the founding, a first location, a hard year, a big launch. Skip years with nothing to say. Never invent a milestone, date or number; where the material is thin, ask me instead. Each milestone: the date or year, a short title, 1 or 2 sentences, and optionally a photo with a caption, or a then-and-now number with its source. Semantics: an ordered list; dates in time elements; headings for eras if there are more than 8 milestones; the line and dots are decorative and aria-hidden. Layout: - 360: a single column with the line on the left at 16px, dates above titles - 768: the same, with photos to the right of the text - 1280: a date column of 2 (sticky within its milestone) and content in 7, max width 1000px; no two-sided zig-zag, which is harder to scan Spacing between milestones 40 / 48 / 64px. Type: years 28 to 36px, weight 700, tabular-nums, in the accent token; titles 18 to 20px weight 600; body 16px at 4.5:1, max 60ch. Photos: archival photos keep their grain and color, with captions naming the year and people (with permission); width and height set; lazy below the fold; a missing photo collapses the slot. States: long titles wrap; a milestone without a date isn't shown until it has one; the latest milestone ends with a forward-looking line, not a slogan. Motion: the line fills with the scroll using a scroll-driven animation, falling back to a static line and staying static under prefers-reduced-motion. Avoid: horizontal scrolling timelines, an icon in a circle for every year, invented history, "Our journey" headings with nothing behind them.
See all