# Pricing sections > Plan cards in many styles, billing switches and full comparison tables with grouped features and tooltips. URL: https://apogee.avaui.dev/docs/pricing-sections Last updated: 2026-10-20 Plan cards in many styles, billing switches and full comparison tables with grouped features and tooltips. Last updated October 20, 2026 Each example is a block: a [Section](https://apogee.avaui.dev/docs/section) with a [SectionHeader](https://apogee.avaui.dev/docs/section-header) and plan cards built from Heading, Button, Badge and FeaturedIcon, or a comparison [Table](https://apogee.avaui.dev/docs/table). - **Billing switch.** Both prices are in the page. The switch is a [SegmentedControl](https://apogee.avaui.dev/docs/segmented-control) (or a [Switch](https://apogee.avaui.dev/docs/switch)), and a CSS `:has()` rule on the wrapper shows the annual prices while “annual” is checked. No JS. - **Comparison tables** show one table on wide screens and a stacked table per plan on phones. Each feature name has a [Tooltip](https://apogee.avaui.dev/docs/tooltip) with a short explanation. ```sh npx @ava-ui/apogee add pricing/simple-cards-01 ``` ## Copy is props Every block in this family takes the same content props (`PricingContent` in `sections/_shared/pricing.ts`), with its sample copy as the defaults. A block ignores the props it has no place for, so you can swap one block for another and keep the copy. The [Pricing](https://apogee.avaui.dev/docs/sections/pricing) section takes the same names for the props they share. - `eyebrow`: The small label above the heading. - `heading`: The heading. - `description`: The line under the heading. - `label`: Landmark name when there is no heading. - `periodLabel`: Name of the billing switch. - `periods`: Labels for the billing switch. - `items`: Plans. - Pass `null` to hide an optional part, such as `description={null}`. - Some blocks add props of their own; the top of each block’s file lists them. [ ![](https://apogee.avaui.dev/thumbs/pricing-sections__simple-cards-01.light.webp)![](https://apogee.avaui.dev/thumbs/pricing-sections__simple-cards-01.dark.webp) Simple cards 01A heading over three plan cards, each with an icon, contained checks and a footer button. ](https://apogee.avaui.dev/docs/pricing-sections/simple-cards-01)[ ![](https://apogee.avaui.dev/thumbs/pricing-sections__simple-cards-02.light.webp)![](https://apogee.avaui.dev/thumbs/pricing-sections__simple-cards-02.dark.webp) Simple cards 02A heading over three plan cards, the first marked most popular. ](https://apogee.avaui.dev/docs/pricing-sections/simple-cards-02)[ ![](https://apogee.avaui.dev/thumbs/pricing-sections__simple-cards-03.light.webp)![](https://apogee.avaui.dev/thumbs/pricing-sections__simple-cards-03.dark.webp) Simple cards 03A centred heading over three plan cards with two actions and a features panel. ](https://apogee.avaui.dev/docs/pricing-sections/simple-cards-03)[ ![](https://apogee.avaui.dev/thumbs/pricing-sections__simple-cards-04.light.webp)![](https://apogee.avaui.dev/thumbs/pricing-sections__simple-cards-04.dark.webp) Simple cards 04A centred heading over two wide plan cards with features in two columns. ](https://apogee.avaui.dev/docs/pricing-sections/simple-cards-04)[ ![](https://apogee.avaui.dev/thumbs/pricing-sections__featured-cards-01.light.webp)![](https://apogee.avaui.dev/thumbs/pricing-sections__featured-cards-01.dark.webp) Featured cards 01A heading beside two plan cards with icons. ](https://apogee.avaui.dev/docs/pricing-sections/featured-cards-01)[ ![](https://apogee.avaui.dev/thumbs/pricing-sections__featured-cards-02.light.webp)![](https://apogee.avaui.dev/thumbs/pricing-sections__featured-cards-02.dark.webp) Featured cards 02A heading beside two plan cards, the first marked most popular. ](https://apogee.avaui.dev/docs/pricing-sections/featured-cards-02)[ ![](https://apogee.avaui.dev/thumbs/pricing-sections__featured-cards-03.light.webp)![](https://apogee.avaui.dev/thumbs/pricing-sections__featured-cards-03.dark.webp) Featured cards 03A heading beside two grey plan cards with icons on their top edge. ](https://apogee.avaui.dev/docs/pricing-sections/featured-cards-03)[ ![](https://apogee.avaui.dev/thumbs/pricing-sections__featured-cards-04.light.webp)![](https://apogee.avaui.dev/thumbs/pricing-sections__featured-cards-04.dark.webp) Featured cards 04A heading and three feature rows beside one wide plan card. ](https://apogee.avaui.dev/docs/pricing-sections/featured-cards-04)[ ![](https://apogee.avaui.dev/thumbs/pricing-sections__simple-icon.light.webp)![](https://apogee.avaui.dev/thumbs/pricing-sections__simple-icon.dark.webp) Simple iconA large heading over three plan cards with icons. ](https://apogee.avaui.dev/docs/pricing-sections/simple-icon)[ ![](https://apogee.avaui.dev/thumbs/pricing-sections__simple-call-out.light.webp)![](https://apogee.avaui.dev/thumbs/pricing-sections__simple-call-out.dark.webp) Simple call outA large heading over three plan cards with two actions each, the first marked most popular. ](https://apogee.avaui.dev/docs/pricing-sections/simple-call-out)[ ![](https://apogee.avaui.dev/thumbs/pricing-sections__simple-icon-offset.light.webp)![](https://apogee.avaui.dev/thumbs/pricing-sections__simple-icon-offset.dark.webp) Simple icon offsetA centred heading with actions over three grey plan cards with icons on their top edge. ](https://apogee.avaui.dev/docs/pricing-sections/simple-icon-offset)[ ![](https://apogee.avaui.dev/thumbs/pricing-sections__simple-banner.light.webp)![](https://apogee.avaui.dev/thumbs/pricing-sections__simple-banner.dark.webp) Simple bannerA centred heading and billing switch over three plan cards, the middle one with a banner. ](https://apogee.avaui.dev/docs/pricing-sections/simple-banner)[ ![](https://apogee.avaui.dev/thumbs/pricing-sections__simple-dual-check-item.light.webp)![](https://apogee.avaui.dev/thumbs/pricing-sections__simple-dual-check-item.dark.webp) Simple dual check itemA centred heading and billing switch over two wide plan cards with features in two columns. ](https://apogee.avaui.dev/docs/pricing-sections/simple-dual-check-item)[ ![](https://apogee.avaui.dev/thumbs/pricing-sections__simple-accent-line.light.webp)![](https://apogee.avaui.dev/thumbs/pricing-sections__simple-accent-line.dark.webp) Simple accent lineA centred heading and billing switch over three plans joined into one panel with a brand top edge. ](https://apogee.avaui.dev/docs/pricing-sections/simple-accent-line)[ ![](https://apogee.avaui.dev/thumbs/pricing-sections__gray-badge.light.webp)![](https://apogee.avaui.dev/thumbs/pricing-sections__gray-badge.dark.webp) Gray badgeA centred heading with actions over three plan cards with badges. ](https://apogee.avaui.dev/docs/pricing-sections/gray-badge)[ ![](https://apogee.avaui.dev/thumbs/pricing-sections__primary-dark-badge.light.webp)![](https://apogee.avaui.dev/thumbs/pricing-sections__primary-dark-badge.dark.webp) Primary dark badgeA heading and billing switch on a brand band, with three plan cards overlapping it. ](https://apogee.avaui.dev/docs/pricing-sections/primary-dark-badge)[ ![](https://apogee.avaui.dev/thumbs/pricing-sections__abstract-angles.light.webp)![](https://apogee.avaui.dev/thumbs/pricing-sections__abstract-angles.dark.webp) Abstract anglesA heading and annual switch on a tinted band over three plan cards on a striped ground. ](https://apogee.avaui.dev/docs/pricing-sections/abstract-angles)[ ![](https://apogee.avaui.dev/thumbs/pricing-sections__dual-action.light.webp)![](https://apogee.avaui.dev/thumbs/pricing-sections__dual-action.dark.webp) Dual actionA centred heading and billing switch over three plan cards with two actions and a features panel. ](https://apogee.avaui.dev/docs/pricing-sections/dual-action)[ ![](https://apogee.avaui.dev/thumbs/pricing-sections__primary-card-icon.light.webp)![](https://apogee.avaui.dev/thumbs/pricing-sections__primary-card-icon.dark.webp) Primary card iconA centred heading and billing switch over three tinted plan panels with icons. ](https://apogee.avaui.dev/docs/pricing-sections/primary-card-icon)[ ![](https://apogee.avaui.dev/thumbs/pricing-sections__primary-card-simple.light.webp)![](https://apogee.avaui.dev/thumbs/pricing-sections__primary-card-simple.dark.webp) Primary card simpleA heading over three tinted plan panels with filled checks. ](https://apogee.avaui.dev/docs/pricing-sections/primary-card-simple)[ ![](https://apogee.avaui.dev/thumbs/pricing-sections__large-table-01.light.webp)![](https://apogee.avaui.dev/thumbs/pricing-sections__large-table-01.dark.webp) Large table 01A centred heading over a plan comparison table with grouped features and tooltips. ](https://apogee.avaui.dev/docs/pricing-sections/large-table-01)[ ![](https://apogee.avaui.dev/thumbs/pricing-sections__large-table-02.light.webp)![](https://apogee.avaui.dev/thumbs/pricing-sections__large-table-02.dark.webp) Large table 02A heading over a plan comparison table with plan icons and the middle plan highlighted. ](https://apogee.avaui.dev/docs/pricing-sections/large-table-02) ## Related [ PricingPlan tiers side by side, with an optional monthly / annual switch. ](https://apogee.avaui.dev/docs/sections/pricing)[ SegmentedControlA row of connected, mutually exclusive options backed by native radios — pick one from a small, always-visible set. ](https://apogee.avaui.dev/docs/segmented-control)[ TableA styled, horizontally-scrollable table. Write plain thead/tbody markup — Table only styles it. ](https://apogee.avaui.dev/docs/table)