Timeline

A custom component for creating timelines
Basic Timeline
01/01/2020
This is the content for the first timeline item.
02/02/2020
A second timeline item comes after the first item.
03/03/2020
The first and last items do not extend the border to the next marker.
04/04/2020
This is the last item. The last item will not show a line after it's respective timeline marker.
//- Timeline component
.timeline
    .timeline-item
        .timeline-item-marker
            .timeline-item-marker-text
                | ...
            .timeline-item-marker-indicator
                i(data-feather='check')
        .timeline-item-content
            | First item
    .timeline-item
        .timeline-item-marker
            .timeline-item-marker-text
                | ...
            .timeline-item-marker-indicator
                i(data-feather='check')
        .timeline-item-content
            | Second item
    .timeline-item
        .timeline-item-marker
            .timeline-item-marker-text
                | ...
            .timeline-item-marker-indicator
                i(data-feather='check')
        .timeline-item-content
            | Third item
The .timeline component allows you to add a .timeline-item to display content within a sequence. The timeline also includes a marker, a field to the left of the marker for a date, and a line connecting the markers. This is a custom component designed specifically for use in the SB Admin Pro theme.
Small Timeline Variant
01/01/2020
This is the content for the first timeline item.
02/02/2020
A second timeline item comes after the first item.
03/03/2020
The first and last items do not extend the border to the next marker.
04/04/2020
This is the last item. The last item will not show a line after it's respective timeline marker.
//- Timeline component
.timeline.timeline-sm
    .timeline-item
        .timeline-item-marker
            .timeline-item-marker-text
                | ...
            .timeline-item-marker-indicator
                i(data-feather='check')
        .timeline-item-content
            | First item
    .timeline-item
        .timeline-item-marker
            .timeline-item-marker-text
                | ...
            .timeline-item-marker-indicator
                i(data-feather='check')
        .timeline-item-content
            | Second item
    .timeline-item
        .timeline-item-marker
            .timeline-item-marker-text
                | ...
            .timeline-item-marker-indicator
                i(data-feather='check')
        .timeline-item-content
            | Third item
Append the .timeline component with the .timeline-sm class to use a smaller, more condensed version of the timeline. Keep in mind also that using icons is optional!
Extra Small Timeline Variant
01/01/2020
This is the content for the first timeline item.
02/02/2020
A second timeline item comes after the first item.
03/03/2020
The first and last items do not extend the border to the next marker.
04/04/2020
This is the last item. The last item will not show a line after it's respective timeline marker.
//- Timeline component
.timeline.timeline-xs
    .timeline-item
        .timeline-item-marker
            .timeline-item-marker-text
                | ...
            .timeline-item-marker-indicator
        .timeline-item-content
            | First item
    .timeline-item
        .timeline-item-marker
            .timeline-item-marker-text
                | ...
            .timeline-item-marker-indicator
        .timeline-item-content
            | Second item
    .timeline-item
        .timeline-item-marker
            .timeline-item-marker-text
                | ...
            .timeline-item-marker-indicator
        .timeline-item-content
            | Third item
Append the .timeline component with the .timeline-xs class for an even smaller timeline component variation. At this size, we do not recommend adding content to the timeline item marker, and have not include any content within that element in the examples above. Instead, you can add context to the timeline marker by using utility classes to change the background color of each marker element.
Styled Timeline Component Example
01/01/2020
Beginning
This is the content for the first timeline item. In this styled example, we're styling the timeline marker with background and typography utility classes. We've also shown that you can use the card component within the timeline item content.
02/02/2020
Second Item
This is the content for the second timeline item. In this timeline example, we're also using some spacing utilities on the timeline item content to remove the padding from the top of that element.
03/03/2020
Third Item
This is the content for the third timeline item. Keep in mind this is just an example of what you can put within the timeline item content. There are many other ways you can use this timeline, and it's fully responsive too!
04/04/2020
Last Item
You can use different icons in the icon markers, letters, or no icons at all if you just want a blank circle. 
//- Styled timeline component example
.timeline
    .timeline-item
        .timeline-item-marker
            .timeline-item-marker-text
                | 01/01/2020
            .timeline-item-marker-indicator.bg-primary-soft.text-primary
                i(data-feather='flag')
        .timeline-item-content.pt-0
            .card.shadow-sm
                .card-body
                    h5.text-primary Beginning
                    | This is the content for the first timeline item. In this styled example, we're styling the timeline marker with background and typography utility classes. We've also shown that you can use the card component within the timeline item content.
    .timeline-item
        .timeline-item-marker
            .timeline-item-marker-text
                | 02/02/2020
            .timeline-item-marker-indicator.bg-success-soft.text-success
                i(data-feather='gift')
        .timeline-item-content.pt-0
            .card.shadow-sm
                .card-body
                    h5.text-success Second Item
                    | This is the content for the second timeline item. In this timeline example, we're also using some spacing utilities on the timeline item content to remove the padding from the top of that element.
    .timeline-item
        .timeline-item-marker
            .timeline-item-marker-text
                | 03/03/2020
            .timeline-item-marker-indicator.bg-secondary-soft.text-secondary
                i(data-feather='map')
        .timeline-item-content.pt-0
            .card.shadow-sm
                .card-body
                    h5.text-secondary Third Item
                    | This is the content for the third timeline item. Keep in mind this is just an example of what you can put within the timeline item content. There are many other ways you can use this timeline, and it's fully responsive too!
    .timeline-item
        .timeline-item-marker
            .timeline-item-marker-text
                | 04/04/2020
            .timeline-item-marker-indicator.bg-warning-soft.text-warning
                i(data-feather='send')
        .timeline-item-content.pt-0
            .card.shadow-sm
                .card-body
                    h5.text-warning Last Item
                    | You can use different icons in the icon markers, letters, or no icons at all if you just want a blank circle.
Use built in utility classes to change the presentation of the timeline content and the styling of the timeline markers.