How to use

Every configurable component can be dropped into a markdown page as a {{name key="value"}} directive. build.py expands it into the canonical markup. Buttons use the "Label|/url" spec; tertiary links use "Label|/url; Label|/url". The dark flag can be bare ({{contact-card ... dark}}) or dark="true". Omit a parameter to take its default. Unknown directive names pass through untouched.

{{card title="Sample card title" body="Sample body text."
       image="/assets/img/dallas-temple.jpg"
       primary="Primary action|/visit-us"
       secondary="Secondary action|/events"}}

Design tokens

The single source of truth. Every component below is built from these variables, so a palette or spacing change lands everywhere at once.

Palette

Type scale

Spacing, radius, shadow, layout

Buttons

Three-tier hierarchy. .btn-primary (solid sky) is the single most important action per card or section. The ghost button has two canonical forms: .btn-ghost for dark backgrounds and .btn-on-light for light ones. Buttons can carry an inline SVG icon with .btn-icon (1.15em, aligned to the label), as on scheduling buttons. Two equal CTAs split 50/50 with .duo-btns and are never stacked. A lone card CTA goes full-width on mobile. Tertiary actions are quiet text links (.card-links), never buttons. Components emit buttons through their parameters; authors never hand-write button markup.

Buttons on dark

The same buttons on midnight. .btn-outline-light is the compact outline for dark bands.

Card: text only, one button

The simplest card. The lone CTA goes full-width on mobile.

Parameters

Directive

{{card kicker="Sample label" title="Sample card title"
       body="Sample body text shows how the component looks."
       image="/assets/img/dallas-temple.jpg"
       primary="Primary action|#"
       secondary="Secondary action|#"
       links="Quiet link one|#; Quiet link two|#"
       variant="horizontal"}}

Card: image top, kicker, tertiary links

Image header with a kicker label, one primary button, and quiet tertiary links below it.

Desktop

Sample label

Sample card title

Sample body text shows how the component looks with a typical amount of copy.

Primary action

Quiet link one · Quiet link two

Mobile

Sample label

Sample card title

Sample body text shows how the component looks with a typical amount of copy.

Primary action

Quiet link one · Quiet link two

Card: horizontal, two buttons

variant="horizontal": image left, content right on desktop; stacks like a normal card on mobile. Two equal CTAs split 50/50.

Desktop

Sample card title

Sample body text shows how the component looks with a typical amount of copy.

Primary action Secondary action

Mobile

Sample card title

Sample body text shows how the component looks with a typical amount of copy.

Primary action Secondary action

Banner: dark

Midnight strip with white copy and a dark contact card or buttons. The secondary button uses the ghost-on-dark form.

Parameters

Directive

{{banner title="Sample banner title"
         body="Sample banner copy with one bold lead-in."
         dark="true"
         primary="Primary action|#"
         secondary="Secondary action|#"}}

Banner: light

dark="false" renders the white-card variant for light pages.

Band: dark

Midnight band. Dark bands break up the page rhythm; never put two light alt sections back to back.

Parameters

Directive

{{band kicker="Sample kicker" title="Sample band title"
       body="Sample band copy."
       primary="Primary action|#"
       dark="true"}}

Band: light

dark="false" renders the light variant with hairline rules top and bottom.

Contact card: grid layout

The default layout="grid": channel columns on desktop, stacked on mobile. Phone numbers display formatted, e.g. (555) 123-4567.

Parameters

Directive

{{contact-card name="Sample Name"
               tel="+15551234567"
               email="[email protected]"
               layout="grid" dark}}

Contact card: grid on dark

.contact-card--dark for dark banners, bands, and panels. Sky-bright icons and dividers on midnight.

Contact card: grid dynamic states

Phone present but no email renders Call and Text only. Email only renders the Email channel alone. The component adapts; authors never hand-build the row.

Contact card: list layout

layout="list": compact rows with chevrons. On mobile the value wraps under the label.

Contact card: list on dark

The list layout on dark surfaces.

Contact card: inline layout

layout="inline": the concise card. Name plus action pills in one row, no values shown. For tight spots like banners where the full card would take too much vertical space.

Contact card: inline on dark

The inline layout on dark surfaces.

Contact card: schedule channels

The schedule parameter renders Schedule channels with calendar icons instead of Call/Text/Email, one per "Label|URL" entry. Same card, same layouts; the link opens the scheduling page.

Image hero

Full-bleed hero. Images are official Church artwork or landmark photos, never photos of strangers. Demo height is capped; the live hero is 78vh.

Parameters

Directive

{{hero kicker="Sample kicker" title="Sample hero title"
       subtitle="Sample supporting copy."
       image="/assets/img/hero-chapel.jpg"
       primary="Primary action|#"
       secondary="Secondary action|#"}}

Desktop

Sample kicker

Sample hero title

Sample supporting copy.

Primary action Secondary action

Mobile

Sample kicker

Sample hero title

Sample supporting copy.

Primary action Secondary action

Page hero

Solid midnight hero with a lede line.

Parameters

Directive

{{page-hero title="Sample page title"
            lede="Sample supporting line."
            image="/assets/img/dallas-temple.jpg"}}

Page hero with image

The lede is optional; an image can sit under the overlay.

Desktop

Sample page title

Mobile

Sample page title

Centered hero

Gradient band, centered: kicker, title, supporting line.

Event card: vertical

The canonical event tile: image top with the category pill overlaid, title, description, date/time/location rows with icons, and a quiet Learn More link.

Parameters

Directive

{{event-card layout="vertical" pill="Sample category"
  title="Sample Event" body="Sample body text."
  date_label="Friday, May 16, 2025"
  time_label="7:00 PM - 9:00 PM" location="Sample location"
  image="/assets/img/dallas-temple.jpg" url="/events/sample"}}

Desktop

Sample category

Sample Event

Sample body text shows how the component looks with a typical amount of copy.

• Friday, May 16, 2025
• 7:00 PM - 9:00 PM
• Sample location

Learn More →

Mobile

Sample category

Sample Event

Sample body text shows how the component looks with a typical amount of copy.

• Friday, May 16, 2025
• 7:00 PM - 9:00 PM
• Sample location

Learn More →

Event card: horizontal

Image left, content right on desktop; stacks on mobile. For hero banners and sidebar placements.

Desktop

Sample category

Sample Event

Sample body text shows how the component looks with a typical amount of copy.

• Saturday, May 31, 2025
• 10:00 AM - 12:00 PM
• Sample location

Learn More →

Mobile

Sample category

Sample Event

Sample body text shows how the component looks with a typical amount of copy.

• Saturday, May 31, 2025
• 10:00 AM - 12:00 PM
• Sample location

Learn More →

Event card: compact

Date block left, pill, title, time and location, quiet link. For 3-column grids and dense upcoming lists. No image.

Upcoming card: horizontal

Timely and upcoming events lead with a prominent date block: title, time and location line, short description, and a calendar link. The homepage timely banner uses this pattern with a Today/Tomorrow label.

Parameters

Directive

{{upcoming layout="horizontal" mon="MAY" day="16" dow="FRI"
  when_label="This Friday" title="Sample Upcoming Event"
  meta="7:00 PM - 9:00 PM - Sample location"
  body="Sample body text." url="/events/sample"}}

Upcoming card: image

Dark card for visual impact: photo left with the date block overlaid, title, meta, description, quiet link.

Desktop

MAY 31 SAT

Sample Upcoming Event

10:00 AM - 12:00 PM - Room 201

Sample body text shows how the component looks with a typical amount of copy.

Learn More →

Mobile

MAY 31 SAT

Sample Upcoming Event

10:00 AM - 12:00 PM - Room 201

Sample body text shows how the component looks with a typical amount of copy.

Learn More →

Upcoming card: tile

Compact tile for upcoming grids and sidebars: date block, category pill, title, meta, quiet link.

Event schedule

The canonical event listing on every page: month dividers, prominent date blocks (month, day, weekday pill), category pills, weekday line, linked titles, time and location meta with icons, quiet links. Past events auto-hide client-side the day after they pass. Built in Python, not through a directive. The app.js hooks (.ym-event[data-date], .ym-mon, .ym-day, .ym-weekday) must never be renamed.

Badges

.ym-badge (This week) is injected by app.js from the visitor's Sunday-to-Saturday calendar week. .tag-badge pills label event audiences. .event-badge marks detail-page status, and .upcoming-label flags upcoming items.

Event flyer card

Image-led card for image-forward event layouts.

Desktop

Sample tag

Sample Event

Saturday, January 9, 2027

7:00 PM

Mobile

Sample tag

Sample Event

Saturday, January 9, 2027

7:00 PM

Event detail rows

The labeled-row pattern (.detail-list) shared by event pages: bold label left, unbolded value right.

Missionary cards

Tappable roster cards. Serving cards open the mission spotlight and fly the map; returned cards with a researched mission location open their exact mission. Names are never bolded. Tapping a card never follows the email link (clicks on links are ignored by the card handler).

Roster search, expander, regions

Live search filters cards by name or mission; the expander reveals returned missionaries grouped under region headings. Shown here inert.

Spotlight card

One serving missionary: photo, mission, place and landmark, one fact, photo credit, ONE primary write-them button, then tertiary links.

Desktop

Sample Name

Sample Mission

Sample place · Sample landmark

One researched fact about the mission area.

Photo: Author / Wikimedia Commons (CC BY-SA 4.0)

Write Sample Name

See full mission info · See all missionaries

Mobile

Sample Name

Sample Mission

Sample place · Sample landmark

One researched fact about the mission area.

Photo: Author / Wikimedia Commons (CC BY-SA 4.0)

Write Sample Name

See full mission info · See all missionaries

Labeled rows

The labeled-row pattern: bold uppercase label left, unbolded value right. Used for program metadata and event detail rows. Member names are never bold.

Section title, look-ahead, search, quick link

Centered section titles with a sky rule; one-line look-ahead rows; the events search field with its result count; quick-link tiles.

Desktop nav

Inline links with a sky underline on the active page. The Groups dropdown opens on hover and focus.

Groups dropdown

Desktop: a positioned menu on hover or focus. Mobile: an accordion section inside the drawer.

Mobile drawer and toggle

The hamburger animates to a close icon; the drawer slides in from the right as a full-screen fixed panel with the Groups accordion expanded. Focus is trapped inside while open. The frosted-glass blur lives on .site-header::before, never on the header itself, so iOS Safari keeps the drawer anchored to the viewport.

Footer

Midnight-deep band with the ward name, meeting time and address, directions link, Contact Us and bishop appointment links, the Design System link, and the Church line. The live footer is at the bottom of this page.