Plex UI
Figma Kit

Card

Surface primitive for composing forms, stats, and showcase tiles

import { Card } from "@plexui/ui/components/Card";

Examples

Overview

Project activity

Your team opened 12 issues and closed 8 pull requests over the last 7 days.

Login

Log in to your account

Enter your email below to log in to your account.

Don't have an account? Sign up

Create project

Create project

Deploy a new project in one-click with sensible defaults.

Where your functions and database will live.

Payment Method

Payment Method

All transactions are secure and encrypted

Enter your 16-digit number.
Billing Address
The billing address associated with your payment method

No team members (empty state)

No team members
Invite your team to collaborate on this project.

How did you hear about us?

How did you hear about us?

Select the option that best describes how you heard about us.

Processing your request

Processing your request
Please wait while we process your request. Do not refresh the page.

Pricing

Starter

$0/ month

  • 1 project
  • Community support
  • Plex UI core

Pro

$19/ month

  • Unlimited projects
  • Priority support
  • All Figma kits
  • Early components

Anatomy

<Card>
  <Card.Header>
    <Card.Title />
    <Card.Description />
    <Card.Action />  {/* optional top-right slot */}
  </Card.Header>
  <Card.Content />
  <Card.Footer />
</Card>

API

Card

PropTypeDefaultDescription
variant"outline" | "solid" | "ghost""outline"Visual variant
size"sm" | "md" | "lg""md"Padding scale
interactivebooleanfalseAdds hover and focus affordances. Automatic when href is set.
hrefstring—Renders the Card as a link via the configured LinkComponent.
externalbooleanauto-detectedForces target="_blank" and rel="noopener noreferrer" when href is set.
asComponentType | "a"—Overrides the link component (e.g. next/link).
classNamestring—Applied to the root element

All other <div> or <a> attributes are forwarded to the root.

Compound parts

PartElementPurpose
Card.Header<div>Title + description + optional action
Card.Title<h3>Card heading
Card.Description<p>Subtitle / explanation
Card.Content<div>Primary body region
Card.Footer<div>Trailing actions row
Card.Action<div>Absolute top-right slot inside Card.Header

On this page

ExamplesOverviewLoginCreate projectPayment MethodNo team members (empty state)How did you hear about us?Processing your requestPricingAnatomyAPICardCompound parts