Building Engaging Card Headers
Overview
Step into the world of custom screen flows with this tutorial focused on crafting engaging card headers using the Header component. We'll walk you through customizing both the look and functionality of your headers, ensuring they are visually striking and seamlessly integrated within your screen flows. Ready to elevate your screen flow design? Let's begin!
Result
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FTZ2WlrTLhjOTwYE3y1BO%252F2023-01-17_16-46-20.png%3Falt%3Dmedia%26token%3D2e52bf39-1270-48bb-aa77-f6742c31267c&width=768&dpr=4&quality=100&sign=3c7f3a21&sv=1)
Steps
Create the flow
Type Flow in the setup menu
Click on the "New Flow" button to create a new flow
Select "Screen Flow"
Add a Screen element
Drag a screen element with the following settings:
Enter a Screen API Name
Remove the Screen Header and Footer (if needed)
Add the Header Component
Drag the Header Component from the custom list (or type Avatar Group from the search box)
Enter an API Name
Open the Component Builder to access all the component's settings
Set the following settings:
Title
: My Card TitleIs Joined
: TruePull to Boundary
: TrueAvatar
:fallbackIconName
: standard:OpportunitySize
: Small
Last updated