# Simple icon offset

> A centred heading with actions over three grey plan cards with icons on their top edge.

URL: https://apogee.avaui.dev/docs/pricing-sections/simple-icon-offset
Last updated: 2026-10-20

A centred heading with actions over three grey plan cards with icons on their top edge.

Last updated October 20, 2026

Live example: https://apogee.avaui.dev/examples/pricing/simple-icon-offset

```astro
---
/**
 * Simple icon offset: A centred heading with actions over three grey plan cards with icons on their top edge.
 *
 * @block pricing
 * @order 11
 */
import { CircleCheck, Layers2, Layers3, Zap } from '@lucide/astro'
import Section from '@/components/apogee/Section/Section.astro'
import SectionHeader from '@/components/apogee/SectionHeader/SectionHeader.astro'
import Heading from '@/components/apogee/Heading/Heading.astro'
import Button from '@/components/apogee/Button/Button.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import { plain, type Action } from '@/components/apogee/sections/_shared/spine.ts'
import type { PricingContent } from '@/components/apogee/sections/_shared/pricing.ts'

/** @composable */
interface Props extends PricingContent {
  /** 1 when the block opens a page; its items move one level down with it. */
  headingLevel?: 1 | 2
  /** The solid button under the heading. @category content */
  primaryAction?: Action | null
  /** The outline button under the heading. @category content */
  secondaryAction?: Action | null
}

const {
  headingLevel = 2,
  eyebrow = 'Pricing',
  heading = 'Plans that fit your scale',
  description = 'Simple, transparent pricing that grows with you. Try any plan free for 30 days.',
  primaryAction = { label: 'Get started', href: '#' },
  secondaryAction = { label: 'Chat to sales', href: '#' },
  items = [
    { name: 'Basic plan', price: '$10', period: 'mth', description: 'Our most popular plan.', features: ['Access to basic features', 'Basic reporting and analytics', 'Up to 10 individual users', '20 GB individual data', 'Basic chat and email support'], action: { label: 'Get started', href: '#' } },
    { name: 'Business plan', price: '$20', period: 'mth', description: 'Billed annually.', features: ['200+ integrations', 'Advanced reporting and analytics', 'Up to 20 individual users', '40 GB individual data', 'Priority chat and email support'], action: { label: 'Get started', href: '#' } },
    { name: 'Enterprise plan', price: '$40', period: 'mth', description: 'Billed annually.', features: ['Advanced custom fields', 'Audit log and data history', 'Unlimited individual users', 'Unlimited individual data', 'Personalised and priority service'], action: { label: 'Get started', href: '#' } },
  ],
} = Astro.props
const itemLevel = headingLevel === 1 ? (2 as const) : (3 as const)
const icons = [Zap, Layers2, Layers3]
---

<Section spacing="large">
  <div class="flex flex-col gap-12 md:gap-16">
    <div class="flex flex-col items-center gap-8">
      <SectionHeader headingLevel={headingLevel} eyebrow={eyebrow ?? undefined} heading={plain(heading)} description={description ?? undefined} size="large" align="center" />
      {(primaryAction || secondaryAction) && (
      <div class="flex flex-col-reverse gap-3 sm:flex-row">
        {secondaryAction && <Button href={secondaryAction.href} size="large" variant="outline" color="neutral">{secondaryAction.label}</Button>}
        {primaryAction && <Button href={primaryAction.href} size="large">{primaryAction.label}</Button>}
      </div>
      )}
    </div>
    <div class="grid gap-4 md:grid-cols-2 md:gap-8 xl:grid-cols-3 gap-10">
    {items.map((plan, i) => {
      const Icon = icons[i % icons.length]!
      return (
    <div class="relative mt-6 flex flex-col items-center gap-8 rounded-2xl bg-neutral-faded px-6 pt-12 pb-8 text-center md:px-8">
      <div class="absolute -top-6 start-1/2 -translate-x-1/2 rtl:translate-x-1/2"><FeaturedIcon theme="outline" color="neutral" size="large"><Icon /></FeaturedIcon></div>
      <div class="flex flex-col items-center gap-2">
        <Heading as={itemLevel === 2 ? 'h2' : 'h3'} size="h5">{plan.name}</Heading>
        <p class="flex items-baseline justify-center gap-1"><span class="text-5xl md:text-6xl font-semibold tracking-tight tabular-nums">{plan.price}</span>{plan.period && <span class="text-neutral-faded">/{plan.period}</span>}</p>
        <p class="text-neutral-faded">{plan.description}</p>
      </div>
      <ul class="flex list-none flex-col gap-4 p-0 text-neutral-faded self-stretch text-start">
        {plan.features.map((f) => <li class="flex gap-3"><CircleCheck class="size-6 shrink-0 text-primary" aria-hidden="true" /><span>{f}</span></li>)}
      </ul>
      <Button href={plan.action.href} size="large" fullWidth class="mt-auto">{plan.action.label}</Button>
    </div>
      )
    })}
  </div>
  </div>
</Section>
```

## Add

```sh
npx @ava-ui/apogee add pricing/simple-icon-offset
```

This copies the block to `src/components/apogee/blocks/pricing/` with everything it uses: Button, FeaturedIcon, Heading, Section, SectionHeader. Every piece of copy is a prop, with the sample copy as its default. Pass yours, or `null` to hide a part; see [copy is props](https://apogee.avaui.dev/docs/pricing-sections#copy-is-props).

## Accessibility

-   The heading is an `h2` by default, so the block slots into a page under its `h1`; item titles are one level down.

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