11. Timelines

For status pages, releases and chronologies. xpulse-timeline is a genuine theme component — not app-specific custom styles.

Live Demo

v1.3.0 live

Deployed to production and reachable.

v1.4.0 testing

Internal review — features stable but not yet signed off.

Incident

An error or planned hotfix can be displayed prominently like this.

v1.2.0 archived

Older version with no special status.

Structure

1 <div class="xpulse-timeline">
2   <div class="xpulse-timeline__item">
3     <div class="xpulse-timeline__line">
4       <div class="xpulse-timeline__dot xpulse-timeline__dot--info"></div>
5     </div>
6     <article class="xpulse-timeline__card xpulse-card--info">
7       <strong class="xpulse-text--info">v1.3.0 live</strong>
8       <p>Description</p>
9     </article>
10   </div>
11 </div>

Dot Variants

Class	Meaning
`xpulse-timeline__dot`	Neutral (no context)
`xpulse-timeline__dot--info`	Positive / Online / Live
`xpulse-timeline__dot--warning`	Pending / In Review
`xpulse-timeline__dot--danger`	Error / Incident

Recommendation: always pair the dot colour with the matching card variant (xpulse-card--info etc.) so colour and border stay consistent.

1	<div class="xpulse-timeline">
2	<div class="xpulse-timeline__item">
3	<div class="xpulse-timeline__line">
4	<div class="xpulse-timeline__dot xpulse-timeline__dot--info"></div>
5	</div>
6	<article class="xpulse-timeline__card xpulse-card--info">
7	<strong class="xpulse-text--info">v1.3.0 live</strong>
8	<p>Description</p>
9	</article>
10	</div>
11	</div>