Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/web-weaver/llms.txt

Use this file to discover all available pages before exploring further.

The TarotCard component is a CSS 3D flip card that brings a tarot-reading experience to the Blog page. At rest, the card face displays a roman numeral, the post’s assigned tarot suit symbol, and its title — styled like an illustration from a real tarot deck. Hovering the card triggers a smooth 180° flip to reveal the post’s excerpt text on the reverse side. The combination of suit, numeral, and thematic typography makes each blog post feel like a card drawn from a personal arcana.

​
Where It’s Used

TarotCard is the primary display unit in the Blog page (/blog) grid. Every post in the blog index is rendered as one TarotCard. The grid layout arranges cards in rows, and each card flips independently on hover.

​
Props

​
title
string
required
The blog post title. Displayed prominently on the front face of the card, below the suit symbol and roman numeral.
​
excerpt
string
required
A short teaser or summary of the post. Shown on the back face of the card after the flip, giving readers a reason to click through to the full article.
​
suit
'wands' | 'swords' | 'cups' | 'pentacles'
required
The tarot suit assigned to this post. Each suit renders a distinct SVG or Unicode symbol on the card face:
ValueSymbolThematic Association
wandsStaff / wandCreativity, ambition
swordsCrossed swordsLogic, conflict, clarity
cupsChaliceEmotion, intuition
pentaclesStar in circleCraft, material work
​
number
string
required
A roman numeral string displayed at the top of the card face (e.g. 'I', 'II', 'III', 'IV'). Typically assigned sequentially to posts within a suit, or chosen editorially to reflect the post’s rank or order.

​
Usage

import TarotCard from "@/components/TarotCard";

<TarotCard
  title="The Magic of React Hooks"
  excerpt="Understanding the deep incantations required to master useEffect."
  suit="wands"
  number="I"
/>
Full Blog grid rendering: 
{blogPosts.map((post, index) => (
  <TarotCard
    key={post.slug}
    title={post.title}
    excerpt={post.excerpt}
    suit={post.suit}
    number={post.number}
  />
))}

​
Behavior Details

​
CSS 3D Flip

The flip is achieved with CSS transform-style: preserve-3d and a rotateY(180deg) transform applied to the card container on :hover. Both faces are positioned absolutely within the container, with the back face pre-rotated 180deg so it appears correct after the flip.
StateTransform
At rest (front visible)rotateY(0deg)
Hovered (back visible)rotateY(180deg)
The transition is governed by a CSS transition: transform 0.6s (or equivalent), giving the flip a fluid, deliberate feel.

​
Card Front

The front face displays three pieces of information in a vertical hierarchy:
  1. Roman numeral — positioned at the top center in a large display typeface.
  2. Suit symbol — centered below the numeral, rendered as an SVG glyph or styled Unicode character.
  3. Title — displayed in the lower portion of the card, using the app’s serif or spellbook-style font.

​
Card Back

The back face shows the excerpt text centered on a dark background, often accompanied by a subtle decorative border or motif. A brief “Read More →” cue may appear below the excerpt. 
// What the visitor sees before hovering
<TarotCard
  title="The Magic of React Hooks"
  excerpt="Understanding the deep incantations required to master useEffect."
  suit="wands"
  number="I"
/>
Displays: I numeral → wands symbol → title text.

​
Customization Tips

Assign suits thematically rather than randomly — for example, use wands for posts about creativity and career, swords for technical deep-dives, cups for reflective personal essays, and pentacles for tutorials with practical, craft-focused takeaways.

Roman Numerals

number accepts any string, so you can pass 'X', 'XIV', or even custom glyphs if your content warrants it. There is no built-in validation — keep values consistent for a coherent deck aesthetic.

Excerpt Length

Keep excerpt under 120 characters. Longer excerpts may overflow the card back or require scrolling, which conflicts with the fixed-height card design.

Suit Symbols

Suit symbols are rendered inside the component. If you add a new suit variant in the future, update the symbol-to-value mapping inside TarotCard.js.

Accessibility

Add an aria-label to the card wrapper (e.g. "Blog post: The Magic of React Hooks") so screen readers can identify each card without relying on the visual flip interaction.
TarotCard does not handle navigation. Wrap it in a <Link> or attach an onClick handler in the Blog page to route to the full post when the card is clicked.

Build docs developers (and LLMs) love

Get started for freeTalk to us