Marketing Molecules
Available via @stackmates/ui-marketing
TestimonialCard
Customer quote card with author attribution. Three size variants for different layouts.
“Stackmates cut our proposal turnaround from 2 weeks to 48 hours.
“The AI-powered analysis gave us confidence to bid on projects we would have passed on before.
We won 3 enterprise contracts in the first month. The ROI speaks for itself.
TestimonialCardProps
| Prop | Type | Default | Description |
|---|---|---|---|
| testimonial* | { id, quote, author, role?, company?, avatarUrl? } | — | Testimonial data object |
| variant | 'default' | 'compact' | 'featured' | 'default' | Card size and padding variant |
| showQuotes | boolean | true | Show decorative quotation marks |
Installation
import { TestimonialCard } from '@stackmates/ui-marketing';Usage
Default
<TestimonialCard
testimonial={{
id: '1',
quote: 'Great product!',
author: 'Jane Doe',
role: 'CEO',
company: 'Acme',
}}
/>Featured variant
<TestimonialCard
testimonial={testimonial}
variant="featured"
showQuotes={false}
/>Accessibility
- Uses semantic <blockquote> for the testimonial text
- Author attribution is text-based, not color-dependent
FeatureCard
Feature highlight with icon, title, and description. Used standalone or inside FeatureGrid.
AI Analysis
Automatically extract requirements and score fit against your capabilities.
Team Collaboration
Assign sections to SMEs and track contributions in real time.
Smart Templates
Reuse winning content with context-aware template suggestions.
FeatureCardProps
| Prop | Type | Default | Description |
|---|---|---|---|
| feature* | { id, title, description, icon? } | — | Feature data object |
| variant | 'default' | 'bordered' | 'filled' | 'default' | Card visual style |
| iconSize | 'sm' | 'md' | 'lg' | 'md' | Icon container size |
Installation
import { FeatureCard } from '@stackmates/ui-marketing';Usage
Bordered
<FeatureCard
feature={{ id: '1', title: 'AI Analysis', description: '...', icon: '🤖' }}
variant="bordered"
/>Accessibility
- Icon is supplementary — title + description carry the meaning
- Supports custom icon renderers for accessible SVG icons
CategoryCard
Category grouping with title, description, and tag pills. Ideal for pattern libraries.
Connection Patterns
Safe wallet connection flows without exposing private keys.
Transaction Patterns
User-friendly transaction signing with clear fee breakdown.
CategoryCardProps
| Prop | Type | Default | Description |
|---|---|---|---|
| title* | string | — | Category title |
| description* | string | — | Category description |
| patterns* | string[] | — | Array of pattern/tag names displayed as pills |
Installation
import { CategoryCard } from '@stackmates/ui-marketing';Usage
Basic
<CategoryCard
title="Connection Patterns"
description="Safe wallet connection flows."
patterns={['Safe Connect', 'Disconnect Confirmation']}
/>Accessibility
- Pattern pills are plain text spans — readable by screen readers
- Card structure uses heading for title hierarchy
NavigationCard
Clickable card linking to another page with icon, badge, and optional tags.
Cover Letter
First impression matters. Set the tone for your proposal.
Technical Approach
Demonstrate your methodology and domain expertise.
Pricing
Competitive pricing with clear value breakdown.
NavigationCardProps
| Prop | Type | Default | Description |
|---|---|---|---|
| href* | string | — | Link destination |
| title* | string | — | Card title |
| description | string | — | Card description |
| icon | string | — | Emoji or icon string |
| badge | string | — | Optional badge/status text |
| badgeVariant | 'default' | 'success' | 'warning' | 'info' | 'default' | Badge color variant |
| disabled | boolean | false | Whether the card is disabled/inactive |
Installation
import { NavigationCard } from '@stackmates/ui-marketing';Usage
With icon and badge
<NavigationCard
href="/proposals"
icon="📄"
title="Cover Letter"
badge="Required"
badgeVariant="warning"
/>Disabled state
<NavigationCard
href="/pricing"
title="Pricing"
disabled
badge="Locked"
/>Accessibility
- Renders as Next.js Link for keyboard navigation
- Disabled variant renders as div (not focusable)
- Badge provides textual status, not color alone
PrincipleCard
Icon + rule + detail for displaying principles, guidelines, or safety rules.
App never sees private keys
Wallet adapters handle all signing operations. Keys stay in the wallet.
Validate all inputs at boundaries
Zod schemas at every system boundary. No as-casts on external data.
Tests prove transformations
Every value transformation has a test proving input A produces output B.
PrincipleCardProps
| Prop | Type | Default | Description |
|---|---|---|---|
| icon* | string | — | Emoji or icon string |
| rule* | string | — | The principle/rule title |
| detail* | string | — | Supporting detail/explanation |
Installation
import { PrincipleCard } from '@stackmates/ui-marketing';Usage
Basic
<PrincipleCard
icon="🔐"
rule="App never sees private keys"
detail="Wallet adapters handle all signing."
/>Accessibility
- Icon is decorative — rule text is the primary content
- Detail text provides expanded explanation
TeamMember
Team member profile with auto-generated initials avatar, role, and credentials.
TeamMemberProps
| Prop | Type | Default | Description |
|---|---|---|---|
| role* | string | — | Team role/position |
| name* | string | — | Person's name |
| credential | string | — | Credentials or experience |
| initials | string | — | Avatar initials (2 chars, auto-derived from name if omitted) |
Installation
import { TeamMember } from '@stackmates/ui-marketing';Usage
With credential
<TeamMember
role="Project Manager"
name="Sarah Chen"
credential="PMP, 12 commercial projects"
/>Accessibility
- Initials are auto-derived from name when not specified
- Role and name are plain text — fully accessible
DataCard
Card with title and bulleted item list for requirements, features, or data summaries.
Required Documents
- Company registration certificate
- Professional indemnity insurance
- Past project references (min 3)
- Health & safety policy
Technical Requirements
- ISO 9001:2015 certified processes
- BIM Level 2 capability
- Environmental management plan
DataCardProps
| Prop | Type | Default | Description |
|---|---|---|---|
| title* | string | — | Card title |
| items* | string[] | — | List of items to display as bullet points |
| variant | 'default' | 'muted' | 'default' | Card background variant |
Installation
import { DataCard } from '@stackmates/ui-marketing';Usage
Default
<DataCard
title="Required Documents"
items={['Certificate', 'Insurance', 'References']}
/>Muted variant
<DataCard title="Tech Requirements" items={items} variant="muted" />Accessibility
- Uses semantic <ul> list with bullet markers
- Bullet dots use currentColor for theme compatibility
CertBadge
Certification or trust signal badge with checkmark, name, and optional detail.
CertBadgeProps
| Prop | Type | Default | Description |
|---|---|---|---|
| name* | string | — | Certification name |
| detail | string | — | Supporting detail or description |
Installation
import { CertBadge } from '@stackmates/ui-marketing';Usage
With detail
<CertBadge name="ISO 9001:2015" detail="Quality Management" />Name only
<CertBadge name="GDPR Compliant" />Accessibility
- Checkmark is decorative — certification name is the primary content
- Detail text provides context for the certification