Service Feature Card

Marketing

Cards

Feature cards with stacked visual mockups for showcasing services and capabilities.

Preview

Document stack visual cards

Popular

Design Systems

Create consistent, scalable design systems with reusable components and design tokens.

Documentation

Auto-generated documentation for your components with live examples.

-Live previews
-API reference
-Code examples

Analytics

Track component usage and adoption across your organization.

Visual Types

Three built-in visual mockup styles

Documents

Stacked document visual style

Devices

Mobile and tablet device mockups

Browser

Browser window mockup

Accent Colors

Different accent color options

Indigo

Primary brand color

Teal

Secondary accent

Purple

Creative focus

Amber

Attention grabbing

With Feature Lists

Cards with bullet point features

New

Component Library

A comprehensive set of production-ready components for your next project.

-100+ components
-TypeScript support
-Dark mode ready
-Fully accessible

Design Tokens

Centralized design decisions for consistent styling across your application.

-Color palettes
-Typography scales
-Spacing system
-Shadow definitions

Props

ServiceFeatureCard component API reference

Prop	Type	Default	Description
`title*`	`string`	—	Card title
`description*`	`string`	—	Card description
`visual`	`'documents' \| 'devices' \| 'browser' \| 'custom'`	`'documents'`	Visual mockup type
`customVisual`	`ReactNode`	—	Custom visual element
`accentColor`	`'indigo' \| 'teal' \| 'purple' \| 'amber'`	`'indigo'`	Accent color for visual
`badge`	`string`	—	Badge text
`badgeVariant`	`'default' \| 'success' \| 'warning' \| 'error' \| 'info'`	—	Badge color variant
`features`	`string[]`	—	List of feature bullet points
`action`	`{ label: string, onClick: () => void }`	—	Action button configuration
`className`	`string`	—	Additional CSS classes

Usage

Import and implementation examples

import { ServiceFeatureCard } from '@/blocks/data-display/service-feature-card'

// Basic usage
<ServiceFeatureCard
  title="Design Systems"
  description="Create consistent, scalable design systems."
  visual="documents"
  accentColor="indigo"
/>

// With badge and action
<ServiceFeatureCard
  title="Component Library"
  description="Production-ready components."
  visual="browser"
  badge="New"
  badgeVariant="success"
  action={{
    label: 'Learn more',
    onClick: handleClick,
  }}
/>

// With feature list
<ServiceFeatureCard
  title="Full Featured"
  description="Everything you need."
  features={[
    'Feature one',
    'Feature two',
    'Feature three',
  ]}
/>

Features

Built-in functionality

3 built-in visuals: Documents, devices, and browser mockups
4 accent colors: Indigo, teal, purple, and amber options
Badge support: Optional badge with color variants
Feature lists: Bullet point feature list support
Action button: Optional CTA button with click handler
Custom visuals: Support for custom visual elements
Hover animations: Subtle animations on visual elements
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Card uses semantic article elementAction button is properly labeledVisual mockups are decorative with aria-hidden

Keyboard Navigation

Key	Action
`Tab`	Navigate to action button
`Enter / Space`	Activate action button

Notes

Visual mockups are purely decorative
Text content has sufficient contrast
Feature list uses proper list semantics

Related Components

Card Visual Feature Cards Badge