Use accordion as timeline content with FluxUI

I'm trying to build a user journey component, where an admin can see what a user has been doing in the app, like for example, signed-in, visited a page, downloaded a PDF, signed-out.

I'm using FluxUI and I thought I would use the Timeline component. However, I would like each timeline item to be an accordion. The admin would see the action the user has done, and if they want more information they can open the accordion.

<flux:timeline>
    <flux:timeline.item>
        <flux:timeline.indicator variant="bare">
            <flux:icon.log-in/>
        </flux:timeline.indicator>

        <flux:timeline.content>
            <flux:accordion>
                <flux:accordion.item>
                    <flux:accordion.heading>Signed in</flux:accordion.heading>

                    <flux:accordion.content>
                        The user has signed in using Microsoft SSO, at 15:33 on May 2nd, 2026
                    </flux:accordion.content>
                </flux:accordion.item>
            </flux:accordion>
        </flux:timeline.content>
    </flux:timeline.item>
</flux:timeline>

The timeline is ok when the accordion is close, but the I click on the chevron to open the accordion the timeline icon moves down, to be vertically centred I guess.

I there a way to prevent that? I would like the icon to stay align with the accordion heading.

LaryAI

6 hours ago

Level 58

Certainly! The issue you're experiencing is a common flexbox alignment quirk. By default, the flux:timeline.indicator and flux:timeline.content are most likely being vertically centered within the timeline item. When your accordion expands, the content area grows in height, causing the indicator (icon) to re-center, which makes it seem like it "moves down."

Goal:
You want the timeline indicator to remain aligned with the accordion heading, regardless of whether the accordion is open or closed.

Solution

What you want is to align the timeline indicator against the start (top) of the timeline.item instead of the center. With FluxUI, you often have access to additional utility classes or direct CSS styling. If not, you can use inline styles or custom CSS.

1. Use Flex Utilities or Styles

Check if FluxUI supports alignments on flux:timeline.item or flux:timeline.indicator. If it does, add something like items-start (if a TailwindCSS utility is available), or set align-items: flex-start via inline style or a class.

Example:

<flux:timeline>
    <flux:timeline.item>
        <flux:timeline.indicator variant="bare" style="align-self: flex-start;">
            <flux:icon.log-in/>
        </flux:timeline.indicator>

        <flux:timeline.content>
            <flux:accordion>
                <flux:accordion.item>
                    <flux:accordion.heading>Signed in</flux:accordion.heading>
                    <flux:accordion.content>
                        The user has signed in using Microsoft SSO, at 15:33 on May 2nd, 2026
                    </flux:accordion.content>
                </flux:accordion.item>
            </flux:accordion>
        </flux:timeline.content>
    </flux:timeline.item>
</flux:timeline>

style="align-self: flex-start;" keeps the indicator at the top, next to the accordion heading, no matter how tall the content gets.

2. Custom CSS (if needed)

If you need to use a CSS file:

.flux-timeline-indicator {
    align-self: flex-start !important;
}

Then add this class to your flux:timeline.indicator:

<flux:timeline.indicator class="flux-timeline-indicator" variant="bare">
    <flux:icon.log-in/>
</flux:timeline.indicator>

3. Verify Timeline Structure

If you have any wrappers (like flux:timeline.item), check if you can control their alignment too. Some timeline implementations set their flex direction or alignment on the parent rather than the child.

Summary

Add align-self: flex-start to the timeline indicator.
Or, use a utility class if your design system provides one.
This will keep the icon "pinned" to the top, aligned with the accordion's heading.

Let me know if FluxUI provides any specific classes or props for alignment—if so, use those in place of raw CSS!