---
title: Timeline | Module Library
---

[Skip to content](https://testportal.streamcreative.com/module-library/timeline#main-content)

![Membership Demo](https://testportal.streamcreative.com/hs-fs/hubfs/Membership-Demo.png?width=470&height=59&name=Membership-Demo.png)Homepage

- [Default HubSpot Blog](https://streamcreative-2659819.hs-sites.com/blog?hsLang=en)

Get started

- [Default HubSpot Blog](https://streamcreative-2659819.hs-sites.com/blog?hsLang=en)

Get started

## 1. Default — theme defaults (4 entries)

Alternating layout. Title, dates, and entry text all follow the section palette; the marker fill uses the section accent color. No module overrides set.

2020

### Company Founded

Started with a vision to transform the industry through innovation and excellence.

2021

### First Major Milestone

Reached 1,000 customers and expanded our team to 25 employees.

2022

### Series A Funding

Secured $10M in Series A funding to accelerate growth and product development.

2023

### Global Expansion

Launched operations in 5 new countries and served customers worldwide.

## 2. Dark section (variant 4)

On a dark section the title and entry text switch to the dark-section text color, and the marker fill uses the dark-section accent.

Q1

### Discovery

Numbered markers read against the accent fill on a dark background.

Q2

### Design

Icon marker style: the icon color is the section background so it stays legible on the accent.

Q3

### Build

Connector line is derived from the section text color at low opacity.

Q4

### Launch

Width stays contained for readability on wide screens.

## 3. Custom overrides (text + marker color)

Entry descriptions should be dark red; marker tiles and date badges should be green. The title stays the section text color (the override targets entry text only).

1

Step 1

### Plan

This description should render in dark red.

2

Step 2

### Execute

Numbered markers use the custom green fill.

3

Step 3

### Measure

The date badge inherits the same custom marker color.

## 4. Animation — line by line

Scroll into view: the title, this intro and then each entry reveal in sequence using the theme duration, easing and stagger. Without JavaScript everything stays visible; reduced motion is respected.

2020

### Entry one

Reveals first.

2021

### Entry two

Reveals second (theme stagger delay).

2022

### Entry three

Reveals third.

2023

### Entry four

Reveals last.

---

#### Solutions

- [Services](https://testportal.streamcreative.com/services?hsLang=en)
- [Industries](https://testportal.streamcreative.com/industries?hsLang=en)

#### Company

- [About](https://testportal.streamcreative.com/about?hsLang=en)
- [Careers](https://testportal.streamcreative.com/careers?hsLang=en)

#### Resources

- [Blog](https://testportal.streamcreative.com/blog?hsLang=en)
- [Contact](https://testportal.streamcreative.com/contact?hsLang=en)

© 2026 Your Company. All rights reserved.

```json
{
  "@context" : "https://schema.org",
  "@type" : "Organization",
  "address" : {
    "@type" : "PostalAddress",
    "addressLocality" : "Brookfield",
    "addressRegion" : "WI",
    "postalCode" : "53005",
    "streetAddress" : "13555 Bishops Ct"
  },
  "logo" : {
    "@type" : "ImageObject",
    "url" : "https://f.hubspotusercontent10.net/hubfs/2659819/Membership-Demo.png"
  },
  "name" : "streamcreative.com",
  "url" : "https://testportal.streamcreative.com"
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "WebPage",
  "name" : "Module Library: Timeline",
  "url" : "https://testportal.streamcreative.com/module-library/timeline"
}
```