logo
v2.5.13

Timeline

Display information in a chronological order using a feed-like view. The original design was for this to be a date + event component but, it turned out this component can also display any information as a feed. The date format you display is completely your choice. The timeline just expects a string in the optional date attribute.

10 days ago
You signed up
8 days ago
Customer rep assigned
8 days ago
Customer rep called
Account is being reviewed
Account activated

        
            <x-bladewind::timeline
                date="10 days ago"
                content="You signed up"/>
            <x-bladewind::timeline
                date="8 days ago"
                content="Customer rep assigned"/>
            <x-bladewind::timeline
                date="8 days ago"
                content="Customer rep called"/>
            <x-bladewind::timeline
                content="Account is being reviewed"/>
            <x-bladewind::timeline
                content="Account activated"/>
        
    

Bigger Anchors

By default each timeline anchors itself on small transparent circles. We can set the anchors to use bigger circles instead, by setting anchor="big". For now there are only two anchor sizes. It is possible to have a mix of big and small anchors in the same timeline series.

10 days ago
You signed up
8 days ago
Customer rep assigned
8 days ago
Customer rep called
Account is being reviewed
Account activated
        
            <x-bladewind::timeline
                anchor="big"
                date="10 days ago"
                content="You signed up"/>
            ...
        
    

Completed

Setting the attribute completed="true" will mark a timeline event as completed. Completed events in the BladewindUI Timeline show filled circles and a checkmark instead of transparent dots. The checkmark sign is only displayed when using anchor="big", otherwise it is just a filled circle. You can also use an icon different from the checkmark for your completed timeline anchors.

10 days ago
You signed up
8 days ago
Customer rep assigned
8 days ago
Customer rep called
Account is being reviewed
Account activated
        
            <x-bladewind::timeline
                completed="true"
                date="10 days ago"
                content="You signed up"/>
            ...
        
    

Completed when anchor="big"

10 days ago
You signed up
8 days ago
Customer rep assigned
8 days ago
Customer rep called
Account is being reviewed
Account activated
        
            <x-bladewind::timeline
                completed="true"
                anchor="big"
                date="10 days ago"
                content="You signed up"/>
            ...
        
    

Stacked Timelines

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". When timelines are stacked, all content is displayed to the right of the anchor.

just now
database server restarted
30 minutes ago
2 endpoints are failing on bladewindui-data EC2 bucket. You may want to login and check the logs
1 hour ago
There have been 200 failed log in attempts from mike@bladewindui.com. Possibly a DDos attack attempt. Secure the server.
Yesterday
Data recovery completed with 2 errors
    
            <x-bladewind::timeline-group stacked="true">

                <x-bladewind::timeline
                    date="just now"
                    content="database server restarted" />

                <x-bladewind::timeline date="30 minutes ago">
                    <x-slot:content>
                        <a>2 endpoints</a> are failing on bladewindui-data EC2
                        bucket. You may want to login and check the logs
                    </x-slot:content>
                </x-bladewind::timeline>

                <x-bladewind::timeline date="1 hour ago">
                    <x-slot:content>
                        There have been 200 failed log in attempts from
                        <a>mike@bladewindui.com</a>. Possibly a DDos attack
                        attempt. Secure the server.
                    </x-slot:content>
                </x-bladewind::timeline>

                <x-bladewind::timeline date="Yesterday"
                    content="Data recovery completed with 2 errors" />

            </x-bladewind::timeline-group>
    

Notice we introduced a x-bladewind::timeline-group component in the above example. This is completely optional but saves us from writing stacked="true" on each tag component. The alternative is to have <x-bladewind::timeline stacked="true" .../> for every timeline we want to stack.

Stacked and all completed


just now
database server restarted
30 minutes ago
2 endpoints are failing on bladewindui-data EC2 bucket. You may want to login and check the logs
1 hour ago
There have been 200 failed log in attempts from mike@bladewindui.com. Possibly a DDos attack attempt. Secure the server.
Yesterday
Data recovery completed with 2 errors

    
            <x-bladewind::timeline-group
                completed="true"
                stacked="true">

                <x-bladewind::timeline
                    date="just now"
                    content="database server restarted" />

                ...

            </x-bladewind::timeline-group>
    

Stacked and completed with anchor="big"


just now
database server restarted
30 minutes ago
2 endpoints are failing on bladewindui-data EC2 bucket. You may want to login and check the logs
1 hour ago
There have been 200 failed log in attempts from mike@bladewindui.com. Possibly a DDos attack attempt. Secure the server.
Yesterday
Data recovery completed with 2 errors

    
            <x-bladewind::timeline-group
                completed="true"
                anchor="big"
                stacked="true">

                <x-bladewind::timeline
                    date="just now"
                    content="database server restarted" />

                ...

            <x-bladewind::timeline
                date="Yesterday"
                content="Data recovery completed with 2 errors"
                completed="false" />

            </x-bladewind::timeline-group>
    

Anchor Icons and Avatars

Anchor Icons

Thanks to the BladewindUI Icon component, embedding icons in the Timeline is easy. By default, completed events are displayed with a checkmark if anchor="big". It is possible to use any Heroicons icon as your timeline's anchor. Just set the attribute icon="name-of-icon". You can use different icons for every timeline. If you intend to use the same icons for all anchors in your timeline, consider wrapping your timelines in a x-bladewind::timeline-group component and setting icon="name-of-icon" on that instead.

Icons and avatars only work when anchor="big"

10 days ago
You signed up
8 days ago
Customer rep assigned
8 days ago
Customer rep called
Account is being reviewed
Account activated
        
            <x-bladewind::timeline-group anchor="big" completed="true">

                <x-bladewind::timeline
                    date="10 days ago"
                    content="You signed up"
                    icon="bell-alert" />

                <x-bladewind::timeline
                    date="8 days ago"
                    content="Customer rep assigned"
                    icon="bolt" />

                <x-bladewind::timeline
                    date="8 days ago"
                    content="Customer rep called"
                    icon="chat-bubble-bottom-center-text" />

                <x-bladewind::timeline
                    content="Account is being reviewed"
                    icon="key"
                    completed="false" />

                <x-bladewind::timeline
                    content="Account activated"
                    icon="map-pin"
                    completed="false" />

            </x-bladewind::timeline-group>
        
    

Anchor Avatars

Thanks to the BladewindUI Avatar component, using avatars as Timeline anchors is easy. Just set the attribute avatar="url-to-image". By default avatars use the size="small" attribute of the Avatar component do display small images.

10 days ago
/assets/images/doc.png
You signed up
8 days ago
/assets/images/francis.png
Customer rep assigned
8 days ago
/assets/images/me.jpeg
Customer rep called
/assets/images/issah.jpg
Account is being reviewed
/assets/images/rowe.jpeg
Account activated
        
            <x-bladewind::timeline-group>

                <x-bladewind::timeline
                    date="10 days ago"
                    content="You signed up"
                    avatar="/assets/images/pic1.jpg" />

                <x-bladewind::timeline
                    date="8 days ago"
                    content="Customer rep assigned"
                    avatar="/assets/images/pic2.jpg" />
            ...
            </x-bladewind::timeline-group>
        
    

Positioning and Aligning Timelines

The Timeline component fills (full width) and centres itself in the parent container you define it in. By default, dates are displayed on the left and events on the right of the timeline anchor. When timelines are stacked however, all content is displayed to the right of the anchor.

Positioning and aligning can get confusing so lets break it down. You can only position a x-bladewind::timeline-group component. By default it is centre aligned. We can position the component to the left or to the center.

Positioning looks nicer when timelines are stacked

Left Positioning

Note how the entire timeline group is moved to the left of the page.


10 days ago
/assets/images/doc.png
You signed up
8 days ago
/assets/images/francis.png
Customer rep assigned
8 days ago
/assets/images/me.jpeg
Customer rep called
/assets/images/issah.jpg
Account is being reviewed
/assets/images/rowe.jpeg
Account activated

        
            <x-bladewind::timeline-group
                position="left"
                anchor="big">

                <x-bladewind::timeline
                    date="10 days ago"
                    content="You signed up"
                    avatar="/assets/images/pic1.jpg" />
            ...
            </x-bladewind::timeline-group>
        
    

Left Positioning for Stacked Timelines

Note how the timeline fills the entire width of the page. If you do not want this, you can place the timeline group in a parent element that has a fixed width.

just now
database server restarted
30 minutes ago
2 endpoints are failing on bladewindui-data EC2 bucket. You may want to login and check the logs
1 hour ago
There have been 200 failed log in attempts from mike@bladewindui.com. Possibly a DDos attack attempt. Secure the server.
Yesterday
Data recovery completed with 2 errors

        
            <x-bladewind::timeline-group
                position="left"
                stacked="true"
                color="pink">

                <x-bladewind::timeline
                    date="30 minutes ago">
                     <x-slot:content>
                        <a>2 endpoints</a> are failing on
                        bladewindui-data EC2 bucket.
                        You may want to login and check the logs
                    </x-slot:content>
                <x-bladewind::timeline/>
            ...
            </x-bladewind::timeline-group>
        
    

Left Alignment

Alignments only work for stacked timelines and only for the x-bladewind::timeline component. By default, stacked timeline content is aligned to the right of the anchor. If you wish to flip a stacked timeline to the left, set the align_left="true" attribute on that specific timeline.

Left alignment works only when the timeline group has position="center"


just now
database server restarted
30 minutes ago
2 endpoints are failing on bladewindui-data EC2 bucket. You may want to login and check the logs
1 hour ago
There have been 200 failed log in attempts from mike@bladewindui.com. Possibly a DDos attack attempt. Secure the server.
Yesterday
Data recovery completed with 2 errors

        
            <x-bladewind::timeline-group
                position="right"
                anchor="big">

                <x-bladewind::timeline
                        date="just now"
                        content="database server restarted"
                        align_left="true" />

                <x-bladewind::timeline d
                    ate="30 minutes ago">
                    <x-slot:content>
                        <a>2 endpoints</a> are failing on
                        bladewindui-data EC2 bucket. You may want to login
                        and check the logs
                    </x-slot:content>
                </x-bladewind::timeline>

                <x-bladewind::timeline
                    date="1 hour ago"
                    align_left="true">
                    <x-slot:content>
                        There have been 200 failed log in attempts from
                        <a>mike@bladewindui.com</a>.
                        Possibly a DDos attack attempt.
                        Secure the server.
                    </x-slot:content>
                </x-bladewind::timeline>

                <x-bladewind::timeline
                    date="Yesterday"
                    content="Data recovery completed with 2 errors" />

            </x-bladewind::timeline-group>
        
    

No Trailing Line

You may have noticed from the the 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.

10 days ago
You signed up
8 days ago
Customer rep assigned
8 days ago
Customer rep called
Account is being reviewed
Account activated
        
        <x-bladewind::timeline
                date="10 days ago"
                content="You signed up" />
        ...
        <x-bladewind::timeline
            content="Account activated"
            last="true"  />
        
    

Different Colours

Like with most of our other components, the timeline component can be displayed in all the different colours we support. The nice thing about the timeline is, colours are actually applied to each timeline so your timelines can have a colour cocktail., though you will typically want to use one colour for a timeline group.

10 days ago
You signed up
8 days ago
Customer rep assigned
8 days ago
Customer rep called
Account is being reviewed
Account activated
        
            <x-bladewind::timeline
                date="10 days ago"
                content="You signed up"
                color="pink"
                completed="true" />

            <x-bladewind::timeline
                date="8 days ago"
                content="Customer rep assigned"
                color="orange" />

            <x-bladewind::timeline
                date="8 days ago"
                content="Customer rep called"
                color="green" />

            <x-bladewind::timeline
                content="Account is being reviewed"
                color="purple" />

            <x-bladewind::timeline
                content="Account activated"
                color="gray" />
        
    

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

Timeline Group Component

Option Default Available Values
completed false Specify if all timelines in the group are completed or not. true false
stacked false Defines if the date is stacked on top of the content.
true false
anchor small Should the anchor be big or small.
small big
anchor_css blank Any additional TailwindCSS classes to apply to the anchor
icon blank Accepts any icon name from Heroicons. This icon will be used for all timelines in the group.
icon_css blank Any additional TailwindCSS classes to apply to the icon.
date_css blank Any additional TailwindCSS classes to apply to the date
position center Specifies how the timeline group should be positioned in its parent element.
left center
color blue Set the color of the timeline.
blue red yellow greenpurple pink orange black cyan violet indigo fuchsia

Timeline Component

Option Default Available Values
date blank String. Date to be displayed to either the left of the anchor or on top of the content when stacked.
date_css blank Any additional TailwindCSS classes to apply to the date
avatar blank Path to an image to display in the anchor.
avatar_css blank Any additional TailwindCSS classes to apply to the avatar.
content blank Also label. The correspondning content to display for the date
last false Defines if the timeline is the last in the group.
truefalse
align_left false Defines if the timeline should be left aligned. Works only if stacked="true".
truefalse
completed false Specify if all timelines in the group are completed or not. true false
stacked false Defines if the date is stacked on top of the content.
true false
anchor small Should the anchor be big or small.
small big
anchor_css blank Any additional TailwindCSS classes to apply to the anchor
icon blank Accepts any icon name from Heroicons. This icon will be used for all timelines in the group.
icon_css blank Any additional TailwindCSS classes to apply to the icon.
color blue Set the color of the timeline.
blue red yellow greenpurple pink orange black cyan violet indigo fuchsia

Timeline with all attributes defined

        
            <x-bladewind::timeline-group
                stacked="true"
                anchor="big"
                anchor_css="pl-9"
                color="pink"
                icon="briefcase"
                icon_css="pl-9"
                date_css="tracking-wider"
                position="left"
                completed="true" />
        
    
        
            <x-bladewind::timeline
                stacked="true"
                anchor="big"
                anchor_css="pl-9"
                color="pink"
                icon="briefcase"
                icon_css="pl-9"
                date="9 days ago"
                date_css="tracking-wider"
                align_left="true"
                avatar="/assets/images/me.jpg"
                avatar_css="rounded-0"
                content="I am a timeline"
                completed="true" />
        
    
The source file for this component is available in resources > views > components > bladewind > timeline-group.blade.php, resources > views > components > bladewind > timeline.blade.php