Turbine
Theme Settings
Mode
Direction
Layout
Primary Color
Layout Rounded
Navbar Type
Footer Type
Card Style
Sidebar Settings

Theme

User Profile

Header Settings

Theme

Sidebar Background

Settings are automatically saved to your browser's local storage.

© 2025 Turbine UI

Home / UI Elements / Cards

Cards

Flexible and extensible content containers with multiple variants

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Card Title

Card Cubcard

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Featured

Card Title

With supporting text below as a natural lead-in to additional content.

Card link

Card Title

With supporting text below as a natural lead-in to additional content.

Card link

Last updated 12 mins ago

Animation Card
Image Description

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Image Description
Image Description

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Image Description

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Colored Border Cards:

Dark Card

With supporting text below as a natural lead-in to additional content.

Card link

Primary Card

With supporting text below as a natural lead-in to additional content.

Card link

Info Card

With supporting text below as a natural lead-in to additional content.

Card link

Success Card

With supporting text below as a natural lead-in to additional content.

Card link

Danger Card

With supporting text below as a natural lead-in to additional content.

Card link

Warning Card

With supporting text below as a natural lead-in to additional content.

Card link

Blue Card

With supporting text below as a natural lead-in to additional content.

Card link

Sky Card

With supporting text below as a natural lead-in to additional content.

Card link
Dashed Border Cards:

Dashed Card

With supporting text below as a natural lead-in to additional content.

Card link

Dotted Card

With supporting text below as a natural lead-in to additional content.

Card link

Double Card

With supporting text below as a natural lead-in to additional content.

Card link

Success Card

With supporting text below as a natural lead-in to additional content.

Card link

Danger Card

With supporting text below as a natural lead-in to additional content.

Card link

Warning Card

With supporting text below as a natural lead-in to additional content.

Card link

Blue Card

With supporting text below as a natural lead-in to additional content.

Card link

Sky Card

With supporting text below as a natural lead-in to additional content.

Card link
Horizontal Cards:
Image Description

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Last updated 5 mins ago

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Last updated 5 mins ago

Image Description
Fill Cards:

Dark card

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Primary card

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Info card

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Success card

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Danger card

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Warning card

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Blue card

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Sky card

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link
Fill Cards:

Dark card

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Primary card

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Info card

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Success card

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Danger card

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Warning card

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Blue card

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Sky card

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link
Group Card
Image Description

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 5 mins ago

Image Description

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 5 mins ago

Image Description

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 5 mins ago