Skip to main content
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.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.

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

The Pricing editor, with the cards updating beside it.

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.
  • 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 cardsThe 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.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. 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.
Give the section its own background color, from your site’s palette or a custom color. See What every section shares.
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.
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.
Custom styles for this section only. Admins and Owners can change this tab. See Custom CSS.

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.2 left-aligned cards side by side ("Puppy Kindergarten" and "Basic Manners"), no highlight, Outline card style, with crossed-out features on the first.

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

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.3 cards with the pointer over the first one, showing the Selection ring hover: an accent ring around the card and the price tinted.

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, 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 for every option.

Feature Cards

cards for benefits or services without prices.

Final CTA

a bold closing band with buttons.

Buttons and card styles

every button and card option.

Side-by-side layouts

put Pricing in a column.