Call to action — Dated detail card

An invitation beside a dated detail card with price, availability and a full-width action. Use it when the date and remaining capacity shape the decision.

ReactHTML

1440 × 900

Open in new tab

Component.tsx37 lines

export default function CtaDetailCard() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto grid max-w-6xl items-center gap-12 px-6 py-16 sm:py-24 lg:grid-cols-12">
        <div className="lg:col-span-7">
          <p className="text-sm font-medium text-neutral-500">Eyebrow for the scheduled invitation</p>
          <h2 className="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Heading that explains the reason to attend</h2>
          <p className="mt-6 max-w-md text-lg text-pretty text-neutral-600">Supporting copy that describes what the invitation includes and who it is for.</p>
          <p className="mt-6 text-sm text-neutral-500">Capacity: 12 places remaining</p>
        </div>
        <div className="rounded-lg border border-neutral-200 bg-white p-6 lg:col-span-5">
          <div className="flex flex-col gap-6 sm:flex-row sm:items-center">
            <time dateTime="2027-03-14" className="flex shrink-0 flex-col sm:w-16">
            <span className="text-4xl font-semibold tracking-tight">14</span>
            <span className="mt-1 text-sm font-medium text-neutral-500">MAR</span>
          </time>
          <div className="border-t border-neutral-200 pt-4 sm:border-t-0 sm:border-l sm:pt-0 sm:pl-6">
            <h3 className="text-lg font-semibold">Title for the scheduled session</h3>
            <p className="mt-2 text-sm text-neutral-500">10:00 AM · Location or access details</p>
          </div>
        </div>
        <dl className="mt-6 border-t border-neutral-200">
          <div className="flex flex-wrap items-baseline justify-between gap-4 border-b border-neutral-200 py-4">
            <dt className="text-sm text-neutral-600">Price</dt>
            <dd className="text-sm font-medium">$29</dd>
          </div>
          <div className="flex flex-wrap items-baseline justify-between gap-4 border-b border-neutral-200 py-4">
            <dt className="text-sm text-neutral-600">Places left</dt>
            <dd className="text-sm font-medium">12</dd>
          </div>
        </dl>
        <a href="#" className="inline-flex h-11 items-center justify-center rounded-md px-5 text-sm font-medium transition-colors bg-neutral-900 text-white hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 mt-6 w-full">Reserve a place</a>
      </div>
    </div>
  </section>
  )
}

Pattern notes

When to use: Use for a scheduled invitation with limited places. Choose cta-overlay-media when a backdrop provides useful context. Variations: change the date to a deadline, replace places left with duration, or add a second date option in the card.
Hierarchy: The section headline is 30px, increasing to 36px at 640px, semibold with tracking-tight and balanced wrapping. Read eyebrow, h2, max-w-md 448px 18px lede and 14px capacity note, then the date, 18px item title, 14px time, 14px details and action. Slots: eyebrow 5 words, heading 8, lede 25, capacity 8, item title 6, time 8, each term/value 3.
Responsive: Below 1024px the card follows the intro with a 48px gap. Below 640px the date sits above the title, with a top divider and 16px top padding on the title group. At 640px the date and title form a row with a vertical divider. At 1024px the 7/5 grid begins.
Layout: A 1152px max-w-6xl container has 24px horizontal padding and 64px vertical padding, increasing to 96px at 640px. At 1024px a 12-column grid with 48px gaps aligns a seven-column intro and five-column card vertically. The intro uses 16px, 24px and 24px gaps. The rounded-lg neutral-200 bordered card has 24px padding. Its header combines a 36px day and 14px month with a title group separated by a left border and 24px padding. A two-row dl follows after 24px and a full-width action after 24px.
States: Actions are 44px tall with 20px horizontal padding and rounded-md 6px radii. Primary hover changes neutral-900 to neutral-700. Colour transitions take 150ms. Every enabled control shows a 2px neutral-900 focus-visible outline offset 2px. The date and capacity are static. The date uses a semantic time element.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│ Eyebrow                         ┌────┬─────────────────────┐ │
│ Heading for the next step       │14  │ Item title          │ │
│ Supporting lede                 │MAR │ Time and place      │ │
│ Capacity meta                   ├────┴─────────────────────┤ │
│                                 │Price                  $29│ │
│                                 │Places left             12│ │
│                                 │[Primary action]          │ │
│                                 └──────────────────────────┘ │
└──────────────────────────────────────────────────────────────┘

View all

Call to action — Audience choice cards
Layout tags: split,list,spacious
Call to action — Card with image
Layout tags: split,media
Call to action — Centred with actions
Layout tags: centered,stacked,spacious

Call to action — Dated detail card

Pattern notes

More in Call to action

Call to action — Audience choice cards

Call to action — Card with image

Call to action — Centred with actions