Documentation Index
Fetch the complete documentation index at: https://mintlify.com/Nettalco/nettalco-theme/llms.txt
Use this file to discover all available pages before exploring further.
The Timeline component presents a series of events along a vertical or horizontal axis, each represented by a marker dot and connected by a line. The Nettalco preset uses a primary-coloured inner dot inside a bordered circular marker, with a {content.border.color} connector line, making the timeline blend naturally into any content surface while keeping event markers visually prominent.
Angular Usage Example
<!-- Vertical timeline (default) -->
<p-timeline [value]="events" align="alternate">
<ng-template pTemplate="marker" let-event>
<!-- Custom marker — omit to use the default primary dot -->
<span
class="flex items-center justify-center w-8 h-8 rounded-full text-white"
[style.background]="event.color"
>
<i [class]="event.icon"></i>
</span>
</ng-template>
<ng-template pTemplate="content" let-event>
<p-card [header]="event.title" [subheader]="event.date" styleClass="shadow-none">
<p>{{ event.description }}</p>
</p-card>
</ng-template>
<ng-template pTemplate="opposite" let-event>
<small class="text-muted">{{ event.date }}</small>
</ng-template>
</p-timeline>
events = [
{ title: 'Ordered', date: '15/10/2024', icon: 'pi pi-shopping-cart', color: '#9C27B0' },
{ title: 'Shipped', date: '15/10/2024', icon: 'pi pi-map-marker', color: '#673AB7' },
{ title: 'Delivered', date: '16/10/2024', icon: 'pi pi-check', color: '#FF9800' },
];
layout="horizontal" to the <p-timeline> element.
Design Tokens
event
Global settings applying to every event entry regardless of orientation.
horizontal
Settings applied when the timeline uses layout="horizontal".
| Token | Value |
|---|
eventContent.padding | 1rem 0 |
vertical
Settings applied when the timeline uses the default vertical layout.
| Token | Value |
|---|
eventContent.padding | 0 1rem |
eventMarker
The circular marker rendered at each event position.
| Token | Value |
|---|
size | 1.125rem |
borderRadius | 50% |
borderWidth | 2px |
background | {content.background} |
borderColor | {content.border.color} |
content.borderRadius | 50% |
content.size | 0.375rem |
content.background | {primary.color} |
content.insetShadow | 0px 0.5px 0px 0px rgba(0,0,0,0.06), 0px 1px 1px 0px rgba(0,0,0,0.12) |
size: 1.125rem, background: {content.background}, borderWidth: 2px) surrounding a smaller filled dot (content.size: 0.375rem, content.background: {primary.color}). The inner dot carries a subtle inset shadow to give it a slight 3-D lift.
eventConnector
The line segment connecting consecutive event markers.
| Token | Value |
|---|
color | {content.border.color} |
size | 2px |
Theme Notes
Timeline has no transitionDuration token — it renders as a purely static layout with no animated state changes. There are no Nettalco global CSS overrides targeting Timeline elements.
The event.minHeight of 5rem ensures that even a minimal event (no opposite template, short content) has enough vertical (or horizontal) extent to make the connector line visible between markers.