Card

Discover versatile card components in Bramble UI for captivating content presentation. Elevate your web design with modern card layouts and interactions.

Basic

Card with title, description and link.

akita

The Akita is a Japanese dog breed of large size. Originating from the mountains of northern Japan, the Akita has a short double coat similar to that of many other northern spitz breeds. Historically, they were used by samurai for guarding, fighting and the hunting of bears.

beagle

The beagle is a breed of small scent hound, similar in appearance to the much larger foxhound. The beagle was developed primarily for hunting hare, known as beagling

corgi

The Corgi is a cattle herding dog breed that originated in Wales. Corgis descended from the Spitz family of dogs.

dachshund

The dachshund, also known as the wiener dog, badger dog, doxie, and sausage dog, is a short-legged, long-bodied, hound-type dog breed. The dog may be smooth-haired, wire-haired, or long-haired. Coloration varies.

husky

The Alaskan husky is a breed of medium-sized working sled dog, developed specifically for its performance as such.

poodle

The Poodle, called the Pudel in German and the Caniche in French, is a breed of water dog. The breed is divided into four varieties based on size, the Standard Poodle, Medium Poodle, Miniature Poodle and Toy Poodle, although the Medium Poodle is not universally recognised.

import {Card} from '@/ui'
				
<Card
    title={name}
    description={description}
    link={link}
/>

Image

Card with image and custom link label. Column layout

akita

beagle

The beagle is a breed of small scent hound, similar in appearance to the much larger foxhound. The beagle was developed primarily for hunting hare, known as beagling

corgi

The Corgi is a cattle herding dog breed that originated in Wales. Corgis descended from the Spitz family of dogs.

dachshund

husky

The Alaskan husky is a breed of medium-sized working sled dog, developed specifically for its performance as such.

poodle

<Card
    title={name}
    description={description}
    image={src}
    link={link}
    linkLabel={name}
    layout='column'
/>

Row layout

akita

beagle

The beagle is a breed of small scent hound, similar in appearance to the much larger foxhound. The beagle was developed primarily for hunting hare, known as beagling

corgi

The Corgi is a cattle herding dog breed that originated in Wales. Corgis descended from the Spitz family of dogs.

dachshund

husky

The Alaskan husky is a breed of medium-sized working sled dog, developed specifically for its performance as such.

poodle

<Card
    title={name}
    description={description}
    image={src}
    link={link}
    layout='row'
/>

Full layout

akita

<Card
    title={name}
    description={description}
    image={src}
    link={link}
    layout='full'
/>

Product Example

Column layout

Cusimax 4-slice Toaster Deal!

Toaster 4 Slices, Cusimax Stainless Steel Toaster with 4 Extra-Wide Bread Slots and 6 Variable Browning Shade Controls, Featuring with Defrost, Reheat and Cancel Settings, Removable Crumb Tray, Black

Cusimax 4-slice Toaster

Toaster 4 Slices, Cusimax Stainless Steel Toaster with 4 Extra-Wide Bread Slots and 6 Variable Browning Shade Controls, Featuring with Defrost, Reheat and Cancel Settings, Removable Crumb Tray, Black

Cusimax 4-slice Toaster

Toaster 4 Slices, Cusimax Stainless Steel Toaster with 4 Extra-Wide Bread Slots and 6 Variable Browning Shade Controls, Featuring with Defrost, Reheat and Cancel Settings, Removable Crumb Tray, Black

Cusimax 4-slice Toaster

Toaster 4 Slices, Cusimax Stainless Steel Toaster with 4 Extra-Wide Bread Slots and 6 Variable Browning Shade Controls, Featuring with Defrost, Reheat and Cancel Settings, Removable Crumb Tray, Black

Cusimax 4-slice Toaster

Toaster 4 Slices, Cusimax Stainless Steel Toaster with 4 Extra-Wide Bread Slots and 6 Variable Browning Shade Controls, Featuring with Defrost, Reheat and Cancel Settings, Removable Crumb Tray, Black

Cusimax 4-slice Toaster

Toaster 4 Slices, Cusimax Stainless Steel Toaster with 4 Extra-Wide Bread Slots and 6 Variable Browning Shade Controls, Featuring with Defrost, Reheat and Cancel Settings, Removable Crumb Tray, Black

[
    {
		"name": "Cusimax 4-slice Toaster",
		"description": "Toaster 4 Slices, Cusimax Stainless Steel Toaster with 4 Extra-Wide Bread Slots and ...",
		"src": "/img/products/Toaster.jpg",
		"price": 24.99,
		"price_previous": 44.99,
		"cc": "GBP",
		"rating": 4.4,
        "range": 5,
		"link": "#"
	}, 
    ...
]
    
<Card
    title={item.name}
    description={item.description}
    image={item.src}
    price={item.price}
    cc={item.cc}
    rating={item.rating}
    link={item.link}
    layout='column'
    badge={item.price_previous ? 'Deal!' : ''}
    badgeStyle={item.price_previous ? 'bg-info' : ''}
/>

Row layout

Cusimax 4-slice Toaster Deal!

Toaster 4 Slices, Cusimax Stainless Steel Toaster with 4 Extra-Wide Bread Slots and 6 Variable Browning Shade Controls, Featuring with Defrost, Reheat and Cancel Settings, Removable Crumb Tray, Black

Cusimax 4-slice Toaster

Toaster 4 Slices, Cusimax Stainless Steel Toaster with 4 Extra-Wide Bread Slots and 6 Variable Browning Shade Controls, Featuring with Defrost, Reheat and Cancel Settings, Removable Crumb Tray, Black

Cusimax 4-slice Toaster

Toaster 4 Slices, Cusimax Stainless Steel Toaster with 4 Extra-Wide Bread Slots and 6 Variable Browning Shade Controls, Featuring with Defrost, Reheat and Cancel Settings, Removable Crumb Tray, Black

Cusimax 4-slice Toaster

Toaster 4 Slices, Cusimax Stainless Steel Toaster with 4 Extra-Wide Bread Slots and 6 Variable Browning Shade Controls, Featuring with Defrost, Reheat and Cancel Settings, Removable Crumb Tray, Black

Cusimax 4-slice Toaster

Toaster 4 Slices, Cusimax Stainless Steel Toaster with 4 Extra-Wide Bread Slots and 6 Variable Browning Shade Controls, Featuring with Defrost, Reheat and Cancel Settings, Removable Crumb Tray, Black

Cusimax 4-slice Toaster

Toaster 4 Slices, Cusimax Stainless Steel Toaster with 4 Extra-Wide Bread Slots and 6 Variable Browning Shade Controls, Featuring with Defrost, Reheat and Cancel Settings, Removable Crumb Tray, Black

<Card
    title={item.name}
    description={item.description}
    image={item.src}
    price={item.price}
    cc={item.cc}
    rating={item.rating}
    range={item.range}
    link={item.link}
    layout='row'
    badge={item.price_previous ? 'Deal!' : ''}
    badgeStyle={item.price_previous ? 'bg-info' : ''}
/>

Amazon Example

Column layout

Amazon Basics microSDXC Memory Card with Full Size Adapter, A2, U3, Read Speed up to 100 MB/s, 128 GB, Black

TIMMKOO Mp3 Player Case Cover for Q3E and Q5

Amazon Basics Hard Travel Carrying Case for 5 Inch GPS, Black

WiFi Mp3 Player with Bluetooth, TIMMKOO 4.0" Full Touch Screen Mp3 Mp4 Player with Speaker, Portable HiFi Sound Walkman Digit

SanDisk 16GB Industrial MLC MicroSD SDHC UHS-I Class 10 SDSDQAF3-016G Bulk (1 Pack)

TIMMKOO MP3 Player with Bluetooth, 4.0" Full Touchscreen Mp4 Mp3 Player with Speaker, Portable HiFi Sound Mp3 Music Player wi

<Card
	className='amazon'
	description={item.title}
	image={item.image}
	price={item.price.value}
	cc={item.price.currency}
	rating={item.rating}
	link={item.link}
	layout='column'
/>

Row layout

Amazon Basics microSDXC Memory Card with Full Size Adapter, A2, U3, Read Speed up to 100 MB/s, 128 GB, Black

TIMMKOO Mp3 Player Case Cover for Q3E and Q5

Amazon Basics Hard Travel Carrying Case for 5 Inch GPS, Black

WiFi Mp3 Player with Bluetooth, TIMMKOO 4.0" Full Touch Screen Mp3 Mp4 Player with Speaker, Portable HiFi Sound Walkman Digit

SanDisk 16GB Industrial MLC MicroSD SDHC UHS-I Class 10 SDSDQAF3-016G Bulk (1 Pack)

TIMMKOO MP3 Player with Bluetooth, 4.0" Full Touchscreen Mp4 Mp3 Player with Speaker, Portable HiFi Sound Mp3 Music Player wi

<Card
	className='amazon'
	description={item.title}
	image={item.image}
	price={item.price.value}
	cc={item.price.currency}
	rating={item.rating}
	link={item.link}
	layout='row'
/>

Dark theme

Cusimax 4-slice Toaster Discount!

Toaster 4 Slices, Cusimax Stainless Steel Toaster with 4 Extra-Wide Bread Slots and 6 Variable Browning Shade Controls, Featuring with Defrost, Reheat and Cancel Settings, Removable Crumb Tray, Black

Cusimax 4-slice Toaster

Toaster 4 Slices, Cusimax Stainless Steel Toaster with 4 Extra-Wide Bread Slots and 6 Variable Browning Shade Controls, Featuring with Defrost, Reheat and Cancel Settings, Removable Crumb Tray, Black

Cusimax 4-slice Toaster

Toaster 4 Slices, Cusimax Stainless Steel Toaster with 4 Extra-Wide Bread Slots and 6 Variable Browning Shade Controls, Featuring with Defrost, Reheat and Cancel Settings, Removable Crumb Tray, Black

Cusimax 4-slice Toaster

Toaster 4 Slices, Cusimax Stainless Steel Toaster with 4 Extra-Wide Bread Slots and 6 Variable Browning Shade Controls, Featuring with Defrost, Reheat and Cancel Settings, Removable Crumb Tray, Black

Cusimax 4-slice Toaster

Toaster 4 Slices, Cusimax Stainless Steel Toaster with 4 Extra-Wide Bread Slots and 6 Variable Browning Shade Controls, Featuring with Defrost, Reheat and Cancel Settings, Removable Crumb Tray, Black

Cusimax 4-slice Toaster

Toaster 4 Slices, Cusimax Stainless Steel Toaster with 4 Extra-Wide Bread Slots and 6 Variable Browning Shade Controls, Featuring with Defrost, Reheat and Cancel Settings, Removable Crumb Tray, Black

<Card
    className='dark'
    ...
    badge={item.price_previous ? 'Discount!' : ''}
    badgeStyle={item.price_previous ? 'bg-accent text-dark text-lg' : ''}
    ...
/>