Interactive cards with flow

[marektonik]

hey! We have quite advanced component in Segment that allows users to switch between different places and content. In the designated red box area, I've emphasized interactive cards that serve as clickable elements. These cards essentially function as tabs, dynamically altering the content below to display specific details for each corresponding step. I'm curious if you have any insights on how we could replicate this functionality using Paste components. Your thoughts and suggestions would be greatly appreciated, thanks 🙏🏻

[nkrantz]

Hi @marektonik - we don't have a component that would fit this use case out of the box. In order to replicate this exact behavior, you have a few options. You can use Box and Text primitives to build and style these custom components. You could also use Tabs to control which view is shown below the interactive cards. The Tabs component has a state hook that allows you to maintain control which tab is selected, so you could build the cards out of Reset Buttons, or Cards with "Details" Buttons inside them, to control the view.

[SiTaggart]

Hi there,

After further investigation on this particular design, we would strongly recommend using the Visual Picker which was released roughly around the same time as this discussion was created.

It's not perfect, but after being able to understand the user interaction of this screen further, we believe it is the best affordance we can give a user from an accessibility perspective. The visual Picker allows for a choice select to be made (in a visually appealing manner), whilst also being able to respond to that selection to display different content underneath and provide futher interactive content on each card such as tooltips and links within it.

Thanks