Skip to main content

Documentation Index

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

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

ClassificationStamp renders a compact inline badge that mimics the look of a rubber-stamped security classification mark — uppercase monospace text inside a thin colored border with a matching tinted background. It appears throughout the app wherever status or category context is needed at a glance: project cards carry data-source labels, writing article headers display article-type stamps, case study sections use it for methodology tags, and the About page history logs apply it to clearance-level and employment-status indicators.

​
Props

​
text
string
required
The stamp label text. Rendered in monospace and forced to uppercase via Tailwind’s uppercase and tracking-widest utility classes — no manual uppercasing needed at the call site.
​
variant
'lime' | 'magenta' | 'violet' | 'cyan'
default:"lime"
Controls the color theme applied to the text, border, and background of the stamp. Each variant maps to a single brand color defined in the project’s Tailwind config.
​
className
string
default:""
Additional Tailwind utility classes passed directly to the wrapper div. Use this to adjust spacing, override layout, or layer the stamp inside a flex or grid container.

​
Variant Color Reference

Each variant corresponds to a named color in the project’s Tailwind palette. The badge applies that color to text, border, and a low-opacity background fill (/10 alpha).
VariantColor NameHexApplied To
limeNeon Green#84FF00Text, border, bg-lime/10 fill
magentaHot Pink#FF2BD6Text, border, bg-magenta/10 fill
violetPurple#a855f7Text, border, bg-violet/10 fill
cyanElectric Cyan#00F5FFText, border, bg-cyan/10 fill

​
Usage

import { ClassificationStamp } from '../components/casefile/ClassificationStamp';

// Ascending clearance levels
<ClassificationStamp text="UNCLASSIFIED" variant="lime" />
<ClassificationStamp text="RESTRICTED" variant="violet" />
<ClassificationStamp text="CONFIDENTIAL" variant="cyan" />
<ClassificationStamp text="SECRET" variant="magenta" />
<ClassificationStamp text="TOP SECRET" variant="magenta" />

// Employment status indicator
<ClassificationStamp text="ACTIVE" variant="lime" />
Text is automatically uppercased by the component’s Tailwind classes (tracking-widest uppercase). You can pass mixed-case or lowercase strings to text and they will always render as uppercase — no need to shout-case your strings at the call site.

Build docs developers (and LLMs) love

Get started for freeTalk to us