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.

        
            <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.

        
            <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.

        
            <x-bladewind::timeline
                completed="true"
                date="10 days ago"
                content="You signed up"/>
            ...
        
    

Completed when anchor="big"

        
            <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.

    
            <x-bladewind::timelines 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::timelines>
    

Notice we introduced a x-bladewind::timelines 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

    
            <x-bladewind::timelines
                completed="true"
                stacked="true">

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

                ...

            </x-bladewind::timelines>
    

Stacked and completed with anchor="big"

    
            <x-bladewind::timelines
                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::timelines>
    

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::timelines component and setting icon="name-of-icon" on that instead.

        
            <x-bladewind::timelines 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::timelines>
        
    

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.

        
            <x-bladewind::timelines>

                <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::timelines>
        
    

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::timelines component. By default it is centre aligned. We can position the component to the left or to the center.

Left Positioning

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

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

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

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.

        
            <x-bladewind::timelines
                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::timelines>
        
    

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.

        
            <x-bladewind::timelines
                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::timelines>
        
    

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.

        
        <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.

        
            <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.

Timeline Group Component

Timeline Component

Timeline with all attributes defined

        
            <x-bladewind::timelines
                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" />