Row card

Interactive list row used on /problems and similar list views. Hover lifts -2px and reveals a faint gradient-mask border in the brand hue. Header carries level + topic + tag badges with a meta line and trailing action button.

Badge Button

Preview

L2feedsocial

target · 50M DAU · p95 < 200ms

Newsfeed at scale

BottlenecksScaling

Source

apps/docs/app/recipes/row-card/recipe.tsx

import { Badge, Button } from '@hey-mike/tungsten';

export default function RowCardRecipe() {
  return (
    <a
      href="#row-card"
      className="border-stroke bg-surface group relative flex items-center gap-4 overflow-hidden rounded-xl border px-5 py-4 no-underline transition-transform hover:-translate-y-0.5"
    >
      <span
        aria-hidden
        className="pointer-events-none absolute inset-0 rounded-xl opacity-0 transition-opacity group-hover:opacity-100"
        style={{
          padding: '1px',
          background: 'linear-gradient(135deg, var(--color-brand-overlay-15), transparent 40%)',
          WebkitMask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
          WebkitMaskComposite: 'xor',
          maskComposite: 'exclude',
        }}
      />
      <div className="flex flex-1 flex-col gap-2">
        <div className="flex items-center gap-1.5">
          <Badge variant="info">L2</Badge>
          <Badge variant="brand">feed</Badge>
          <Badge variant="default">social</Badge>
        </div>
        <p className="text-ink-3 font-mono text-[12px]">target · 50M DAU · p95 &lt; 200ms</p>
        <h3 className="text-ink-1 text-base font-semibold">Newsfeed at scale</h3>
        <div className="flex items-center gap-1.5">
          <Badge variant="default">Bottlenecks</Badge>
          <Badge variant="default">Scaling</Badge>
        </div>
      </div>
      <Button variant="primary" size="sm">
        Resume session
      </Button>
    </a>
  );
}

import { Badge, Button } from '@hey-mike/tungsten';

export default function RowCardRecipe() {
  return (
    <a
      href="#row-card"
      className="border-stroke bg-surface group relative flex items-center gap-4 overflow-hidden rounded-xl border px-5 py-4 no-underline transition-transform hover:-translate-y-0.5"
    >
      <span
        aria-hidden
        className="pointer-events-none absolute inset-0 rounded-xl opacity-0 transition-opacity group-hover:opacity-100"
        style={{
          padding: '1px',
          background: 'linear-gradient(135deg, var(--color-brand-overlay-15), transparent 40%)',
          WebkitMask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
          WebkitMaskComposite: 'xor',
          maskComposite: 'exclude',
        }}
      />
      <div className="flex flex-1 flex-col gap-2">
        <div className="flex items-center gap-1.5">
          <Badge variant="info">L2</Badge>
          <Badge variant="brand">feed</Badge>
          <Badge variant="default">social</Badge>
        </div>
        <p className="text-ink-3 font-mono text-[12px]">target · 50M DAU · p95 &lt; 200ms</p>
        <h3 className="text-ink-1 text-base font-semibold">Newsfeed at scale</h3>
        <div className="flex items-center gap-1.5">
          <Badge variant="default">Bottlenecks</Badge>
          <Badge variant="default">Scaling</Badge>
        </div>
      </div>
      <Button variant="primary" size="sm">
        Resume session
      </Button>
    </a>
  );
}