Photo card

Card footer over a full-bleed architectural photo.

Usage

import { PhotoCardFooter } from '@/components/blocks/footer-03'


<PhotoCardFooter />


// Swap in your own content
<PhotoCardFooter
  heading="Planning a new build? Let’s talk it over."
  cta={{ label: 'Start a conversation', href: '/contact' }}
  columns={[
    {
      label: 'Studio',
      links: [
        { label: 'Projects', href: '/projects' },
        { label: 'About', href: '/about' },
      ],
    },
    {
      label: 'Elsewhere',
      links: [{ label: 'LinkedIn', href: '#' }],
    },
  ]}
  copyright="© 2026 Ashgrove Atelier"
  credit={{ prefix: 'Site by', label: 'Ashgrove', href: '/' }}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/footer-03

npx shadcn@latest add @pastaui-pro/footer-03

yarn dlx shadcn@latest add @pastaui-pro/footer-03

bunx --bun shadcn@latest add @pastaui-pro/footer-03

Source

Props

Photo card props
Prop	Type	Default	Description
heading	string	= 'Planning a home that feels right to live in?'	The large question on the left of the card.
cta	{ label: string; href: string }	= { label: 'Book an intro call', href: '#' }	Underlined link with an arrow under the heading.
columns	PhotoCardFooterColumn[]	= Studio / Resources / Elsewhere	Link columns, each with a small grey label and label and href pairs.
copyright	string	= '© {year} Stillmoor Studio'	Text on the left of the bottom row.
credit	{ prefix: string; label: string; href: string }	= { prefix: 'Crafted with', label: 'Pasta UI', href: 'https://pastaui.com' }	Credit on the right of the bottom row, with a linked name.
className	string	= —	Additional classes for the footer.
style	CSSProperties	= —	Inline styles, handy for overriding the `--pp-*` theme variables.