← Back to portfolio UI kit · Figma Community
Side project · Figma Community

Multi purpose modern card design

A reusable card component set for Figma, built with Auto Layout to support horizontal and vertical layouts across light and dark themes.

Tools
Figma
Type
Free community component set
Reach
856+ designers
01 The project

One card, every layout it needs to handle

I designed and published a multi-purpose card component set for Figma that supports both horizontal and vertical layouts in light and dark themes. Built with Auto Layout, the cards adapt smoothly to different content and mobile use cases, making them easy to reuse across dashboards, apps, and websites.

I shared it on the Figma Community under CC BY 4.0, and it's since been adopted by hundreds of designers and tagged for auto layout, mobile, and modern card use.

856+

designers using and remixing the file

Free to duplicate and remix on the Figma Community, licensed CC BY 4.0.

View the live Figma template ↗
Auto layout Mobile ready Modern card
02 Two layouts, two themes

Vertical and horizontal, each in light and dark

Every card ships with a title and text toggle, so the same component can flex from a full editorial card down to a bare image-and-arrow tile without breaking the Auto Layout structure.

1 Vertical card

Image on top, content stacked below. Title and body text can each be switched off independently while the card stays balanced.

Light · full
Vertical card, light mode, title and text on
Light · no title
Vertical card, light mode, title off
Light · no text
Vertical card, light mode, text off
Dark · full
Vertical card, dark mode, title and text on
Dark · no title
Vertical card, dark mode, title off
Dark · no text
Vertical card, dark mode, text off
2 Horizontal card

Image and content sit side by side, tuned for list-style layouts and dense dashboards where vertical space is limited.

Light · full
Horizontal card, light mode, title and text on
Light · no title
Horizontal card, light mode, title off
Light · no text
Horizontal card, light mode, text off
Dark · full
Horizontal card, dark mode, title and text on
Dark · no title
Horizontal card, dark mode, title off
Dark · no text
Horizontal card, dark mode, text off
03 The payoff

A component that keeps getting reused

What started as a single Auto Layout exercise became a free Figma Community file, shared under CC BY 4.0 and now adopted by hundreds of designers building dashboards, apps, and websites.

View the live Figma template ↗
Figma Community file Dark + light mode 856+ designers Auto layout system
{{ lightboxImg }}