Card Content - React

Card Content

Impor

import { Card } from '@idds/react';

Contoh Penggunaan

Contoh 1 - Basic Card

Title

This is a placeholder title for demonstration purposes.

Contoh 2 - Horizontal Card

Title

Please provide a title that accurately reflects the content, along with a detailed description.

Contoh 3 - Overlay Card

Title

This is a placeholder title for demonstration purposes.

Contoh 4 - Card Plain

CardPlain Title

This is a custom content block inside a CardPlain component. It provides a simple bordered container with a radius, letting you structure the content however you want.

Props

Name	Type	Default	Required	Description
`variant?`	`'basic' \| 'horizontal' \| 'overlay'`	`'basic'`	No	Varian card: basic (vertical), horizontal (layout horizontal), overlay (media sebagai background dengan overlay).
`mediaPosition?`	`'top' \| 'bottom' \| 'left' \| 'right'`	—	No	Posisi media: untuk basic (top/bottom, default: bottom), horizontal (left/right, default: right), overlay (top/bottom, default: top).
`avatar?`	`string`	—	No	Avatar image source.
`avatarAlt?`	`string`	—	No	Avatar alt text.
`title?`	`ReactNode`	—	No	Judul card.
`description?`	`ReactNode`	—	No	Deskripsi card.
`mediaSrc?`	`string`	—	No	Media image source.
`mediaAlt?`	`string`	—	No	Media alt text.
`showButton?`	`boolean`	`false`	No	Apakah button ditampilkan.
`buttonText?`	`string`	—	No	Button text.
`buttonHierarchy?`	`'primary' \| 'secondary' \| 'tertiary' \| 'link'`	`'primary'`	No	Button hierarchy.
`onButtonClick?`	`() => void`	—	No	Callback saat button diklik.
`className?`	`string`	—	No	ClassName tambahan untuk container card.