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

# Pricing / Packages

> Lay out your plans, packages or services as cards, each with a price, a feature list and a button.

The Pricing / Packages section lays out what you sell as a row of cards. Each card has a name, a price, a short list of what's included and a button, and you can make one card stand out.

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

![Parker's Pricing / Packages section as visitors see it: eyebrow "Pricing", heading "Daycare that fits your week", an intro line and three cards (Half Day at \$28 a day, Full Day at \$42 a day highlighted with the Most popular badge, and the 10-Day Pack at \$380), each with its feature list and a button.](https://mintcdn.com/fetchski-attract-api/eWBaY8R4bYknXF5D/images/cms/guides/sections/pricing/guides-sections-pricing-overview-light.png?fit=max\&auto=format\&n=eWBaY8R4bYknXF5D\&q=85\&s=e4480d3126e09ca0cf894da9ea67dda9)

3 packages, with the most popular one highlighted.

## When to use it

* To compare plans or packages side by side, such as half-day and full-day daycare.
* To list services with a "starting at" price, such as training classes.
* To steer visitors to the option most people choose.

The price is plain text, so it fits any way you charge: "$45", "From $200", "Custom" or "Call for a quote".

## 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** → **Conversion** → **Pricing / Packages**. It starts with 3 sample cards, so it looks finished right away. Replace them with your own.

You can also put it inside columns, and in the body of a blog post.

## 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 5 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 Pricing / Packages editor open on the Pricing tab beside the live section, with the five tabs (Pricing, Background, Fonts, Buttons, CSS) ringed, above the Default highlight badge and the highlight accent color pickers.](https://mintcdn.com/fetchski-attract-api/CiExJglj9hDwNWhX/images/cms/guides/sections/pricing/guides-sections-pricing-editor-light.png?fit=max\&auto=format\&n=CiExJglj9hDwNWhX\&q=85\&s=5a30b9362fc0c92f424922f71526679f)

The Pricing editor, with the cards updating beside it.

> [accordion] Pricing
>
> Everything about the cards and the words above them.
>
> **Header**
>
> * **Show eyebrow** and **Eyebrow**: a short line above the heading. It starts as "Pricing".
> * **Heading**: the section's title. Leave it empty to hide the heading. To show just the cards, also turn off **Show eyebrow** and clear the intro line.
> * **Intro line**: one short sentence under the heading.
>
> Each part also has a weight and a size. Each color can be set separately for the dark and light themes.
>
> **Layout**
>
> * **Cards per row**: **Auto (fit to width)** works for any number of cards. Or choose **2 per row**, **3 per row** or **4 per row**. On phones the cards stack.
> * **Gap between cards**: **Tight**, **Normal** or **Roomy**.
> * **Card style** and **Card corners**: the look of every card. The default is **Raised — lit soft card**. A highlighted card always gets its own bold frame. See [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md).
> * **Alignment**: **Center** or **Left**, for the header and the text in each card.
> * **Equal-height cards**: on by default. Every card is as tall as the tallest, with the buttons lined up along the bottom.
> * **Show feature check marks**: on by default. A check mark shows before each included feature and a cross before each one that isn't. Turn it off for a plain list.
>
> **Hover and scroll**
>
> * **Card hover effect**: what a card does when a visitor points at it. The default is **Rise + underglow**. You can also choose **Selection ring**, **Spotlight wash**, **Checklist cascade**, **Tilt (3-D — needs motion on)** or **None**.
> * **Hover accent**: the color of the hover effect. Leave it empty to use the highlight color.
> * **Scroll-in animation**: how the cards appear as visitors scroll to them. **Featured-led rise** brings the highlighted card in last, to draw the eye. **Simple stagger** brings them in evenly, and **None** shows them still.
>
> **Card text and highlight**
>
> * **Card name size**, **Price size**, **Description size** and **Feature size**: set once here, so every card matches.
> * **Default highlight badge**: the ribbon a highlighted card shows, "Most popular" to start. Leave it empty for no automatic badge.
> * **Highlight accent**: the color of the highlighted card's frame and of every badge. Leave it empty to use your site's main color.
>
> **Pricing cards**
>
> The cards are a list in the **Pricing cards** field. Choose its **Edit Pricing cards** button to open the list, then **Add Item** to add a card. Drag cards to reorder them, and use the remove button beside one to delete it.
>
> Each card's **Features** list works the same way. See [Lists of items](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md#lists-of-items).
>
> For example, to add Parker's new "Puppy Social" package: choose **Add Item**, enter the **Name** "Puppy Social", the **Price** "\$30" and the **Period (optional)** "/ visit". Then open its **Features** list and add "Supervised group play" and "Photo update". Save the list.
>
> Each card has:
>
> * **Name**: the plan, package or service, such as "Full Day". It's required.
> * **Price**, **Period (optional)** and **Price note (optional)**: for example "\$42", "/ day" and "Includes a midday walk".
> * **Description (optional)**: a short line under the name.
> * **Features**: the list of what's included. Each **Feature** can have a **Note (optional)**, such as "up to 5". Turn off **Included** to show something this card doesn't have, crossed out.
> * **Highlight this card**: makes the card stand out, with a colored frame, a slight lift, the badge and the stronger button.
> * **Badge (optional)**: a ribbon such as "Best value". It works on any card and replaces the default badge.
> * **Text alignment**: **Normal** follows the section. **Left**, **Center** and **Right** change this card only. **Center** also centers its feature list.
> * **Icon name**: an optional icon at the top of the card. Type any Font Awesome icon name, such as "paw" or "star", without "fa-". Find names at [fontawesome.com/icons](https://fontawesome.com/icons). Then set its **Icon family**, **Icon color**, **Icon size** and **Icon spacing**, and animate it if you like with **Icon animation**, for example **Bounce** or **Spin**.
> * **Button label (optional)**, **Button link (optional)** and **Open button in new tab**: this card's own button text and link. Each one is separate: leave the label empty to use the shared label, and the link empty to use the shared link. **Open button in new tab** counts only when the card has its own link.

> [accordion] Background
>
> Give the section its own background color, from your site's palette or a custom color. 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 prices. 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] Buttons
>
> This tab holds 2 button looks, shared by every card. The first is for highlighted cards, and starts as a solid "Get started" button. The second is for every other card, and starts as an outline "Choose plan" button. Both link to your Contact Us page to start.
>
> Set the label and link here once, and every card uses them: highlighted cards take the first button, every other card the second. A card's own **Button label (optional)** and **Button link (optional)** replace them for that card, one at a time.
>
> A button shows only when it ends up with both a label and a link. So:
>
> * **To hide every button**, clear both labels here and every card's own label.
> * **To hide one card's button**, clear the shared label for that kind of card (highlighted or not). Then give each other card of that kind its own **Button label (optional)**. To learn every button option, see [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md).

> [accordion] CSS
>
> Custom styles for this section only. 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

![2 left-aligned cards side by side ("Puppy Kindergarten" and "Basic Manners"), no highlight, Outline card style, with crossed-out features on the first.](https://mintcdn.com/fetchski-attract-api/eWBaY8R4bYknXF5D/images/cms/guides/sections/pricing/guides-sections-pricing-two-up-left-light.png?fit=max\&auto=format\&n=eWBaY8R4bYknXF5D\&q=85\&s=9408cc6fb80cf4aac9365906eccfa984)

2 classes compared, left-aligned.

**A simple comparison.** Set **Cards per row** to **2 per row**, **Alignment** to **Left**, and **Card style** to **Outline — plaque frame**.

![4 service cards in a row, each with an icon above the name, "From" prices, no feature check marks, and a "Best value" badge on the last card.](https://mintcdn.com/fetchski-attract-api/eWBaY8R4bYknXF5D/images/cms/guides/sections/pricing/guides-sections-pricing-services-menu-light.png?fit=max\&auto=format\&n=eWBaY8R4bYknXF5D\&q=85\&s=4d74591582770360aef0fca9caed302f)

A menu of services, each with its own icon.

**A menu of services.** Choose **4 per row**, give each card an **Icon name**, turn off **Show feature check marks**, and add a **Badge (optional)** to one card.

![3 cards with the pointer over the first one, showing the Selection ring hover: an accent ring around the card and the price tinted.](https://mintcdn.com/fetchski-attract-api/eWBaY8R4bYknXF5D/images/cms/guides/sections/pricing/guides-sections-pricing-hover-ring-light.png?fit=max\&auto=format\&n=eWBaY8R4bYknXF5D\&q=85\&s=10568b277a6512eb9480a5ca2d20e99b)

Selection ring previews the highlighted look on hover.

**A hover that invites a choice.** Set **Card hover effect** to **Selection ring**, so each card lights up like the highlighted one as visitors point at it.

## Good to know

* **Highlight one card.** One highlighted card makes the choice easy. With several, none of them stands out.
* **The scroll-in animation plays for visitors only.** While you edit, the cards show in their finished state. Visitors who prefer less motion, and sites with animations off in [Motion](https://docs.fetchski-attract.com/guides/site-design/motion.md), see the cards without it.
* **Tilt needs animations on.** **Tilt (3-D — needs motion on)** follows the pointer only when animations are on for your site.
* **Keep feature lists short.** **Equal-height cards** lines the buttons up, but a very long list makes every card tall.

## 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] [Feature Cards](https://docs.fetchski-attract.com/guides/sections/feature-cards.md)
>
> cards for benefits or services without prices.

> [card] [Final CTA](https://docs.fetchski-attract.com/guides/sections/final-cta.md)
>
> a bold closing band with buttons.

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

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


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