Call to action — Resource download columns

A document cover, topic checklist and download panel form three desktop columns. Use it when the content and file details help readers decide to download.

ReactHTML

1440 × 900

Open in new tab

Component.tsx28 lines

export default function CtaResourceDownload() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24 ">
        <div className="grid items-center gap-8 lg:grid-cols-[192px_1fr_256px]">
          <div role="img" aria-label="Image placeholder: downloadable document cover" className="flex aspect-[3/4] items-center justify-center rounded-lg bg-neutral-100 text-neutral-400">
            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-10"><path d="M3 3h18v18H3zM3 17l6-6 4 4 3-3 5 5" /></svg>
          </div>
          <div>
            <p className="text-sm font-medium text-neutral-500">Resource type</p>
            <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Heading that names the resource value</h2>
            <ul role="list" className="mt-6 grid gap-3 text-sm text-neutral-600">
              <li className="flex items-start gap-3"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5 shrink-0 text-neutral-900"><path d="m5 12 4 4L19 6" /></svg>First topic covered in the resource</li>
              <li className="flex items-start gap-3"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5 shrink-0 text-neutral-900"><path d="m5 12 4 4L19 6" /></svg>Second topic readers can apply</li>
              <li className="flex items-start gap-3"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5 shrink-0 text-neutral-900"><path d="m5 12 4 4L19 6" /></svg>Third useful reference included</li>
            </ul>
          </div>
          <div className="rounded-lg border border-neutral-200 bg-neutral-50 p-6">
            <p className="text-lg font-semibold">Free download</p>
            <p className="mt-2 text-sm text-neutral-600">PDF · 24 pages · 2.4 MB</p>
            <a href="#" className="inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 mt-6 w-full">Download resource</a>
            <p className="mt-3 text-xs text-neutral-500">Short note about access and reuse</p>
          </div>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for a downloadable guide or document. Choose an email signup when access requires a subscription. Variations include a worksheet cover or a zipped resource bundle.
Hierarchy: The resource heading and cover establish the offer before topics and file metadata. Keep heading below 8 words, topics below 8 each, file details below 6 and access note below 10.
Responsive: Below 1024px columns stack as cover, description and download panel. The cover retains 3:4 proportions and the action fills its panel width.
Layout: The white section uses a 1152px max-w-6xl container, 24px px-6 sides and 64px py-16 vertical padding, increasing to 96px sm:py-24 at 640px. The lg:grid-cols-[192px_1fr_256px] grid uses 32px gap-8 and centered alignment. A 3:4 cover leads, the middle holds a heading and checklist, and a p-6 alternate-surface download panel closes the row.
States: The 44px filled action changes from neutral-900 to neutral-700 on hover; outlined actions fill neutral-50. All controls show a 2px neutral-900 keyboard outline offset by 2px.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│ ┌───────────┐  Resource type             ┌─────────────────┐ │
│ │           │  Heading for resource      │ Free download   │ │
│ │   Image   │  + First topic             │ PDF / 24 pages  │ │
│ │           │  + Second topic            │ [Download]      │ │
│ │           │  + Third topic             │ Access note     │ │
│ └───────────┘                            └─────────────────┘ │
└──────────────────────────────────────────────────────────────┘

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 — Resource download columns

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