> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/tutorials/components/header/crafting-a-profile-header.md).

# Crafting a Profile Header

## Overview

In this tutorial, you'll learn to design a screen flow featuring an attractive profile card using the Header component. We'll guide you through personalizing the header's design and features, and show you how to tailor various sections to resemble a profile header. Let's dive in!

## Result

<figure><img src="/files/PNwzuGiZCSlLDf6qoL9g" alt=""><figcaption></figcaption></figure>

## Steps

### Create the screen flow

Type Flow in the setup menu

* Click on the "**New Flow**" button to create a new flow
* Select "**Screen Flow**"

{% @arcade/embed url="<https://app.arcade.software/share/qSuQYiG2FCYgKnf5UdOs>" flowId="qSuQYiG2FCYgKnf5UdOs" %}

### Create a Get Records collection

Creating a "get records" collection is useful for fetching contact information from our Salesforce. This allows efficient retrieval of the contact data we need for this example. Additionally, by creating a "get records" collection, the process of retrieving the information can be automated and streamlined, saving time and reducing potential errors.

#### Adding the Get Records element

* Click on the + sign
* Select the "Get Records" element
* Enter a Get Records collection label
* Select the "Contact" object to get the contact records information

{% @arcade/embed url="<https://app.arcade.software/share/U1fJ0ZXno7flu7mL6n2o>" flowId="U1fJ0ZXno7flu7mL6n2o" %}

#### Creating the RecordID variable

We will now create a variable resource to store the current record ID. It will allow us to easily reference and use that information throughout our flow. Getting the contact record ID in a variable will be very useful to pass this into our data processing and manipulation flow.

Steps to follow to create the filter condition:

* In the field box, select ID
* **`Operator`**: Equals
* Select "New Resource" in the Value field to create the ContactID variable.
  * **`Resource Type`**: Variable
  * **`API Name`**: ContactID
  * **`Data Type`**: Record
  * **`Object`**: Contact
  * **`Available for input`**
  * Select ID from our new created variable.
  * Click "Done" and "Done"<br>

{% @arcade/embed url="<https://app.arcade.software/share/24a1qiYbVXV9w2QvNvpz>" flowId="24a1qiYbVXV9w2QvNvpz" %}

### Add the Header Component

#### Header component configuration

* Add a screen element
  * Enter an API name
  * Hide Header and Footer
* Drag the Header component
* **`Title`**: Record.FullName (by clicking on the Mapped button to map the correct field for the title)
* **`Caption`**: title
* **`Background image:`** add your image
* **`Is Joined`**: true
* **`Pull to Boundary`** true
* **`Is Text outsize`**: true
* **`Avatar`**:
  * **`Size`**: Xx large
  * Image =\\> Upload image
  * **`Position`**: Bottom Center

{% @arcade/embed url="<https://app.arcade.software/share/KZbGIkW5IbU9SByMZWq6>" flowId="KZbGIkW5IbU9SByMZWq6" %}

{% hint style="warning" %}
When using this example on your Salesforce, don't forget [to pass the RecordID](/flow/tutorials/tips-and-tricks/how-to-pass-your-current-recordid-in-your-screen-flow.md) when using App Builder to fetch the record ID information
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/flow/tutorials/components/header/crafting-a-profile-header.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.