Website

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.

Card

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

Article Learning to Wait What the slow seasons teach us about trust. Read

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 + Tailwind 
<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.

Online Course From the Inside Out A free, self-paced course in spiritual formation.

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 + Tailwind 
<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

Get Renovaré Weekly each Friday

Curated Christian wisdom and Renovaré updates.

Join Email Community

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

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

HTML + Tailwind 
<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

Read together

Four books a year, with a guide for every week.

Listen weekly

A podcast episode to go with each reading.

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

Site partial: _slices/sliceFeatureGrid (Cards style)

HTML + Tailwind 
<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

Dear friends,

Thank you for walking with us this year. Your gifts make room for thousands of people to slow down and pay attention to God.

With gratitude,
The Renovaré Team

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 + Tailwind 
<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 + Tailwind 
<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.