> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fetchski-attract.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Intro / Trust

> A headline and a paragraph about who you are, with an optional photo beside or behind them.

The Intro / Trust section tells visitors who you are, right after your opening. It holds a short eyebrow, a headline and a paragraph, with an optional photo beside the text or filling the section behind it.

 **Who can do this:** anyone who can edit the page. The **CSS** tab is for Admins and Owners.

![Parker's home page Intro / Trust as visitors see it: eyebrow "Since 2018", headline "Happy dogs, happy humans.", 2 sentences of body copy and a photo on the right.](https://mintcdn.com/fetchski-attract-api/Nd5MQAxOTNHgiQxt/images/cms/guides/sections/intro-trust/guides-sections-intro-trust-overview-light.png?fit=max\&auto=format\&n=Nd5MQAxOTNHgiQxt\&q=85\&s=1049f45fee5978679eb80271da11f8c4)

An Intro / Trust section with a photo on the right.

## When to use it

* Right after a Hero, to say in a few lines who you are and why people choose you.
* On an About page, to tell your story beside a photo of your team or your place.
* Anywhere you want one clear message over a full-width photo.
* Inside a column or a blog post, as a short highlighted message.

## Add it to a page

**1. Open the page**

Sign in, open the page on your site, and choose **Edit** in the edit bar at the top.

**2. Find the spot**

Select the section next to where the new one should go. A round **+** button appears on its top and bottom edges. On an empty page, choose **Add Content** in the middle.

**3. Choose the section**

The **Add Content** menu opens with its groups. Choose the section, then select it and choose **Edit** in its side toolbar to make it yours.

For the full walkthrough, see [Add, move and remove sections](https://docs.fetchski-attract.com/guides/build-pages/add-move-remove-sections.md).

Choose **Add Content** → **Content** → **Intro / Trust**. It usually comes right after the **Hero** or the **Page Header**.

![The Add Content menu open on the Content group, with the Intro / Trust tile ringed.](https://mintcdn.com/fetchski-attract-api/QcMtbPjPXDGpHtJh/images/cms/guides/sections/intro-trust/guides-sections-intro-trust-add-menu-light.png?fit=max\&auto=format\&n=QcMtbPjPXDGpHtJh\&q=85\&s=0ca4ab7df5ede02dcdebc799dfac728b)

Intro / Trust is in the Content group.

## What you can change

Select the section on the page and choose **Edit**. The editor opens beside the page, so you see each change as you make it. It has four tabs.

Your changes go into the page's draft. Visitors see them once the page is published with **Update** in the edit bar (**Publish** on a page never published).

![The Intro / Trust editor open on its first tab beside the live section, with the four tabs (Intro / Trust, Background, Fonts, CSS) ringed and the Photo placement select open.](https://mintcdn.com/fetchski-attract-api/QcMtbPjPXDGpHtJh/images/cms/guides/sections/intro-trust/guides-sections-intro-trust-editor-light.png?fit=max\&auto=format\&n=QcMtbPjPXDGpHtJh\&q=85\&s=6adea0ed3aa762512aadf7d058490a52)

The Intro / Trust editor, with the section updating beside it.

> [accordion] Intro / Trust
>
> The words, the photo and how they look. Some photo options appear only for the placement they belong to.
>
> **Text**
>
> * **Eyebrow**: a short line above the headline, such as "Since 2015". Clear it to hide the eyebrow.
> * **Headline**: your message in one line, such as "Happy dogs, happy humans."
> * **Body copy**: the paragraph under the headline ("copy" means text). Two or three sentences that back the headline up work best.
> * Each one has its own color and weight. The eyebrow also has **Eyebrow size**. Colors come in pairs for the dark and light themes, and empty colors use your site's colors.
>
> **Photo**
>
> * **Photo placement**: **None (text only)**, **Left of text**, **Right of text** or **Full-section background**. It starts on **Right of text**.
> * **Photo**: the picture to show. Until you choose one, the section shows text only.
>
> **Photo beside the text** (Left of text or Right of text)
>
> * **Photo corners**: **Rounded** or **Squared**.
> * **Photo frame**: **None**, **Border** or **Offset frame**, an accent-colored frame set just behind the photo. **Frame color** changes its color.
> * **Photo tilt**: **None**, **Tilt left** or **Tilt right**, for a more playful look.
> * **Photo hover effect**: what the photo does when a visitor points at it: **Lift**, **Zoom**, **Tilt**, **Glow**, **Lift & Glow**, **Zoom & Glow** or **None**.
>
> **Photo behind the text** (Full-section background)
>
> * **Overlay color (dark theme)** and **Overlay color (light theme)**: a tint over the photo that keeps the text readable. Empty uses your page background color.
> * **Overlay opacity (%)**: how strong the tint is. It starts at 55%. Raise it if the text is hard to read.

> [accordion] Background
>
> Give the section its own full-width color band, separately for the dark and light themes. It starts on **Transparent (page background)**. See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md).

> [accordion] Fonts
>
> Use a different typeface for parts of this section only, such as the headline. Leave it empty to use the page's fonts, which normally come from **Site design** → **Typography**. See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md).

> [accordion] CSS
>
> Custom styles for this section only, such as its headline, its body text or the photo frame. Admins and Owners can change this tab. See [Custom CSS](https://docs.fetchski-attract.com/guides/site-design/custom-css.md).

## Looks you can make

![An Intro / Trust with the photo on the left, an accent Offset frame behind it and a slight right tilt.](https://mintcdn.com/fetchski-attract-api/Nd5MQAxOTNHgiQxt/images/cms/guides/sections/intro-trust/guides-sections-intro-trust-offset-tilt-light.png?fit=max\&auto=format\&n=Nd5MQAxOTNHgiQxt\&q=85\&s=cb2b2dfb7e322efa8b938d26757c0209)

An offset frame and a small tilt add personality.

**A playful story block.** Set **Photo placement** to **Left of text**, choose an **Offset frame**, and set **Photo tilt** to **Tilt right**.

![An Intro / Trust over a full-width photo of puppies in the play yard, with a dark tint and the text in front.](https://mintcdn.com/fetchski-attract-api/Nd5MQAxOTNHgiQxt/images/cms/guides/sections/intro-trust/guides-sections-intro-trust-background-photo-light.png?fit=max\&auto=format\&n=Nd5MQAxOTNHgiQxt\&q=85\&s=f5ab2348f4bb00ac5805a30cbb3f6349)

A full-width photo behind the text.

**A full-width photo moment.** Set **Photo placement** to **Full-section background**, choose a wide photo, and set **Overlay opacity (%)** to about 60.

![A text-only Intro / Trust on the Sunken band: eyebrow, a large headline and body copy, no photo.](https://mintcdn.com/fetchski-attract-api/Nd5MQAxOTNHgiQxt/images/cms/guides/sections/intro-trust/guides-sections-intro-trust-text-only-light.png?fit=max\&auto=format\&n=Nd5MQAxOTNHgiQxt\&q=85\&s=200ad51684461caf147943ea03c92490)

Text only, on its own band.

**A quiet statement.** Set **Photo placement** to **None (text only)** and give the section a **Sunken** band on the **Background** tab.

## Good to know

* **The headline is a section heading, not the page's main heading.** The page's main heading comes from the **Hero** or **Page Header** at the top.
* **Write alt text for your photo.** Alt text is a short description that screen readers read aloud, such as "Two puppies playing tug-of-war on the lawn". To add it, open the command palette (⌘K, or Ctrl+K on Windows), choose **Images**, choose the photo, and fill in **Alt Text**. See [The media library](https://docs.fetchski-attract.com/guides/media/media-library.md).
* **Over a full-width photo, check both themes.** Use the light and dark switch in your site's header (inside the menu on phones) to make sure the text stays readable. The moon in the CMS toolbar changes only the CMS, not your site.
* **Hover effects respect reduced motion.** Visitors who prefer less motion see the photo without any hover effect.
* **Animations play for visitors only.** While you edit, the section shows its finished state.

## Appearance options

Most sections also share a few tabs that work the same everywhere:

* **Background**: set the color behind the section, separately for the dark and light themes.
* **Fonts**: use a different typeface for parts of this section only.
* **CSS**: add custom styles to this section. Admins and Owners can change it.

See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md) for every option.

## Related

> [card] [Hero](https://docs.fetchski-attract.com/guides/sections/hero.md)
>
> the opening that usually comes first.

> [card] [Media + Text block](https://docs.fetchski-attract.com/guides/sections/media-text.md)
>
> several photo and text blocks in a row.

> [card] [Side-by-side layouts](https://docs.fetchski-attract.com/guides/build-pages/side-by-side-layouts.md)
>
> put an Intro / Trust in a column.

> [card] [The media library](https://docs.fetchski-attract.com/guides/media/media-library.md)
>
> upload photos and write alt text.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.