Card
A Card is a container that groups and organizes content in a consistent manner.
Preview
Code
Card title
Card descriptionThis is the card body content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Examples
Custom ClassName
Preview
Code
Card title
Card descriptionThis is the card body content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Card with form
Preview
Code
Props
Name | Type | Default |
|---|---|---|
accept | string | — |
acceptCharset | string | — |
action | string | ((formData: FormData) => void | Promise<void>) | — |
allowFullScreen | boolean | — |
allowTransparency | boolean | — |
alt | string | — |
as | string | — |
async | boolean | — |
autoComplete | string | — |
autoPlay | boolean | — |
capture | boolean | "user" | "environment" | — |
cellPadding | string | number | — |
cellSpacing | string | number | — |
charSet | string | — |
challenge | string | — |
checked | boolean | — |
cite | string | — |
classID | string | — |
cols | number | — |
colSpan | number | — |
controls | boolean | — |
coords | string | — |
crossOrigin | CrossOrigin | — |
data | string | — |
dateTime | string | — |
default | boolean | — |
defer | boolean | — |
disabled | boolean | — |
download | any | — |
encType | string | — |
form | string | — |
formAction | string | ((formData: FormData) => void | Promise<void>) | — |
formEncType | string | — |
formMethod | string | — |
formNoValidate | boolean | — |
formTarget | string | — |
frameBorder | string | number | — |
headers | string | — |
height | string | number | — |
high | number | — |
href | string | — |
hrefLang | string | — |
htmlFor | string | — |
httpEquiv | string | — |
integrity | string | — |
keyParams | string | — |
keyType | string | — |
kind | string | — |
label | string | — |
list | string | — |
loop | boolean | — |
low | number | — |
manifest | string | — |
marginHeight | number | — |
marginWidth | number | — |
max | string | number | — |
maxLength | number | — |
media | string | — |
mediaGroup | string | — |
method | string | — |
min | string | number | — |
minLength | number | — |
multiple | boolean | — |
muted | boolean | — |
name | string | — |
noValidate | boolean | — |
open | boolean | — |
optimum | number | — |
pattern | string | — |
placeholder | string | — |
playsInline | boolean | — |
poster | string | — |
preload | string | — |
readOnly | boolean | — |
required | boolean | — |
reversed | boolean | — |
rows | number | — |
rowSpan | number | — |
sandbox | string | — |
scope | string | — |
scoped | boolean | — |
scrolling | string | — |
seamless | boolean | — |
selected | boolean | — |
shape | string | — |
size | number | — |
sizes | string | — |
span | number | — |
src | string | — |
srcDoc | string | — |
srcLang | string | — |
srcSet | string | — |
start | number | — |
step | string | number | — |
summary | string | — |
target | string | — |
type | string | — |
useMap | string | — |
value | string | number | readonly string[] | — |
width | string | number | — |
wmode | string | — |
wrap | string | — |
defaultChecked | boolean | — |
defaultValue | string | number | readonly string[] | — |
suppressContentEditableWarning | boolean | — |
suppressHydrationWarning | boolean | — |
accessKey | string | — |
autoCapitalize | (string & {}) | "off" | "none" | "on" | "sentences" | "words" | "characters" | — |
autoFocus | boolean | — |
className | string | — |
contentEditable | Booleanish | "inherit" | "plaintext-only" | — |
contextMenu | string | — |
dir | string | — |
draggable | Booleanish | — |
enterKeyHint | "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | — |
hidden | boolean | — |
id | string | — |
lang | string | — |
nonce | string | — |
slot | string | — |
spellCheck | Booleanish | — |
style | CSSProperties | — |
tabIndex | number | — |
title | string | — |
translate | "yes" | "no" | — |
radioGroup | string | — |
role | AriaRole | — |
about | string | — |
content | string | — |
datatype | string | — |
inlist | any | — |
prefix | string | — |
property | string | — |
rel | string | — |
resource | string | — |
rev | string | — |
typeof | string | — |
vocab | string | — |
autoCorrect | string | — |
autoSave | string | — |
color | string | — |
itemProp | string | — |
itemScope | boolean | — |
itemType | string | — |
itemID | string | — |
itemRef | string | — |
results | number | — |
security | string | — |
unselectable | "off" | "on" | — |
popover | "" | "auto" | "manual" | — |
popoverTargetAction | "toggle" | "show" | "hide" | — |
popoverTarget | string | — |
inert | boolean | — |
inputMode | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | — |
is | string | — |
exportparts | string | — |
part | string | — |
dangerouslySetInnerHTML | { __html: string | TrustedHTML; } | — |
onCopy | ClipboardEventHandler<HTMLElement> | — |
onCopyCapture | ClipboardEventHandler<HTMLElement> | — |
onCut | ClipboardEventHandler<HTMLElement> | — |
onCutCapture | ClipboardEventHandler<HTMLElement> | — |
onPaste | ClipboardEventHandler<HTMLElement> | — |
onPasteCapture | ClipboardEventHandler<HTMLElement> | — |
onCompositionEnd | CompositionEventHandler<HTMLElement> | — |
onCompositionEndCapture | CompositionEventHandler<HTMLElement> | — |
onCompositionStart | CompositionEventHandler<HTMLElement> | — |
onCompositionStartCapture | CompositionEventHandler<HTMLElement> | — |
onCompositionUpdate | CompositionEventHandler<HTMLElement> | — |
onCompositionUpdateCapture | CompositionEventHandler<HTMLElement> | — |
onFocus | FocusEventHandler<HTMLElement> | — |
onFocusCapture | FocusEventHandler<HTMLElement> | — |
onBlur | FocusEventHandler<HTMLElement> | — |
onBlurCapture | FocusEventHandler<HTMLElement> | — |
onChange | FormEventHandler<HTMLElement> | — |
onChangeCapture | FormEventHandler<HTMLElement> | — |
onBeforeInput | FormEventHandler<HTMLElement> | — |
onBeforeInputCapture | FormEventHandler<HTMLElement> | — |
onInput | FormEventHandler<HTMLElement> | — |
onInputCapture | FormEventHandler<HTMLElement> | — |
onReset | FormEventHandler<HTMLElement> | — |
onResetCapture | FormEventHandler<HTMLElement> | — |
onSubmit | FormEventHandler<HTMLElement> | — |
onSubmitCapture | FormEventHandler<HTMLElement> | — |
onInvalid | FormEventHandler<HTMLElement> | — |
onInvalidCapture | FormEventHandler<HTMLElement> | — |
onLoad | ReactEventHandler<HTMLElement> | — |
onLoadCapture | ReactEventHandler<HTMLElement> | — |
onError | ReactEventHandler<HTMLElement> | — |
onErrorCapture | ReactEventHandler<HTMLElement> | — |
onKeyDown | KeyboardEventHandler<HTMLElement> | — |
onKeyDownCapture | KeyboardEventHandler<HTMLElement> | — |
onKeyPress | KeyboardEventHandler<HTMLElement> | — |
onKeyPressCapture | KeyboardEventHandler<HTMLElement> | — |
onKeyUp | KeyboardEventHandler<HTMLElement> | — |
onKeyUpCapture | KeyboardEventHandler<HTMLElement> | — |
onAbort | ReactEventHandler<HTMLElement> | — |
onAbortCapture | ReactEventHandler<HTMLElement> | — |
onCanPlay | ReactEventHandler<HTMLElement> | — |
onCanPlayCapture | ReactEventHandler<HTMLElement> | — |
onCanPlayThrough | ReactEventHandler<HTMLElement> | — |
onCanPlayThroughCapture | ReactEventHandler<HTMLElement> | — |
onDurationChange | ReactEventHandler<HTMLElement> | — |
onDurationChangeCapture | ReactEventHandler<HTMLElement> | — |
onEmptied | ReactEventHandler<HTMLElement> | — |
onEmptiedCapture | ReactEventHandler<HTMLElement> | — |
onEncrypted | ReactEventHandler<HTMLElement> | — |
onEncryptedCapture | ReactEventHandler<HTMLElement> | — |
onEnded | ReactEventHandler<HTMLElement> | — |
onEndedCapture | ReactEventHandler<HTMLElement> | — |
onLoadedData | ReactEventHandler<HTMLElement> | — |
onLoadedDataCapture | ReactEventHandler<HTMLElement> | — |
onLoadedMetadata | ReactEventHandler<HTMLElement> | — |
onLoadedMetadataCapture | ReactEventHandler<HTMLElement> | — |
onLoadStart | ReactEventHandler<HTMLElement> | — |
onLoadStartCapture | ReactEventHandler<HTMLElement> | — |
onPause | ReactEventHandler<HTMLElement> | — |
onPauseCapture | ReactEventHandler<HTMLElement> | — |
onPlay | ReactEventHandler<HTMLElement> | — |
onPlayCapture | ReactEventHandler<HTMLElement> | — |
onPlaying | ReactEventHandler<HTMLElement> | — |
onPlayingCapture | ReactEventHandler<HTMLElement> | — |
onProgress | ReactEventHandler<HTMLElement> | — |
onProgressCapture | ReactEventHandler<HTMLElement> | — |
onRateChange | ReactEventHandler<HTMLElement> | — |
onRateChangeCapture | ReactEventHandler<HTMLElement> | — |
onSeeked | ReactEventHandler<HTMLElement> | — |
onSeekedCapture | ReactEventHandler<HTMLElement> | — |
onSeeking | ReactEventHandler<HTMLElement> | — |
onSeekingCapture | ReactEventHandler<HTMLElement> | — |
onStalled | ReactEventHandler<HTMLElement> | — |
onStalledCapture | ReactEventHandler<HTMLElement> | — |
onSuspend | ReactEventHandler<HTMLElement> | — |
onSuspendCapture | ReactEventHandler<HTMLElement> | — |
onTimeUpdate | ReactEventHandler<HTMLElement> | — |
onTimeUpdateCapture | ReactEventHandler<HTMLElement> | — |
onVolumeChange | ReactEventHandler<HTMLElement> | — |
onVolumeChangeCapture | ReactEventHandler<HTMLElement> | — |
onWaiting | ReactEventHandler<HTMLElement> | — |
onWaitingCapture | ReactEventHandler<HTMLElement> | — |
onAuxClick | MouseEventHandler<HTMLElement> | — |
onAuxClickCapture | MouseEventHandler<HTMLElement> | — |
onClick | MouseEventHandler<HTMLElement> | — |
onClickCapture | MouseEventHandler<HTMLElement> | — |
onContextMenu | MouseEventHandler<HTMLElement> | — |
onContextMenuCapture | MouseEventHandler<HTMLElement> | — |
onDoubleClick | MouseEventHandler<HTMLElement> | — |
onDoubleClickCapture | MouseEventHandler<HTMLElement> | — |
onDrag | DragEventHandler<HTMLElement> | — |
onDragCapture | DragEventHandler<HTMLElement> | — |
onDragEnd | DragEventHandler<HTMLElement> | — |
onDragEndCapture | DragEventHandler<HTMLElement> | — |
onDragEnter | DragEventHandler<HTMLElement> | — |
onDragEnterCapture | DragEventHandler<HTMLElement> | — |
onDragExit | DragEventHandler<HTMLElement> | — |
onDragExitCapture | DragEventHandler<HTMLElement> | — |
onDragLeave | DragEventHandler<HTMLElement> | — |
onDragLeaveCapture | DragEventHandler<HTMLElement> | — |
onDragOver | DragEventHandler<HTMLElement> | — |
onDragOverCapture | DragEventHandler<HTMLElement> | — |
onDragStart | DragEventHandler<HTMLElement> | — |
onDragStartCapture | DragEventHandler<HTMLElement> | — |
onDrop | DragEventHandler<HTMLElement> | — |
onDropCapture | DragEventHandler<HTMLElement> | — |
onMouseDown | MouseEventHandler<HTMLElement> | — |
onMouseDownCapture | MouseEventHandler<HTMLElement> | — |
onMouseEnter | MouseEventHandler<HTMLElement> | — |
onMouseLeave | MouseEventHandler<HTMLElement> | — |
onMouseMove | MouseEventHandler<HTMLElement> | — |
onMouseMoveCapture | MouseEventHandler<HTMLElement> | — |
onMouseOut | MouseEventHandler<HTMLElement> | — |
onMouseOutCapture | MouseEventHandler<HTMLElement> | — |
onMouseOver | MouseEventHandler<HTMLElement> | — |
onMouseOverCapture | MouseEventHandler<HTMLElement> | — |
onMouseUp | MouseEventHandler<HTMLElement> | — |
onMouseUpCapture | MouseEventHandler<HTMLElement> | — |
onSelect | ReactEventHandler<HTMLElement> | — |
onSelectCapture | ReactEventHandler<HTMLElement> | — |
onTouchCancel | TouchEventHandler<HTMLElement> | — |
onTouchCancelCapture | TouchEventHandler<HTMLElement> | — |
onTouchEnd | TouchEventHandler<HTMLElement> | — |
onTouchEndCapture | TouchEventHandler<HTMLElement> | — |
onTouchMove | TouchEventHandler<HTMLElement> | — |
onTouchMoveCapture | TouchEventHandler<HTMLElement> | — |
onTouchStart | TouchEventHandler<HTMLElement> | — |
onTouchStartCapture | TouchEventHandler<HTMLElement> | — |
onPointerDown | PointerEventHandler<HTMLElement> | — |
onPointerDownCapture | PointerEventHandler<HTMLElement> | — |
onPointerMove | PointerEventHandler<HTMLElement> | — |
onPointerMoveCapture | PointerEventHandler<HTMLElement> | — |
onPointerUp | PointerEventHandler<HTMLElement> | — |
onPointerUpCapture | PointerEventHandler<HTMLElement> | — |
onPointerCancel | PointerEventHandler<HTMLElement> | — |
onPointerCancelCapture | PointerEventHandler<HTMLElement> | — |
onPointerEnter | PointerEventHandler<HTMLElement> | — |
onPointerLeave | PointerEventHandler<HTMLElement> | — |
onPointerOver | PointerEventHandler<HTMLElement> | — |
onPointerOverCapture | PointerEventHandler<HTMLElement> | — |
onPointerOut | PointerEventHandler<HTMLElement> | — |
onPointerOutCapture | PointerEventHandler<HTMLElement> | — |
onGotPointerCapture | PointerEventHandler<HTMLElement> | — |
onGotPointerCaptureCapture | PointerEventHandler<HTMLElement> | — |
onLostPointerCapture | PointerEventHandler<HTMLElement> | — |
onLostPointerCaptureCapture | PointerEventHandler<HTMLElement> | — |
onScroll | UIEventHandler<HTMLElement> | — |
onScrollCapture | UIEventHandler<HTMLElement> | — |
onScrollEnd | UIEventHandler<HTMLElement> | — |
onScrollEndCapture | UIEventHandler<HTMLElement> | — |
onWheel | WheelEventHandler<HTMLElement> | — |
onWheelCapture | WheelEventHandler<HTMLElement> | — |
onAnimationStart | AnimationEventHandler<HTMLElement> | — |
onAnimationStartCapture | AnimationEventHandler<HTMLElement> | — |
onAnimationEnd | AnimationEventHandler<HTMLElement> | — |
onAnimationEndCapture | AnimationEventHandler<HTMLElement> | — |
onAnimationIteration | AnimationEventHandler<HTMLElement> | — |
onAnimationIterationCapture | AnimationEventHandler<HTMLElement> | — |
onToggle | ToggleEventHandler<HTMLElement> | — |
onBeforeToggle | ToggleEventHandler<HTMLElement> | — |
onTransitionCancel | TransitionEventHandler<HTMLElement> | — |
onTransitionCancelCapture | TransitionEventHandler<HTMLElement> | — |
onTransitionEnd | TransitionEventHandler<HTMLElement> | — |
onTransitionEndCapture | TransitionEventHandler<HTMLElement> | — |
onTransitionRun | TransitionEventHandler<HTMLElement> | — |
onTransitionRunCapture | TransitionEventHandler<HTMLElement> | — |
onTransitionStart | TransitionEventHandler<HTMLElement> | — |
onTransitionStartCapture | TransitionEventHandler<HTMLElement> | — |
ref | Ref<HTMLElement> | — |
key | Key | null | — |