# Boxes & Cards

> When to put content in a box, and the box types on renovare.org — Card, Filled Card, Panel and Letter — plus how images stand on their own.

*Unboxed by default.*

Most content sits directly on the band. Use a box only for:

1. **Click-through cards**: the whole box is a link to something else.
2. **The one key ask** on a page: a single CTA Panel.
3. **Groups of short features**, as filled panels.
4. **Letters**, which have their own paper treatment.

If a box isn't one of these, take it out. Images and video never get a box; see [Media](#media).

## Card

The default click-through card for articles, episodes, books and events.

The whole card is one link. Hairline border at rest; on hover the border deepens to Primary 700, the title turns green and the image zooms to 105%.

Site partial: `_components/cards/card`

```html
<a href="#" class="group @container flex flex-col items-center text-center gap-4 lg:gap-6 w-full max-w-sm p-4 lg:p-6 border border-neutral-300 hover:border-primary-700 rounded transition">
  <span class="block w-full aspect-[3/2] overflow-hidden rounded-md"><img src="https://ik.imagekit.io/renovare/tr:w-800,h-533,fit-crop,fo-auto,f-auto/images/2026-05-01-Wildgeese_Settling.png" alt="" class="w-full h-full object-cover group-hover:scale-105 transition duration-300"></span>
  <span class="inline-flex px-2 py-1 rounded-md bg-white text-neutral-700 text-2xs font-bold leading-tight tracking-wider uppercase">Article</span>
  <span class="font-display font-semibold leading-snug text-xl @sm:text-2xl @md:text-3xl group-hover:text-primary transition">Learning to Wait</span>
  <span class="text-sm leading-relaxed text-neutral-700">What the slow seasons teach us about trust.</span>
  <span class="relative inline-flex flex-col text-sm font-medium">
    <span class="relative flex items-center gap-2">Read <svg class="w-3 h-3 text-primary-400 fill-current" viewBox="0 0 18 16" aria-hidden="true"><path fill-rule="evenodd" d="M17.4971 7.98964L10.0085 15.4783L8.59425 14.0641L13.6687 8.98964L0 8.98964L0 6.98964L13.6687 6.98964L8.59425 1.91519L10.0085 0.500976L17.4971 7.98964Z"/></svg></span>
    <span class="relative w-full h-[2px] pt-1 pb-0.5 overflow-hidden"><span class="absolute top-1 inset-x-0 h-[2px] bg-primary-400"></span><span class="absolute top-1 inset-x-0 h-[2px] bg-neutral -translate-x-full group-hover:translate-x-0 transition duration-200 ease-in-out-circ"></span></span>
  </span>
</a>
```

## Filled Card

For a short set of programs or paths, where a stronger hover helps.

For a short set of programs or paths. The panel fills with Primary 700 on hover and the text turns white.

Site partial: `_components/cards/card_program`

```html
<a href="#" class="group flex flex-col gap-3 w-full max-w-sm p-6 rounded-md bg-neutral-300 hover:bg-primary-700 focus:outline-none focus-visible:ring-4 focus-visible:ring-primary-300/75 transition duration-300">
  <span class="font-sans font-bold leading-tight tracking-wider uppercase text-xs text-primary group-hover:text-white transition duration-300">Online Course</span>
  <span class="font-display font-semibold leading-snug text-2xl text-neutral-900 group-hover:text-white transition duration-300">From the Inside Out</span>
  <span class="text-sm leading-relaxed text-neutral-700 group-hover:text-white/80 transition duration-300">A free, self-paced course in spiritual formation.</span>
</a>
```

## Panel

Filled, softly rounded panels. One CTA Panel per page; feature grids can use several.

**CTA Panel.**

The one key ask on a page. Use at most one per page.

Site partial: `_modules/cta_primary · Cta slice (Panel)`

```html
<div class="flex flex-col items-center text-center gap-6 p-6 sm:p-12 rounded-xl bg-neutral-300">
  <h3 class="font-display font-normal leading-tight text-3xl md:text-[2rem]">Get Renovaré Weekly each Friday</h3>
  <p class="text-base leading-relaxed text-neutral-700 max-w-md">Curated Christian wisdom and Renovaré updates.</p>
  <a href="#" class="group relative inline-flex flex-col justify-center items-center min-h-8 px-6 py-3 text-lg leading-none font-medium text-white focus:outline-none transition duration-200">
  <span class="absolute inset-0 rounded bg-primary group-hover:bg-primary-600 group-hover:scale-110 group-focus-visible:border-[3px] border-primary-900 transition-all duration-200"></span>
  <span class="relative text-center">Join Email Community</span>
</a>
</div>
```

**Feature grid panels.**

Feature grid boxes are filled panels, not outlined. On dark bands use bg-white/10.

Site partial: `_slices/sliceFeatureGrid (Cards style)`

```html
<div class="grid sm:grid-cols-2 gap-6 w-full">
  <div class="flex flex-col gap-3 p-6 md:p-8 rounded-xl bg-neutral-300">
    <h3 class="font-display font-normal leading-tight text-2xl">Read together</h3>
    <p class="text-base leading-relaxed text-neutral-700">Four books a year, with a guide for every week.</p>
  </div>
  <div class="flex flex-col gap-3 p-6 md:p-8 rounded-xl bg-neutral-300">
    <h3 class="font-display font-normal leading-tight text-2xl">Listen weekly</h3>
    <p class="text-base leading-relaxed text-neutral-700">A podcast episode to go with each reading.</p>
  </div>
</div>
```

## Letter

A stack of paper: two sheets fanned behind, the letter on top on warm paper, tilted slightly on desktop. Personal letters and appeals; always Kepler (Voice).

Site partial: `_slices/sliceLetter`

```html
<div class="relative w-full max-w-3xl">
  <div class="absolute inset-0 rounded-[3px] bg-[#fbf9f5] shadow-[0_1px_2px_rgba(0,0,0,0.06),0_12px_30px_-12px_rgba(0,0,0,0.18)] -rotate-[1.6deg] translate-y-2 -translate-x-1" aria-hidden="true"></div>
  <div class="absolute inset-0 rounded-[3px] bg-[#fdfbf8] shadow-[0_1px_2px_rgba(0,0,0,0.06),0_12px_30px_-12px_rgba(0,0,0,0.18)] rotate-[1.1deg] -translate-y-1 translate-x-1" aria-hidden="true"></div>
  <article class="relative w-full bg-[#fffefb] text-neutral-900 rounded-[3px] shadow-[0_1px_2px_rgba(0,0,0,0.08),0_24px_50px_-24px_rgba(0,0,0,0.30)] md:-rotate-[0.4deg] px-6 py-10 sm:px-12 sm:py-16 md:px-20 md:py-20 font-serif text-lg leading-relaxed">
    <p class="mb-5">Dear friends,</p>
    <p class="mb-5">Thank you for walking with us this year. Your gifts make room for thousands of people to slow down and pay attention to God.</p>
    <p>With gratitude,<br>The Renovaré Team</p>
  </article>
</div>
```

## Media

Images and video stand on their own, with rounded corners and the directional photo shadow. No grey panel behind them.

Site partial: `_slices/sliceSplit (media side)`

```html
<div class="w-full max-w-screen-sm">
  <img src="https://ik.imagekit.io/renovare/tr:w-800,h-533,fit-crop,fo-auto,f-auto/images/2026-05-01-Wildgeese_Settling.png" alt="" class="w-full aspect-[3/2] object-cover rounded-md shadow-3xl">
</div>
```

## Rules

- Outlined cards have no shadow; the hairline border does the work. Panels and filled cards have neither border nor shadow.
- Never put a card inside a card, or a panel inside a panel.
- Keep card grids to one card type per row.
- Don't put images in a grey frame; let the photo and its shadow stand on the band.