zen
DocumentationPlayground
Getting started
IntroductionInstallationUsage Guide
ColorsFontsSpacingBordersShadowsBreakpointsThemesCustomization
BoxFlexboxGridContainer
TextHeadingCodeBlockquote
Page headerAspect ratioResizableScroll areaSeparator
Overview
AutocompleteCheckboxCheckbox groupComboboxDate pickerInput groupNumber fieldOTP FieldPassword fieldRadio groupSearch fieldSelectSliderSwitchText fieldToggleToggle group
BreadcrumbsButtonButton groupCommandContext menuHover triggerLoading buttonMenuMenubarNavbarPaginationTabsToolbarTheme buttonTheme switcher
AlertAlert dialogConfirmation dialogDialogDrawerEmptyLoadingMeterModalPopoverPreview cardProgress barProgress circleSheetSkeletonStatus lightToastTooltip
AccordionAvatarBadgeCalendarCarouselCollapsibleData cardData tableIconImageKbdListTableTag group
Data Display

Data Card

A structured display component for presenting key-value pairs in a vertical list format. Useful for profile cards, detail panels, summary views, or any context where labeled data needs clear presentation.

Name
Bob
Title
Vice President
Age
42

Component props#

NameTypeDescription
dataobject[]Array of { label, value } objects
labelWidthstringWidth of label column (default: "auto")
PreviousCollapsibleNextData table
On this page
Component props
Powered by shiso