---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/en/artikel/pricing-page-with-plan-cards-and-comparison-table"
locale: en
meta:
  "og:title": "Academy Article"
---

[Go to home](https://academy.laioutr.com/en)

- [Storefront features](https://academy.laioutr.com/en/bereiche/storefront-features)

- [Content and navigation](https://academy.laioutr.com/en/leitfaeden/content-and-navigation)

- [Build a pricing page with plan cards and a comparison table](https://academy.laioutr.com/en/artikel/pricing-page-with-plan-cards-and-comparison-table)

# Build a pricing page with plan cards and a comparison table

A pricing page is built in Studio from the Plan Card Slider for the plans and the Plan Comparison Table for the feature comparison. A switch changes all cards between monthly and annual billing, and the table filters to differences and keeps its header visible.

## Before you start

<dl>

<dt>Plan</dt>
<dd>Laioutr UI licence for the project (platform edition)</dd>

<dt>Role</dt>
<dd>Editor or Admin in the project</dd>

<dt>Duration</dt>
<dd>9 min</dd></dl>

### Prerequisites

- Plans with features and prices as input
- Target pages for sign-up, demo or contact

Last reviewed on October 15, 2026

For subscription and SaaS offers, Laioutr UI provides building blocks for pricing pages. They present plans transparently and lead straight to sign-up, a demo or contact.

### Plan Card and Plan Card Slider

A **Plan Card** shows a plan with name, price, included and excluded features, number of seats and a button. With annual billing, the lower price appears and the monthly price is struck through. The **Plan Card Slider** shows several plans side by side on desktop and as a swipeable carousel on mobile. A switch between monthly and annual billing updates every card at once. Amounts appear in the currency and number format of the active market.

### Plan Comparison Table

The **Plan Comparison Table** compares every feature row by row. Features can be grouped into sections with anchors, linked and filtered to show differences only. The header row with one button per plan stays in place while scrolling.

## Step by step

1. 1 ### Step 1: Create the page

   Create or open a pricing page in Studio and place a short introduction with a heading at the top.
2. 2 ### Step 2: Add plans as cards

   Add the **Plan Card Slider** and maintain name, price, annual price, included and excluded features as well as button text and link for each plan.
3. 3 ### Step 3: Place the billing switch

   Place the switch between monthly and annual billing above the cards, not inside them. This keeps it visible on mobile while swiping through the cards.
4. 4 ### Step 4: Build the comparison table

   Add the **Plan Comparison Table** below. Group features into sections, give every section an anchor and link features to detail pages where useful.
5. 5 ### Step 5: Define the buttons

   Decide for every plan where the button leads: to sign-up, to a demo booking or to the contact form.
6. 6 ### Step 6: Check on mobile and publish

   Check the mobile view in the preview, swipe through the cards and scroll the table. Use **Save** to store the draft and **Publish** once everything looks right.

## Check the result

Switch between monthly and annual billing in the preview and check that all cards change at once. Scroll down the comparison table, check the sticky header and try the differences-only filter.

## Frequently asked questions

How many plans can be shown?

The Plan Card Slider takes any number of plans, from two to longer ladders. On desktop the plans sit side by side, and on mobile they become a carousel with dots for orientation.

Does every plan have to be bookable online?

No. The button of every card and every column leads to a freely chosen target, such as sign-up, a demo booking or the contact form.

How can shared features be hidden?

The comparison table has a filter that only shows rows with differences between plans. This keeps the comparison focused on what drives the decision.

Which currency do the cards show?

Amounts are shown in the currency and number format of the active market. Additional markets do not need separate cards.

## Related

- [Growth Kits: building blocks for each business model](https://academy.laioutr.com/en/artikel/growth-kits-building-blocks-per-business-model)5 min

  Growth Kits are packages of Sections, Blocks, page templates and features for one business model: Shop, Content, Booking, Marketplace, Retail and Multichannel, SaaS, Publisher and Lists. Teams combine several kits in one project and find the building blocks in the Section library in Studio.
- [Build a landing page from existing sections](https://academy.laioutr.com/en/artikel/build-a-landing-page-from-existing-sections)10 min

  A landing page is created in Studio as a Landing Page type page with its own path and is assembled from installed sections: hero, content, a product slider with shop data, and header and footer as global sections.
- [Maintain markets and translations in Studio](https://academy.laioutr.com/en/artikel/maintain-markets-and-translations-in-studio)6 min

  Languages and markets are set up in Cockpit under Translations and Markets, and Studio uses them in its market and language switcher. Translatable fields are maintained per language; empty fields show the value of the fallback language.
- [Content sections: hero, banners, grids, quotes, logos and promotion](https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos)8 min

  Laioutr UI ships ready-made content sections such as Hero Slider, CTA banners, card grids, testimonials, USP Banner, Logo Slider, gallery and Promotion Banner. Editors place them in Studio, fill them with their own content and adjust size, alignment and background.

## [Content and navigation](https://academy.laioutr.com/en/leitfaeden/content-and-navigation)

Search this guide

1. [Content sections: hero, banners, grids, quotes, logos and promotion](https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos)8 min
2. [Images and video, popups, notifications and in-page navigation](https://academy.laioutr.com/en/artikel/images-video-popups-notifications-in-page-navigation)7 min
3. [Set up shop navigation and footer](https://academy.laioutr.com/en/artikel/set-up-shop-navigation-and-footer)10 min
4. [Build a blog with overview and article pages](https://academy.laioutr.com/en/artikel/build-a-blog-with-overview-and-article-pages)8 min
5. [Set up the store locator and store pages](https://academy.laioutr.com/en/artikel/set-up-store-locator-and-store-pages)8 min
6. [Build a pricing page with plan cards and a comparison table](https://academy.laioutr.com/en/artikel/pricing-page-with-plan-cards-and-comparison-table)9 min

## Structured Data

```json
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@id": "https://academy.laioutr.com/#website",
      "@type": "WebSite",
      "inLanguage": "en",
      "name": "Default",
      "url": "https://academy.laioutr.com/",
      "translationOfWork": {
        "@id": "https://academy.laioutr.com/#website"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/pricing-page-with-plan-cards-and-comparison-table#webpage",
      "name": "Academy Article",
      "url": "https://academy.laioutr.com/en/artikel/pricing-page-with-plan-cards-and-comparison-table",
      "@type": [
        "WebPage",
        "FAQPage"
      ],
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/en/artikel/pricing-page-with-plan-cards-and-comparison-table#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "mainEntity": [
        {
          "@id": "https://academy.laioutr.com/en/artikel/pricing-page-with-plan-cards-and-comparison-table#/schema/question/1"
        },
        {
          "@id": "https://academy.laioutr.com/en/artikel/pricing-page-with-plan-cards-and-comparison-table#/schema/question/2"
        },
        {
          "@id": "https://academy.laioutr.com/en/artikel/pricing-page-with-plan-cards-and-comparison-table#/schema/question/3"
        },
        {
          "@id": "https://academy.laioutr.com/en/artikel/pricing-page-with-plan-cards-and-comparison-table#/schema/question/4"
        }
      ],
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/en/artikel/pricing-page-with-plan-cards-and-comparison-table"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/pricing-page-with-plan-cards-and-comparison-table#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/en",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Storefront features",
          "item": "https://academy.laioutr.com/en/bereiche/storefront-features",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Content and navigation",
          "item": "https://academy.laioutr.com/en/leitfaeden/content-and-navigation",
          "position": 3
        },
        {
          "@type": "ListItem",
          "name": "Build a pricing page with plan cards and a comparison table",
          "item": "https://academy.laioutr.com/en/artikel/pricing-page-with-plan-cards-and-comparison-table",
          "position": 4
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/pricing-page-with-plan-cards-and-comparison-table#/schema/question/1",
      "@type": "Question",
      "inLanguage": "en",
      "name": "How many plans can be shown?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>The Plan Card Slider takes any number of plans, from two to longer ladders. On desktop the plans sit side by side, and on mobile they become a carousel with dots for orientation.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/pricing-page-with-plan-cards-and-comparison-table#/schema/question/2",
      "@type": "Question",
      "inLanguage": "en",
      "name": "Does every plan have to be bookable online?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>No. The button of every card and every column leads to a freely chosen target, such as sign-up, a demo booking or the contact form.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/pricing-page-with-plan-cards-and-comparison-table#/schema/question/3",
      "@type": "Question",
      "inLanguage": "en",
      "name": "How can shared features be hidden?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>The comparison table has a filter that only shows rows with differences between plans. This keeps the comparison focused on what drives the decision.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/artikel/pricing-page-with-plan-cards-and-comparison-table#/schema/question/4",
      "@type": "Question",
      "inLanguage": "en",
      "name": "Which currency do the cards show?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Amounts are shown in the currency and number format of the active market. Additional markets do not need separate cards.</p>"
      }
    }
  ]
}
```