Timeline item

The timeline item component represents a single event or entry within the timeline. It displays its content in alignment with the timeline’s structure, helping illustrate the order and progression of events.

Timeline component13 March 2023 1 PM

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci commodi debitis dolor dolores, ducimus facere, fugit id impedit ipsam mollitia nam nobis reiciendis temporibus vero. Accusamus in repellat voluptatibus.

WARNING

This component is best used within a Timeline.

Examples

Basic

A basic timeline item.

Preview

Timeline component13 March 2023 1 PM

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci commodi debitis dolor dolores, ducimus facere, fugit id impedit ipsam mollitia nam nobis reiciendis temporibus vero. Accusamus in repellat voluptatibus.

Code

<template>
    <div style="height: 180px;">
        <FluxTimelineItem
            icon="cubes"
            when="13 March 2023 1 PM"
            title="Timeline component">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci commodi debitis dolor dolores, ducimus facere, fugit id impedit ipsam mollitia nam nobis reiciendis temporibus vero. Accusamus in repellat voluptatibus.
        </FluxTimelineItem>
    </div>
</template>

<script
    setup
    lang="ts">
    import { FluxTimelineItem } from '@flux-ui/components';
</script>

Pane

A basic timeline item inside a pane.

Preview

Timeline component13 March 2023 1 PM

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci commodi debitis dolor dolores, ducimus facere, fugit id impedit ipsam mollitia nam nobis reiciendis temporibus vero. Accusamus in repellat voluptatibus.

Code

<template>
    <FluxPane>
        <FluxPaneBody>
            <FluxTimelineItem
                icon="cubes"
                when="13 March 2023 1 PM"
                title="Timeline component">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci commodi debitis dolor dolores, ducimus facere, fugit id impedit ipsam mollitia nam nobis reiciendis temporibus vero. Accusamus in repellat voluptatibus.
            </FluxTimelineItem>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxPane, FluxPaneBody, FluxTimeline, FluxTimelineItem } from '@flux-ui/components';
</script>

Used components

• Icon