Components

The reusable pieces the banner site (ryanrampersad.com) is built from — authored in Tailwind against the brand tokens. Import from components/banner/ and pass props; each renders the same tokens as the site.

Eyebrow

banner/EyebrowStableRed dot + mono uppercase micro-label.

Social

<Eyebrow>Social</Eyebrow>

SectionHeading

banner/SectionHeadingStableA section h3 with an optional subtitle. align center (default) | start.

Links

Find me just about everywhere.

<SectionHeading subtitle="Find me just about everywhere.">Links</SectionHeading>

Pill

banner/PillStableGhost button link. size sm | md; beam adds the hover border-beam; animate adds the fade-in entrance.

About Résumé

<Pill href="#about" beam animate>About</Pill> <Pill href="/banner/resume" size="md">Résumé</Pill>

LinkTile

banner/LinkTileStableA link row: bold label + mono handle, with a wipe-in accent bar on hover.

Twitter@ryanmr

<LinkTile label="Twitter" handle="@ryanmr" href="https://twitter.com/ryanmr" />

LinkGroup

banner/LinkGroupStableAn Eyebrow-labelled column of LinkTiles. links: [{ label, handle, href }].

Social

Twitter@ryanmr Bluesky@ryanmr.com Mastodon@ryanmr

<LinkGroup name="Social" links={[ { label: "Twitter", handle: "@ryanmr", href: "…" }, ]} />

LinkCard

banner/LinkCardStableA titled card with a description; hover lifts the border to signal.

Annual Card

Celebrate the new year with Ryan's commemorative card, mailed to you annually.

<LinkCard title="Annual Card" description="…" href="https://card.ryanrampersad.com" />

PingDot

card/PingDotStableA pulsing red 'new' indicator; pin it to a corner with position utilities.

Something new

<PingDot class="absolute -right-2 -top-2" />

CompassLink

card/CompassLinkStableThe card's primary link block. Optional rotated Pacifico cursive tag and a ping dot.

read the letter!2025 — 2026 Lettermailed each December

<CompassLink href="/card/letter/2025-2026" cursive="read the letter!" ping subtext="mailed each December"> 2025 — 2026 Letter </CompassLink>