Molecules

Cards

Content cards combining image, heading, description, and tags.

Basic Card

Default card with title and description.

Card Title

A brief description of the card content goes here.

Card with Image

Card with Image

Cards can include a featured image.

Linked Cards

Cards with href become clickable links with hover effects.

Clickable Card

Clickable Card

This entire card is a link. Hover to see the effect.
Another Link

Another Link

Cards support full hover animations.

Cards with Tags

Tags help categorize content.

Featured Article
DesignUX

Featured Article

An article with category tags.
Project Showcase
DevelopmentReactTypeScript

Project Showcase

Project card with multiple tags.

Card with Meta

Additional metadata like dates or read time.

Blog Post Title
Tutorial

Blog Post Title

A brief excerpt from the blog post.

5 min read

Card Variants

Different layout variants for various contexts.

Horizontal Card

Horizontal Layout

Horizontal Layout

Image on the side for a different look.

Compact Card

Compact Card

Smaller padding for denser layouts.

Another Compact

Great for lists and sidebars.