Component Breakdown

• HeroBanner (gradient overlay)
• EyebrowLabel
• IntroParagraph
• TwoColumnImageText (alternating)
• PullQuote
• PrimaryCTA
• SiteHeader / Footer

Reusable Sections

• Hero with eyebrow + title
• Intro paragraph (max-w-3xl, centered)
• Alternating image/text rows (zigzag)
• Highlighted quote band
• Closing CTA band

Design Notes

• Single column reading flow; max-w-3xl for body text keeps line length comfortable.
• Navy → accent gradient hero is reserved for top-level identity pages.
• Pull quotes sit on bg-secondary, centered, italic weight.
• Always close with a single primary CTA — no menus of options.

Example Content

Component Breakdown

• CompactHero
• SearchInput
• FilterChips
• ResultCard (image + tag + title + meta)
• Pagination / LoadMore
• EmptyState

Reusable Sections

• Search + filter bar (sticky on scroll)
• Card grid (3 col desktop, list mobile)
• Tag taxonomy shared site-wide

Design Notes

• Cards use a 16:9 image, single category tag, title, and one-line summary.
• Filter chips scroll horizontally on mobile; active state uses bg-primary.
• Grid collapses to a list at the md breakpoint for thumb-friendly browsing.

Example Content

Component Breakdown

• Hero (image + headline + This Week / View Calendar CTAs)
• Featured Event card (large image + summary + Register)
• Happening This Week strip (compact event cards)
• Category filter chips (All / Worship / Conferences / Women / Men / Youth / Children / Outreach / Community / Training)
• Upcoming Events grid (image + date + title + location + description + Learn More)
• View toggle (Grid / Calendar)
• Calendar view grouped by month
• Signature Brown Events showcase (Easter, Revival, VBS, Anniversary, Women's Conference, Christmas)
• Event Highlights gallery (mixed-tile preview of Life At Brown)
• Stay Connected band (email signup + text notifications + event updates)

Reusable Sections

• Hero with dual CTAs anchored to in-page sections
• Featured event hero card with badge + meta + CTA
• Compact this-week card row
• Filter chip rail with active state
• Grid/Calendar view toggle
• Signature events visual card row
• Masonry-feel highlight grid linking to Life At Brown
• Gradient Stay Connected subscribe band

Design Notes

• This is a discovery page — not a calendar. Lead with the most exciting events visually.
• Featured event sits on a bordered primary/20 card to draw the eye first.
• Filter chips and view toggle are sticky-feeling but stay inline for simplicity.
• Signature events use 4:5 portrait tiles with gradient overlays — feels like a poster wall.
• Highlights gallery previews Life At Brown to build trust and excitement.
• Stay Connected uses the gradient primary→accent band consistent with closing CTAs across the site.
• Every event card links to its T4B event detail page.
• Live at /events.

Example Content

Component Breakdown

• HeroBanner with tag + title
• MetaCard (Calendar / Clock / MapPin row)
• BodyContent
• SidebarImage
• ActionPanel with primary CTA
• EmbeddedMap

Reusable Sections

• Right rail on desktop (image + CTA)
• Inline meta card
• Map / location embed
• Related items strip at bottom

Design Notes

• Desktop is a 3/5 + 2/5 split; mobile stacks with image first, meta second, CTA always visible.
• Primary CTA is identical across detail variants (Register / Visit / Download).
• Tag color matches taxonomy from T3 for visual continuity.

Example Content

Component Breakdown

• Hero (image + name + mission + Join / Contact CTAs)
• About paragraph (who / why / what to expect)
• Leadership block (photo + welcome + contact)
• Life-in-this-ministry image grid (4–6 images)
• Ministry event cards (image, title, date, time, location, register)
• Also Happening at Brown — compact church-wide event strip
• Closing CTA band (Ready To Get Connected?)

Reusable Sections

• DetailHero (eyebrow + title + subtitle + image)
• CTA bar on bg-secondary directly beneath hero
• Leader spotlight on bg-secondary/40 with portrait + quote
• Masonry-feel life grid (first tile spans 2x)
• Event card grid (ministry-specific) + compact related strip
• Gradient closing CTA mirroring church-wide identity

Design Notes

• Imagery does the work — keep copy short and people-first.
• Two CTAs are always present: Join This Ministry, Contact Leadership.
• Leader photo is required — fosters personal connection.
• Ministry events and church-wide events stay visually distinct (large cards vs. compact strip).
• Mobile stacks every section vertically with full-width CTAs.
• Preview live at /templates/t4a-ministry.

Example Content

Component Breakdown

• Hero (image + type tag + title + short desc + Register / Contact CTAs)
• Event At A Glance (Date, Time, Location, Cost, Deadline, Audience)
• Flyer block (1:1 image, click-to-enlarge lightbox, Download + Share)
• About The Event (purpose, overview, what to expect)
• Featured Guests grid (optional — speakers, artists, pastors)
• Event Schedule timeline (single or multi-day, optional)
• Need To Know cards (childcare, parking, livestream, accessibility)
• Registration block (embedded forms: Eventbrite, Planning Center, Zeffy, Formsite)
• Related Events strip
• Final CTA band (Ready To Join Us?)

Reusable Sections

• Image-led hero with dual CTAs (Register / Contact Organizer)
• Quick-facts grid (2-col mobile → 6-col desktop)
• Flyer + about two-column layout with lightbox overlay
• Vertical timeline schedule with day/time markers
• Quick-info cards for logistics
• Gradient registration card with embedded-form slot
• Closing CTA mirroring T4A for consistency

Design Notes

• The flyer is a primary visual element — full 1:1 aspect with click-to-enlarge.
• Prioritize quick facts, flyer, registration, schedule, next steps — avoid walls of text.
• Optional sections (Featured Guests, Schedule, Need To Know) auto-hide when empty.
• Two CTAs always present: Register Now, Contact Organizer.
• Registration block supports any embed (Eventbrite, Planning Center, Zeffy, Formsite) or external URL.
• Mobile stacks every section vertically with full-width buttons.
• Live on every /events/:id page across the site.

Example Content

Component Breakdown

• CompactHero
• FeaturedLeaderBlock (large portrait + bio)
• TeamGrid (circular portraits + role)
• ContactBlock
• BackToTeams link

Reusable Sections

• Featured leader spotlight
• 4-up team grid (2-up mobile)
• Department dividers (Pastoral / Staff / Volunteer)

Design Notes

• Portraits are circular at every size — gives a consistent people-grid rhythm.
• Featured leader sits on a soft bg-secondary band to separate from the grid below.
• Roles use uppercase tracked label in primary color; names use bold sentence case.
• Live at /about/leadership.

Example Content

Component Breakdown

• FeaturedPlayer (latest sermon w/ play overlay)
• MediaTabs (Sermons / Podcast / Watch / Resources)
• MediaCard (thumb + play + title + series)
• SeriesStrip
• SearchFilter

Reusable Sections

• Hero player with latest content
• Tabbed content switcher
• Card grid for archive (3 col desktop / list mobile)

Design Notes

• Featured player always shows the most recent sermon — drives weekly returning visits.
• Tabs are flat underline style (not pills) to stay editorial.
• Thumbnails are 16:9 with a centered play glyph over a darkened image.
• Live at /media.

Example Content

Component Breakdown

• DarkHero (editorial)
• FeaturedStoryBlock (image + narrative)
• MasonryGrid (mixed aspect tiles)
• Lightbox
• CategoryFilter
• StorySpotlightCard

Reusable Sections

• Dark editorial hero
• Two-column featured story
• Masonry / asymmetric tile grid
• Lightbox overlay for full-bleed viewing

Design Notes

• This is the most emotional template — imagery does the work. Keep copy minimal and human.
• Hero uses a dark surface to signal a different reading mode from informational pages.
• Masonry mixes 1× and 2× tiles to feel like a curated wall, not a uniform grid.
• Events are intentionally excluded — the /events page uses T3A.
• Live at /life-at-brown.

Example Content

Component Breakdown

• Hero (image + headline + Plan A Visit / Explore Locations CTAs)
• Our Campuses cards (image + name + tagline + service times + campus pastor + CTAs)
• Which Campus Is Right For You? comparison table
• Campus Highlights masonry gallery
• Interactive Map with location detail cards (Directions / Details)
• Additional Ministries & Facilities — Oasis featured card
• Final CTA band (Plan A Visit / Contact Us)

Reusable Sections

• Image-led hero with dual CTAs
• Three-up premium destination cards
• Side-scrolling comparison table
• Masonry highlights grid
• Map + location detail sidebar
• Featured venue card (visually distinct from campuses)
• Parallax closing CTA

Design Notes

• Oasis is intentionally separated from the campus grid — uses dark gradient + church-gold accent.
• Comparison table uses primary header row + alternating row tint.
• Highlights gallery pulls 1–2 images per campus for a sense of variety.
• Live at /locations.

Example Content

Component Breakdown

• DetailHero (image + campus name + address + service times)
• Sticky CTA bar (Plan A Visit / Get Directions)
• Campus At A Glance (6 quick info cards)
• Meet The Campus Pastor (portrait + welcome + bio + contact + video)
• What To Expect cards (Parking / Check-In / Children / Worship / Accessibility / Guest Services)
• Ministries At This Campus grid
• Upcoming Campus Events (campus-specific)
• Also Happening At Brown (church-wide, visually distinct)
• Campus Gallery (masonry)
• Directions (map + parking + GPS link)
• Final CTA (Plan A Visit / Contact Campus)

Reusable Sections

• DetailHero shared with T4 / T4A / T4B
• Campus quick-facts grid
• Pastor spotlight block (mirrors T4A leader block)
• What To Expect 3-up card grid
• Ministry link grid
• Campus-specific event card row + compact church-wide strip
• Map + address sidebar shared with T3B
• Parallax closing CTA

Design Notes

• Campus-specific events and church-wide events stay visually separated (large cards vs compact tiles).
• Pastor portrait is required — fosters personal connection.
• What To Expect reduces first-visit friction with concrete logistics.
• Live at /locations/:id.

Example Content

Component Breakdown

• Immersive Hero (dark gradient + church-gold accents + Reserve / Tour CTAs)
• Why Oasis split section (story + image cluster)
• Explore Our Spaces cards (image + capacity + description + Learn More)
• Host Your Event icon grid (8 event types)
• Gallery Experience (dark masonry, editorial)
• Why People Choose Oasis cards
• Availability & Booking band (Reserve / Check Availability / Tour / Request Info)
• Testimonials (wedding clients / retreat groups / churches)
• Location & Directions (map + contact)
• Final CTA (Reserve A Space / Schedule A Tour)

Reusable Sections

• Dark immersive hero with church-gold accent (unique to Oasis)
• Capacity-led space cards
• Event-type icon grid
• Dark masonry gallery
• Booking band with quad-CTA
• Star-rated testimonial cards
• Map + contact sidebar

Design Notes

• Visually distinct from campus templates — dark gradients, church-gold accents, editorial photography.
• Reservations are the priority — Reserve A Space appears in hero, booking band, and final CTA.
• Avoid simple image sliders — gallery uses asymmetric masonry for a premium feel.
• Oasis is positioned as a venue, never as a church campus.
• Live at /oasis.

Example Content