Brigade Blocks Docs v1.1.0

Interactive module

Timeline Item block

One milestone of a Timeline: a date, a title and any content.

Overview

A Timeline Item is one milestone of a Timeline. It has a date, a title, content (any blocks) and — when the timeline uses icon markers — its own icon.

At a glance

Block name
wpbb/timeline-item
Module
Interactive
Find it by searching
Timeline Item
Used inside
Timeline (it cannot be used on its own)
Loads JavaScript on the site
No

How to add the Timeline Item block

  1. Add the parent block. The Timeline Item block only exists inside a Timeline block. Insert a Timeline first (search for “Timeline” in the block inserter); it already contains a few Timeline Item blocks with sample content.
  2. Add another Timeline Item. Select the Timeline and click the + button at its end.
  3. Select it. Click inside the Timeline Item — or pick it in the List View (the three-lines icon in the top toolbar) — to see its own settings in the sidebar.
  4. Edit the content. Type the date (“Date”), the title (“Milestone”) and the text (“What happened?”).
  5. Reorder or remove. Use the up/down arrows in the block toolbar to move it, or the block menu (⋮) → Delete to remove it.
  6. Style it. Design settings for all items are made on the parent Timeline block, in its Styles tab, so every item stays consistent.
  7. Save or publish. Click Save draft, Preview or Publish / Update.

Content settings

You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.

On the block (in the editor canvas)

Date

What it does
A date or period label.
What to enter or choose
Any text — a year, a date, “Q3 2026”, “Week 1”.
Default
Empty
How to use it
Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
When to use it
Usually.
Example
“2021”.
Result
Shown above the title.

Title

What it does
The milestone name (an H3).
What to enter or choose
A few words. Bold and italic allowed.
Default
Empty
How to use it
Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
When to use it
Always.
Example
“First 100 clients”.
Result
Shown as the card heading.

Content

What it does
The content shown in the card.
What to enter or choose
Any blocks — paragraphs, lists, images, buttons, even another Brigade block.
How to use it
Click in the content area (it starts with “What happened?” or sample text) and type, or use the + to add blocks.
When to use it
Always.
Example
A paragraph and a Button.
Result
The blocks appear inside.

Settings panel: Marker icon

Only shown when the Timeline’s Marker is set to Icon.

Icon

What it does
The icon on the line for this milestone.
What to enter or choose
An icon from the library.
Default
star
How to use it
Click the icon button to open the icon library, search by name (for example “arrow” or “phone”) and click an icon. “None” removes it.
When to use it
With icon markers.
Example
“globe” for “Going global”.
Result
A 20px icon in the marker.

Design & styling

Styled on the parent Timeline (Card, Marker, Date, Title).

Responsive settings

Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.

This block adapts to the screen width on its own and has no per-device settings.

Advanced options

  • HTML anchor (Advanced section of the Settings tab) — a unique name such as pricing, so you can link straight to this block with #pricing at the end of the page address (for example from a menu).
  • Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
  • This block cannot be turned into a synced pattern on its own; make a pattern from its parent block instead.

Limitations and notes

  • Items with no date, title or content are not shown.