logo
v2.4.3
LTR RTL

Timeline

Display date and progress or statuses on a timeline. The date format you display is completely your choice. The timeline just expects a date string. The default colour for the timeline component is blue but you can choose from eight additional colour options. The timeline component does not centre itself in its parent element. You will need to figure that bit out in your layout. In the example below the timeline has been wrapped in <div class="w-96 mx-auto">...</div>

Completed events in the BladewindUI Timeline show a checkmark, while upcoming events are denoted with an empty circle. To set a timeline as completed set the attribute completed="true".

18-JUL
You signed up
19-JUL
Customer rep assigned
20-JUL
Customer rep called
Account is being reviewed
Account activated
        
            <x-bladewind.timeline
                date="18-JUL"
                label="You signed up"
                completed="true" />

            <x-bladewind.timeline
                date="19-JUL"
                label="Customer rep assigned"
                completed="true" />

            <x-bladewind.timeline
                date="20-JUL"
                label="Customer rep called"
                completed="true" />

            <x-bladewind.timeline label="Account is being reviewed" />

            <x-bladewind.timeline label="Account activated" />
        
    

Stacked Timeline

By default dates are displayed on the left and the corresponding events on the right. This behaviour can be changed to stack dates on top of events. This can be achieved by setting the attribute stacked="true".

18-JUL
You signed up
19-JUL
Customer rep assigned
20-JUL
Customer rep called
Account is being reviewed
Account activated
        
            <x-bladewind.timeline
                date="18-JUL"
                label="You signed up"
                completed="true"
                stacked="true" />

            <x-bladewind.timeline
                date="19-JUL"
                label="Customer rep assigned"
                completed="true"
                stacked="true" />

            <x-bladewind.timeline
                date="20-JUL"
                label="Customer rep called"
                completed="true"
                stacked="true" />

            <x-bladewind.timeline
                label="Account is being reviewed"
                stacked="true" />

            <x-bladewind.timeline
                label="Account activated"
                stacked="true" />
        
    

Different Completed Event Icons

Thanks to the BladewindUI Icon component, embedding icons in the Timeline is easy. By default, completed events are displayed with a checkmark. It is possible to use any Heroicons icon for your completed events timeline. Just set the attribute icon="name-of-icon".

18-JUL
You signed up
19-JUL
Customer rep assigned
20-JUL
Customer rep called
Account is being reviewed
Account activated
        
            <x-bladewind.timeline
                date="18-JUL"
                label="You signed up"
                completed="true"
                icon="envelope"
                stacked="true"
                icon=""/>

            <x-bladewind.timeline
                date="19-JUL"
                label="Customer rep assigned"
                completed="true"
                icon="user"
                stacked="true" />

            <x-bladewind.timeline
                date="20-JUL"
                label="Customer rep called"
                completed="true"
                icon="phone-arrow-down-left"
                stacked="true" />

            <x-bladewind.timeline label="Account is being reviewed" stacked="true" />

            <x-bladewind.timeline label="Account activated" stacked="true" />
        
    

No Trailing Line

You may have noticed from the the two examples above there is a trailing line after the last timeline. Some may find it cool. Others may not. For those who cannot stand that trailing line, you can get rid of it by applying this atribute to the last timeline. last="true". This tells the timeline component that this is the last item in the timeline list.

18-JUL
You signed up
19-JUL
Customer rep assigned
20-JUL
Customer rep called
Account is being reviewed
Account activated
        
            <x-bladewind.timeline
                date="18-JUL"
                label="You signed up"
                completed="true" />

            <x-bladewind.timeline
                date="19-JUL"
                label="Customer rep assigned"
                completed="true" />

            <x-bladewind.timeline
                date="20-JUL"
                label="Customer rep called"
                completed="true" />

            <x-bladewind.timeline
                label="Account is being reviewed" />

            <x-bladewind.timeline
                label="Account activated"
                last="true" />
        
    

Different Colours

Like with most of our other components, the timeline component can be displayed in nine different colours. Hopefully, one of these nine colours matches your theme. The nice thing about the timeline is, colours are actually applied to each timeline so your timelines can have a colour cocktail. Typically, you will want to use one colour for all timelines but hey, knock yourself out.

18-JUL
You signed up
19-JUL
Customer rep assigned
20-JUL
Customer rep called
Account is being reviewed
Account activated
Account deleted
User re-activated
Email verified
User goes live
        
            <x-bladewind::timeline
                date="18-JUL"
                label="You signed up"
                completed="true"
                color="red" />

            <x-bladewind::timeline
                date="19-JUL"
                label="Customer rep assigned"
                completed="true"
                color="yellow" />

            <x-bladewind::timeline
                date="20-JUL"
                label="Customer rep called"
                completed="true"
                color="green" />

            <x-bladewind::timeline
                label="Account is being reviewed"
                color="blue" />

            <x-bladewind::timeline
                label="Account activated"
                color="pink" />

            <x-bladewind::timeline
                label="Account deleted"
                color="black" />

            <x-bladewind::timeline
                label="User re-activated"
                color="purple" />

            <x-bladewind::timeline
                label="Email verified"
                color="orange" />

            <x-bladewind::timeline
                color="cyan"
                label="User goes live"
                last="true" />
        
    

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Button component.

IMPORTANT: Projects running Laravel 8 please read this

Option Default Available Values
completed true This attribute can be omitted if the event has not been completed. true false
date blank A date to display for the timeline. Preferred format is dd-mmm (18-JUL)
label blank Text to display next to or above the date. The activity in the timeline.
icon checkmark Accepts any icon name from Heroicons.
stacked false Defines if the date is stacked on top of the label. The value must be a string and not boolean.
true false
last false Specifies if the timeline is the last one in the list. This removes or keeps the trailing line.
true false
color blue Set the color of the timeline.
blue red yellow greenpurple pink orange black cyan

Timeline with all attributes defined

        
            <x-bladewind.timeline
                date="18-JUL"
                label="User signed up"
                stacked="false"
                last="true"
                color="pink"
                icon="checkmark"
                completed="true" />
        
    
The source file for this component is available in resources > views > components > bladewind > timeline.blade.php