Card
Promotional and feature cards with cover images, ratings, action buttons, and decorative clipped borders.
Note
All presented components are responsive and compatible with Tailwind CSS. Make sure Tailwind is configured in your project to use them.
Promotional Card with Image
A media-rich promotional card featuring a gradient cover image, overlay title, rating badge with star icon, and a call-to-action button. The card includes hover shadow elevation for subtle interactivity. Use as a starting template for product showcases, event cards, or portfolio items.
Feature Card with Clipped Border
A benefit/feature card with a distinctive clipped-corner border effect using CSS clip-path. Displays an optional icon, bold uppercase title, and centered description text. The card adapts between light (cyan theme) and dark (gray/cyan theme) modes automatically. Ideal for feature grids, service listings, or benefit highlights.
Props Reference
| Prop | Type | Description | Default |
|---|---|---|---|
title | string | Card heading displayed in uppercase | 'High Performance' |
text | string | Description paragraph | 'Optimized components that deliver exceptional speed and efficiency for your applications.' |
icon | React.ReactNode | Icon element displayed above the title | <AlertCircle size={30} /> |
className | string | Additional CSS classes for the wrapper | undefined |
Sci-Fi Card
A sci-fi styled card with clip-path shapes, accent corner lines, and multiple variants (default, ghost, nested). Fully editable copy-paste component that adapts to any theme.
Props Reference
| Prop | Type | Description | Default |
|---|---|---|---|
variant | "default" | "ghost" | "nested" | Visual variant of the card | "default" |
shape | "octagon" | "slash-tl" | "slash-tr" | Optional clip-path shape | undefined |
cut | string | Size of the corner cut for shapes | "9px" |
cornerPos | Partial<Record<CornerPos, boolean>> | Decorative corner triangles | undefined |
accent | string | Accent color for lines and corners | "#00d4ff" |
borderColor | string | Border color for default variant | "rgba(0, 212, 255, 0.2)" |
background | string | Background color for default variant | "rgba(0, 212, 255, 0.04)" |
className | string | Additional Tailwind classes | "" |