> ## 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.

# Feature Cards

> A grid of cards, each with an icon, a title and a short text, optionally numbered 01, 02, 03.

Feature Cards shows your offers or key points as a grid of cards. Each card has an icon, a title and a short text. When the cards are a sequence, they can carry big numbers (01, 02, 03).

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

![Parker's 4 Feature Cards as visitors see them: Daycare, Training, Puppy socials, Grooming, each with an icon, a title, a short text and an outlined index number.](https://mintcdn.com/fetchski-attract-api/OLdYoUpjyEyrK8L8/images/cms/guides/sections/feature-cards/guides-sections-feature-cards-overview-light.png?fit=max\&auto=format\&n=OLdYoUpjyEyrK8L8\&q=85\&s=ac3f15631299f058ac533106b8026944)

Four feature cards with icons and index numbers.

## When to use it

* To list your main services or offers, one card each.
* To show what makes you different in 3 or 4 short points.
* To walk visitors through a short sequence, with the cards numbered 01, 02, 03.
* Inside a blog post, to sum up key points.

Feature Cards has no heading of its own. To introduce the cards, put an **Intro / Trust** section or a **Rich Text** heading just above them.

## 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** → **Feature Cards**. It starts with 4 sample cards. Replace their text, or remove the ones you don't need. To add, reorder or remove cards, see [Lists of items](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md#lists-of-items).

![The Add Content menu open on the Content group, with the Feature Cards tile ringed.](https://mintcdn.com/fetchski-attract-api/l0eBwtzJpLtH9LWE/images/cms/guides/sections/feature-cards/guides-sections-feature-cards-add-menu-light.png?fit=max\&auto=format\&n=l0eBwtzJpLtH9LWE\&q=85\&s=727d2046d800709a31925d2f7758acf0)

Feature Cards 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 Feature Cards editor beside the live cards, with its four tabs (Feature Cards, Background, Fonts, CSS) ringed and the Feature cards list (4 added, with an Edit Feature cards button) ringed.](https://mintcdn.com/fetchski-attract-api/l0eBwtzJpLtH9LWE/images/cms/guides/sections/feature-cards/guides-sections-feature-cards-editor-light.png?fit=max\&auto=format\&n=l0eBwtzJpLtH9LWE\&q=85\&s=f0d059f5855273dc69a167521c6289a1)

The card list, with the page updating beside it.

> [accordion] Feature Cards
>
> The cards themselves, and how the grid and the cards look. Some options appear only once you turn on the one they belong to.
>
> **The cards** (in the **Feature cards** list)
>
> * **Title**: the card's heading. It's required.
> * **Text**: one or two sentences.
> * **Icon name**: any Font Awesome icon name, such as "dog", "graduation-cap" or "scissors". Find names at [fontawesome.com/icons](https://fontawesome.com/icons) and type them without "fa-". Pick its look with **Icon family**, such as **Classic Regular**.
> * **Icon color**: leave it empty, and the cards take turns using your site's accent, secondary and tertiary colors.
> * **Icon size** and **Icon animation**: make the icon bigger or smaller than the card's usual size, or animate it, for example with **Bounce** or **Spin**.
>
> Drag the cards in the list to change their order.
>
> **Grid**
>
> * **Cards per row**: **Auto (fit to width)** fits as many as look good, for any number of cards. Or choose **2 per row**, **3 per row** or **4 per row**.
> * **Gap between cards**: **Tight**, **Normal** or **Roomy**.
> * **Card size**: **Small**, **Medium** or **Large**. It scales the space inside each card, the icon, the title and the number together.
>
> **Card style**
>
> * **Card style**: how each card looks at rest. It starts on **Poster — accent keyline**, a card framed by a thin line in your accent color. There are 12 styles to choose from.
> * **Card corners**: from **Square** to **Large**. **Default** keeps the cards' own corners.
> * Some styles also offer a **Card style color** and, for **Forge**, **Forge color placement** and **Forge line weight**.
>
> See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md) for every card style.
>
> **Hover**
>
> * **Card hover effect**: what a card does when a visitor points at it: **Lift**, **Pop (accent frame + lift)**, **Glow**, **Border only** or **None**. It starts on **Pop (accent frame + lift)**.
> * **Hover accent color (dark theme)** and **Hover accent color (light theme)**: the color of the hover border or glow. Empty uses your accent color.
>
> **Numbers**
>
> * **Show index numbers**: a big outlined number on each card (01, 02, 03). Turn it off when the cards are separate services or points, not steps in a sequence.
> * **Number fill**: **All numbers solid**, **Fill on hover** or **Always outlined**. It starts on **Fill on hover**.
> * **Number color (dark theme)** and **Number color (light theme)**: the number's color. Empty uses your site's text color.
>
> **Text on every card**
>
> * **Title color (dark theme)**, **Title weight**, **Text color (dark theme)** and **Text weight**: one setting for all the cards at once. Titles start **Bold** and text starts **Normal**.
>
> Each color can be set separately for the dark and light themes. Leave the light one empty to use the dark one in both.

> [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 card titles. 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 one card, the index numbers or the icons. 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

![3 numbered Feature Cards as a sequence: "Book a tour", "Meet and greet", "First day of play", with solid index numbers and the Spine card style.](https://mintcdn.com/fetchski-attract-api/OLdYoUpjyEyrK8L8/images/cms/guides/sections/feature-cards/guides-sections-feature-cards-steps-light.png?fit=max\&auto=format\&n=OLdYoUpjyEyrK8L8\&q=85\&s=1a64fe29ca95f4edf6577226cc2d0418)

Numbered cards for a three-step sequence.

**A three-step sequence.** Keep 3 cards, set **Cards per row** to **3 per row**, choose **Spine — accent rail**, and set **Number fill** to **All numbers solid**.

![4 Feature Cards with no numbers, in the Raised style, on the Sunken band, with the Glow hover on one card.](https://mintcdn.com/fetchski-attract-api/OLdYoUpjyEyrK8L8/images/cms/guides/sections/feature-cards/guides-sections-feature-cards-quiet-light.png?fit=max\&auto=format\&n=OLdYoUpjyEyrK8L8\&q=85\&s=ea506a188bcb8d3bd277dd2791885d7d)

Quiet raised cards with a soft glow on hover.

**A calm services row.** Turn off **Show index numbers**, choose **Raised — lit soft card** and **Glow**, and give the section a **Sunken** band.

![2 large Feature Cards side by side, with big icons, in the Tint card style, no numbers.](https://mintcdn.com/fetchski-attract-api/OLdYoUpjyEyrK8L8/images/cms/guides/sections/feature-cards/guides-sections-feature-cards-large-icons-light.png?fit=max\&auto=format\&n=OLdYoUpjyEyrK8L8\&q=85\&s=f79171fe14e8162aabe175ff29c670f1)

Two big cards for your two main offers.

**Two big offers.** Keep 2 cards, set **Cards per row** to **2 per row** and **Card size** to **Large**, make the icons bigger, and choose **Tint — accent wash**.

## Good to know

* **The card titles are headings.** Feature Cards has no heading of its own, so each card title is a main section heading, in order for screen readers and search engines wherever the section sits. To introduce the cards, put an **Intro / Trust** section or a **Rich Text** heading just above them.
* **Keep the cards about the same length.** Cards in a row line up best when their texts are close in length.
* **Decorative icons stay silent.** Screen readers skip the icons and read the titles and text.
* **Hover effects respect reduced motion.** Visitors who prefer less motion see the cards without the lift.
* **Animations play for visitors only.** While you edit, the cards show their 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] [How it works / Steps](https://docs.fetchski-attract.com/guides/sections/steps.md)
>
> a numbered process with a connector line.

> [card] [Pricing / Packages](https://docs.fetchski-attract.com/guides/sections/pricing.md)
>
> cards with prices and buttons.

> [card] [Intro / Trust](https://docs.fetchski-attract.com/guides/sections/intro-trust.md)
>
> a headline to put above your cards.

> [card] [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md)
>
> every card style in depth.


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