Sermona

Cards & horizontal swipers ​

Cards bundle one idea: a title, proof, and optional action. Swipers (horizontal snap rows) are for peer content where each slide is whole — issues, episodes, comparable tiers — not for stacking unrelated widgets.

Base card (.sermona-card) ​

Default: elevated surface, hairline border, card shadow, generous padding.

ModifierUse
.sermona-card--flatQuiet cards on already-elevated bands; removes shadow.
.sermona-card--denseTighter padding in dense dashboards or nested layouts.
.sermona-card--stackFlex column + gap; pair with .sermona-card__footer and margin-top: auto on the footer for pinned footers (e.g. CTA at bottom).
.sermona-card--interactiveHover lift + border brightening; use on <a> for whole-card links — add focus-visible outline (included for a.sermona-card).

Grid vs swiper ​

PatternWhen
.sermona-card-gridTwo or more cards that can wrap; same hierarchy; no strong “peek” of the next item.
.sermona-swiperOrdered deck (carousel of equals), mobile-first exploration, or full-bleed editorial rails where the next card should peek.
.sermona-service-gridPricing / tier columns (already paired with .sermona-service-card).

Avoid swipers for tabular or long-form content — use Data & tables or prose.

Card grid (demo) ​

Issue 04

Systems in the wild

How tokens stay honest when the product ships every week.

Workshop

Audit to library

A repeatable pass from Figma audit to published CSS.

Sold out · Next quarter

Interactive

Whole-card affordance for drill-down (not nested links — one destination).

Horizontal swiper ​

Structure:

  1. .sermona-swiper — optional .sermona-swiper--bleed (full viewport width inside a centered layout), .sermona-swiper--fade (right-edge gradient hint), .sermona-swiper--peek (narrower slides so the next card shows), .sermona-swiper--wide (wider default slide width).
  2. Optional .sermona-swiper__label — kicker-style row title.
  3. .sermona-swiper__track — tabindex="0" when it should be keyboard-scrollable; label with aria-label or aria-labelledby.
  4. .sermona-swiper__slide — one logical unit per slide (card, tile, or quote block).

On non–page backgrounds, set the fade to match the band, e.g. style="--sermona-swiper-fade-bg: var(--sermona-color-bg-elevated)" on .sermona-swiper.

Contained track (no bleed): three service-style slides with snap.

Engagements · swipe

Sprint

Fast audit

Tokens + one composed surface.

Details

Program

Library pass

Components + iconography spec.

Most common

Residency

Embedded

Design + front-end pair weekly.

Ask

Full-bleed rail ​

Use .sermona-swiper--bleed when the section lives inside .sermona-layout (or any centered measure) but the scroll rail should run edge to edge. Keep tabindex + role="region" + visible or screen-reader title.

<a class="sermona-service-card"> is supported: no underline, focus-visible ring, inherited text color. Don’t nest interactive elements that steal the same gesture (no button inside a card-link without tabindex="-1" / careful a11y).

Motion & accessibility ​

  • Scroll snap is not disabled under prefers-reduced-motion; only smooth scrolling is limited to users who allow motion.
  • Prefer visible focus on the track when it’s focusable.
  • Don’t rely on the fade alone to imply “more” — peeks and partial slides do most of the work; fade is cosmetic.
  • For carousels that auto-advance, provide pause and respect reduced motion (out of scope for this CSS-only primitive — use JS deliberately).

See also ​