Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/webmaster/llms.txt

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

Button88x31 renders the iconic 88×31 pixel badge — one of the defining visual artifacts of the early World Wide Web. From the mid-1990s through the early 2000s, personal homepages and webrings used these small rectangular buttons everywhere: to link to affiliated sites, display software recommendations (“Best viewed in Netscape!”), show awards, or signal membership in a webring. The fixed dimensions of 88 pixels wide by 31 pixels tall became an informal standard across the entire indie web. In Webmaster, Button88x31 is used on the Projects page to represent each project as a clickable badge, and on the Testimonials page as hover-activated portrait badges for each endorser — both with different color schemes and the ♥ icon variant.

​
Props

​
title
string
required
The label text displayed in the center of the badge. Rendered with truncate max-w-[60px] — text longer than 60px is clipped with an ellipsis (…). Keep labels short; single words or short two-word names work best at 88px wide.
​
color
string
required
The badge’s background color. Accepts any valid CSS color string — hex codes, named colors, rgb(), etc. Applied as an inline style={{ backgroundColor: color }}.Examples: "#000080" (navy), "#800000" (maroon), "#008000" (green), "#800080" (purple)
​
textColor
string
A Tailwind text-color utility class applied to both the icon spans and the title span.Default: "text-white"Use any Tailwind color class, e.g. "text-black", "text-yellow-300", "text-cyan-400".
​
icon
string
A single character (typically a Unicode symbol or emoji) displayed at both the left and right ends of the badge.Default: "★" (black star, U+2605)Common alternatives: "♥" (used on the Testimonials page), "●", "◆", "▶"

​
Dimensions

The badge is exactly w-[88px] h-[31px] — fixed pixel dimensions matching the historic standard. It does not scale or flex to its container. 
┌──────────────────────────────┐  ← 31px tall
│ ★  BadgeTitle               ★ │
└──────────────────────────────┘
←————————— 88px wide ——————————→

​
Usage

​
Project badge — dark blue background, default star icon

import { Button88x31 } from './components/Button88x31';

<Button88x31
  title="GeoChat"
  color="#000080"
/>
Renders an 88×31 navy badge with white star icons on each end and the label “GeoChat” centered in between.

​
Testimonial badge — custom color, heart icon

<Button88x31
  title="Mom"
  color="#FF69B4"
  icon="♥"
/>
Renders a hot-pink badge with white ♥ icons and the label “Mom”. This is the exact usage from the Testimonials page, where each endorser’s name is displayed as a badge on hover.

​
Custom text color

<Button88x31
  title="SpaceJam"
  color="#000000"
  textColor="text-yellow-300"
  icon="◆"
/>
Renders a black badge with yellow-300 text and diamond icons.

​
In a grid of project cards

const projects = [
  { title: 'GeoChat',    color: '#000080' },
  { title: 'Winampify',  color: '#800000' },
  { title: 'SpaceJam',   color: '#008000' },
  { title: 'GuestbookPro', color: '#800080' },
];

<div className="grid grid-cols-2 gap-8">
  {projects.map((project) => (
    <div
      key={project.title}
      className="flex justify-center"
      onMouseEnter={() => setHovered(project.title)}
      onMouseLeave={() => setHovered(null)}
    >
      <Button88x31
        title={project.title}
        color={project.color}
      />
    </div>
  ))}
</div>

​
Component Implementation

// components/Button88x31.js (source)
export function Button88x31({
  title,
  color,
  textColor = 'text-white',
  icon = '★',
}) {
  return (
    <div
      className="w-[88px] h-[31px] border border-black flex items-center justify-between px-1 text-[10px] font-pixel leading-none select-none"
      style={{ backgroundColor: color }}
    >
      <span className={textColor}>{icon}</span>
      <span className={`font-bold ${textColor} truncate max-w-[60px]`}>
        {title}
      </span>
      <span className={textColor}>{icon}</span>
    </div>
  );
}

​
Notes

The select-none class (user-select: none) prevents the badge text from being highlighted when users click or drag across it. This is intentional — 88×31 badges are decorative UI elements, not selectable content.
The color prop is applied as an inline style, not a Tailwind class. This is necessary because the color values used in Webmaster (e.g. "#000080", "#800000") are arbitrary hex codes that can’t be expressed as static Tailwind class names. If you want to use a Tailwind color instead, you’ll need to resolve it manually (e.g. pass "#1e3a8a" for blue-900) or extend the component to accept a className prop alongside color.
Pair Button88x31 with a Tailwind transition-transform and hover:scale-110 class on the wrapper element (as done on the Testimonials page) to give the badge a subtle pop-out effect on hover — a nice touch that makes the static badge feel interactive.

Build docs developers (and LLMs) love

Get started for freeTalk to us