# Timeline

*Category:* Components
*Section:* CSS Only
*Source:* https://uikit.developers.rio.cloud/#/components/timeline
*Captured:* 2026-04-27T14:58:37.130Z

The timeline component is a pure CSS component.

## Timeline

### Example: leeroy marked an answer 4m

CSS Timeline
Default
01-2024

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.

02-2024

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.

03-2024

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.

With UI elements

Start today

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.

2
02/2025

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.

Ongoing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.

Finish

Events

leeroy marked an answer 4m

leeroy unmarked an answer 4m

leeroy marked an answer 7m

Andre reopened answer 10m

Andre closed answer 1y

Inventory replenishment triggered

Cross-Docking initiated

Customs clearance completed

Cold chain integrity maintained

Last-Mile delivery assigned

Stream style
January

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.

February

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.

March

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.

#### HTML (html)

```html
<div>
    <div>
        <div class="h2 margin-bottom-25">CSS Timeline</div>
        <div class="display-grid grid-cols-1-xs grid-cols-2-sm grid-cols-4-lg gap-25">
            <div class="padding-x-10">
                <div class="h4 margin-bottom-25">Default</div>
                <div class="timeline">
                    <div class="timeline-element">
                        <div class="timeline-date">
                            <div class="text-medium">01-2024</div>
                        </div>
                        <div class="timeline-content">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</div>
                    </div>
                    <div class="timeline-element">
                        <div class="timeline-date">
                            <div class="text-medium">02-2024</div>
                        </div>
                        <div class="timeline-content">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</div>
                    </div>
                    <div class="timeline-element">
                        <div class="timeline-date">
                            <div class="text-medium">03-2024</div>
                        </div>
                        <div class="timeline-content">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</div>
                    </div>
                </div>
            </div>
            <div class="padding-x-10">
                <div class="h4 margin-bottom-25">With UI elements</div>
                <div class="timeline">
                    <div class="timeline-element margin-bottom-0">
                        <div class="timeline-date timeline-date-color-primary margin-right-10">
                            <span class="badge badge-primary padding-5">
                                <span class="rioglyph rioglyph-map-marker">
                                </span>
                            </span>
                        </div>
                        <div class="timeline-content margin-bottom-20">
                            <div class="text-medium margin-bottom-5">Start today</div>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
                        </div>
                    </div>
                    <div class="timeline-element margin-bottom-0">
                        <div class="timeline-date timeline-date-color-primary margin-right-10">
                            <span class="badge badge-primary text-medium">2</span>
                        </div>
                        <div class="timeline-content margin-bottom-20">
                            <div class="text-medium margin-bottom-5">02/2025</div>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
                        </div>
                    </div>
                    <div class="timeline-element margin-bottom-0">
                        <div class="timeline-date timeline-date-thin timeline-date-dashed margin-right-10">
                            <div class="position-relative">
                                <div class="spinnerInfoBox display-flex justify-content-center align-items-center height-100pct">
                                    <div class="spinner">
                                        <div>
                                        </div>
                                        <div>
                                        </div>
                                        <div>
                                        </div>
                                        <div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="timeline-content margin-bottom-20">
                            <div class="text-medium margin-bottom-5">Ongoing</div>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
                        </div>
                    </div>
                    <div class="timeline-element">
                        <div class="timeline-date margin-right-10">
                            <span class="badge badge-muted padding-5 text-medium">
                                <span class="rioglyph rioglyph-finish">
                                </span>
                            </span>
                        </div>
                        <div class="timeline-content">
                            <div class="text-medium padding-top-2">Finish</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="padding-x-10">
                <div class="h4 margin-bottom-25">Events</div>
                <div class="timeline">
                    <div class="timeline-element margin-bottom-0">
                        <div class="timeline-date timeline-date-thin margin-right-10">
                            <span class="badge badge-success padding-5 scale-80 margin-left-1">
                                <span class="rioglyph rioglyph-ok">
                                </span>
                            </span>
                        </div>
                        <div class="timeline-content margin-bottom-20 text-color-dark">
                            <b class="text-medium text-color-darkest">leeroy</b> marked an <b class="text-medium text-color-darkest">answer</b> 4m
                        </div>
                    </div>
                    <div class="timeline-element margin-bottom-0">
                        <div class="timeline-date timeline-date-thin margin-right-10">
                            <span class="badge badge-muted padding-5 scale-80 margin-left-1">
                                <span class="rioglyph rioglyph-ok">
                                </span>
                            </span>
                        </div>
                        <div class="timeline-content margin-bottom-20 text-color-dark">
                            <b class="text-medium text-color-darkest">leeroy</b> unmarked an <b class="text-medium text-color-darkest">answer</b> 4m
                        </div>
                    </div>
                    <div class="timeline-element margin-bottom-0">
                        <div class="timeline-date timeline-date-thin margin-right-10">
                            <span class="badge badge-success padding-5 scale-80 margin-left-1">
                                <span class="rioglyph rioglyph-ok">
                                </span>
                            </span>
                        </div>
                        <div class="timeline-content margin-bottom-20 text-color-dark">
                            <b class="text-medium text-color-darkest">leeroy</b> marked an <b class="text-medium text-color-darkest">answer</b> 7m
                        </div>
                    </div>
                    <div class="timeline-element margin-bottom--2">
                        <div class="timeline-date timeline-date-thin margin-right-10">
                            <span class="badge badge-default badge-indicator-pinging scale-50 margin-left-2 padding-10">
                            </span>
                        </div>
                        <div class="timeline-content margin-bottom-20 text-color-dark">
                            <b class="text-medium text-color-darkest">Andre</b> reopened <b class="text-medium text-color-darkest">answer</b> 10m
                        </div>
                    </div>
                    <div class="timeline-element margin-bottom--2">
                        <div class="timeline-date timeline-date-thin margin-right-10">
                            <span class="badge badge-default scale-50 margin-left-2 padding-10">
                            </span>
                        </div>
                        <div class="timeline-content text-color-dark">
                            <b class="text-medium text-color-darkest">Andre</b> closed <b class="text-medium text-color-darkest">answer</b> 1y
                        </div>
                    </div>
                </div>
                <div class="timeline margin-top-50">
                    <div class="timeline-element margin-bottom-0">
                        <div class="timeline-date timeline-date-small timeline-date-thin margin-right-10 margin-top-5">
                            <div class="width-10 aspect-ratio-1 rounded-circle border border-color-info border-width-3 bg-white margin-left-1">
                            </div>
                        </div>
                        <div class="timeline-content margin-bottom-20 text-color-darker">Inventory replenishment triggered</div>
                    </div>
                    <div class="timeline-element margin-bottom-0">
                        <div class="timeline-date timeline-date-small timeline-date-thin margin-right-10 margin-top-5">
                            <div class="width-10 aspect-ratio-1 rounded-circle border border-color-info border-width-2 bg-white margin-left-1">
                            </div>
                        </div>
                        <div class="timeline-content margin-bottom-20 text-color-darker">Cross-Docking initiated</div>
                    </div>
                    <div class="timeline-element margin-bottom-0">
                        <div class="timeline-date timeline-date-small timeline-date-thin margin-right-10 margin-top-5">
                            <div class="width-10 aspect-ratio-1 rounded-circle border border-color-info border-width-2 bg-white margin-left-1">
                            </div>
                        </div>
                        <div class="timeline-content margin-bottom-20 text-color-darker">Customs clearance completed</div>
                    </div>
                    <div class="timeline-element margin-bottom--2">
                        <div class="timeline-date timeline-date-small timeline-date-thin margin-right-10 margin-top-5">
                            <div class="width-10 aspect-ratio-1 rounded-circle border border-color-danger border-width-2 bg-white margin-left-1">
                            </div>
                        </div>
                        <div class="timeline-content margin-bottom-20 text-color-darker">Cold chain integrity maintained</div>
                    </div>
                    <div class="timeline-element margin-bottom--2">
                        <div class="timeline-date timeline-date-small timeline-date-thin margin-right-10 margin-top-5">
                            <div class="width-10 aspect-ratio-1 rounded-circle border border-color-info border-width-2 bg-white margin-left-1">
                            </div>
                        </div>
                        <div class="timeline-content text-color-darker">Last-Mile delivery assigned</div>
                    </div>
                </div>
            </div>
            <div class="padding-x-10">
                <div class="h4 margin-bottom-25">Stream style</div>
                <div class="timeline timeline-style-stream">
                    <div class="timeline-element">
                        <div class="timeline-date">January</div>
                        <div class="timeline-content">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</div>
                    </div>
                    <div class="timeline-element">
                        <div class="timeline-date">February</div>
                        <div class="timeline-content">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</div>
                    </div>
                    <div class="timeline-element">
                        <div class="timeline-date">March</div>
                        <div class="timeline-content">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

### Example: Shipment

Package details
Shipment

34563456

Weight

1.3 Kg

Dimensions

34 x 26 x 17 cm

The shipment is delivered to the recipient
May 31th at 11:00 PM - 10117 Berlin, Germany

The shipment is loaded onto a truck for delivery
May 30 at 1:45 PM - 75001 Paris, France

The shipment is sorted and prepared for further transport
May 30 at 12:10 PM - 75001 Paris, France

The consignment has been picked up and is now at the terminal for further processing
May 29 at 2:15 PM - 75001 Paris, France

We've received the first update on your shipment. While it's currently with the sender or on its way to the terminal, we'll be able to provide more detailed tracking information once it arrives in the receiving country.
May 28 at 4:00 AM - SW1A 1AA London, United Kingdom

#### HTML (html)

```html
<div class="panel panel-default panel-body shadow-default padding-25 max-width-500 rounded-large">
    <div class="h4 margin-bottom-20 margin-top-0">Package details</div>
    <div class="display-flex align-items-center padding-20 gap-15 justify-content-around border border-color-lighter bg-lightest rounded rounded-large margin-bottom-15">
        <div>
            <div class="display-flex align-items-center gap-5 text-color-dark">
                <span class="rioglyph rioglyph-parcel text-color-dark opacity-80">
                </span>
                <div class="">Shipment</div>
            </div>
            <div class="text-medium padding-y-2">34563456</div>
        </div>
        <div>
            <div class="display-flex align-items-center gap-5 text-color-dark">
                <span class="rioglyph rioglyph-weight text-color-dark opacity-80">
                </span>
                <div class="">Weight</div>
            </div>
            <div class="text-medium padding-y-2">1.3 Kg</div>
        </div>
        <div>
            <div class="display-flex align-items-center gap-5 text-color-dark">
                <span class="rioglyph rioglyph-ruler text-color-dark opacity-80">
                </span>
                <div class="">Dimensions</div>
            </div>
            <div class="text-medium padding-y-2">34 x 26 x 17 cm</div>
        </div>
    </div>
    <div class="padding-10">
        <div class="timeline">
            <div class="timeline-element">
                <div class="timeline-date">
                    <span class="badge badge-success padding-5 scale-90 margin-left-2">
                        <span class="rioglyph rioglyph-finish">
                        </span>
                    </span>
                </div>
                <div class="timeline-content">
                    <div class="text-medium margin-bottom-5">The shipment is delivered to the recipient</div>
                    <div class="text-size-12 text-color-dark padding-y-5">May 31th at 11:00 PM - 10117 Berlin, Germany</div>
                </div>
            </div>
            <div class="timeline-element">
                <div class="timeline-date">
                    <span class="badge badge-muted padding-5 scale-80 margin-left-2">
                        <span class="rioglyph rioglyph-ok">
                        </span>
                    </span>
                </div>
                <div class="timeline-content">
                    <div class="text-medium margin-bottom-5">The shipment is loaded onto a truck for delivery</div>
                    <div class="text-size-12 text-color-dark padding-y-5">May 30 at 1:45 PM - 75001 Paris, France</div>
                </div>
            </div>
            <div class="timeline-element">
                <div class="timeline-date">
                    <span class="badge badge-muted padding-5 scale-80 margin-left-2">
                        <span class="rioglyph rioglyph-ok">
                        </span>
                    </span>
                </div>
                <div class="timeline-content">
                    <div class="text-medium margin-bottom-5">The shipment is sorted and prepared for further transport</div>
                    <div class="text-size-12 text-color-dark padding-y-5">May 30 at 12:10 PM - 75001 Paris, France</div>
                </div>
            </div>
            <div class="timeline-element">
                <div class="timeline-date">
                    <span class="badge badge-muted padding-5 scale-80 margin-left-2">
                        <span class="rioglyph rioglyph-ok">
                        </span>
                    </span>
                </div>
                <div class="timeline-content">
                    <div class="text-medium">The consignment has been picked up and is now at the terminal for further processing</div>
                    <div class="text-size-12 text-color-dark padding-y-5">May 29 at 2:15 PM - 75001 Paris, France</div>
                </div>
            </div>
            <div class="timeline-element">
                <div class="timeline-date">
                    <span class="badge badge-muted padding-5 scale-80 margin-left-2">
                        <span class="rioglyph rioglyph-ok">
                        </span>
                    </span>
                </div>
                <div class="timeline-content">
                    <div class="text-medium">We've received the first update on your shipment. While it's currently with the sender or on its way to the terminal, we'll be able to provide more detailed tracking information once it arrives in the receiving country.</div>
                    <div class="text-size-12 text-color-dark padding-y-5">May 28 at 4:00 AM - SW1A 1AA London, United Kingdom</div>
                </div>
            </div>
        </div>
    </div>
</div>
```