Visual Feature Cards

Marketing
Cards

Extended illustrated feature cards with soft pastel gradients and custom SVG illustrations.

Preview

Feature cards with custom illustrations

TS
JS

Full-Stack Engineering

Build web applications with React, Node.js, and TypeScript.

React
Node.js
TypeScript

Cybersecurity

Protect data and networks through real-world security training.

Security
Networking

Front-End Engineering

Design and build responsive user interfaces with React.

React
CSS
UI/UX

Network & Infrastructure

Cards for technical services

API Gateway

Connect all your services with a unified API layer and monitoring.

REST
GraphQL
Microservices

Security Shield

Enterprise-grade security with multi-layer protection.

Encryption
Auth
Firewall

Props

ExtendedFeatureCard component API reference

PropTypeDefaultDescription
illustration*ReactNode—Custom illustration component
title*string—Card title
description*string—Card description text
tagsstring[][]Array of tag labels

Usage

Import and implementation examples

import { ExtendedFeatureCard } from '@/components/feature-cards'
import { DashboardIllustration } from '@/components/illustrations'

// Basic usage
<ExtendedFeatureCard
  illustration={<DashboardIllustration />}
  title="Full-Stack Engineering"
  description="Build web applications with React."
  tags={['React', 'Node.js']}
/>

// Create custom illustrations
function CustomIllustration() {
  return (
    <div className="relative w-full h-48 flex items-center justify-center">
      {/* Your custom SVG or icons */}
    </div>
  )
}

<ExtendedFeatureCard
  illustration={<CustomIllustration />}
  title="Custom Feature"
  description="With your own illustration."
/>

Features

Built-in functionality

  • 10+ illustrations: Pre-built soft pastel gradient illustrations
  • Soft color palette: Dreamy aesthetic with subtle gradients
  • Glassmorphic effects: Frosted glass and blur effects
  • Tag badges: Optional technology or category tags
  • Hover transitions: Smooth hover state animations
  • Dark mode: Full dark mode support with adjusted colors

Accessibility

Accessibility considerations

ARIA Attributes

Card uses semantic article elementIllustrations are decorative with aria-hiddenTags use proper badge semantics

Keyboard Navigation

KeyAction
TabNavigate between cards

Notes

  • Illustrations are purely decorative
  • Text content has sufficient contrast
  • Hover states have focus equivalents

Related Components

Service Feature CardCardBadge