Documentation
Data display
Card

Card

Active users

1,234

Updated 10mins ago

Example

import Icon from '@components/icon'
import { Card, CardContent, CardDescription, CardHeader, CardProps, CardStats, CardTitle } from '@creation-ui/react'
import { mdiAccount } from '@mdi/js'
import type { FC } from 'react'
 
interface CardExampleProps {
  title: string
  description: string
  content: string
}
 
export const CardExample: FC<CardExampleProps> = ({ title, content, description }) => (
  <Card>
    <CardHeader>
      <CardTitle>{title}</CardTitle>
      <Icon path={mdiAccount} className='block flex-shrink-0' />
    </CardHeader>
    <CardContent>
      <CardStats>{content}</CardStats>
    </CardContent>
    <CardDescription>{description}</CardDescription>
  </Card>
)

Component API

PropDefaultDescription
children
React.ReactNode

Children to be rendered inside the component

className
string | string[]

Class names to add to wrapper component

PropDefaultDescription
children
React.ReactNode

Children to be rendered inside the component

className
string | string[]

Class names to add to wrapper component

PropDefaultDescription
children
React.ReactNode

Children to be rendered inside the component

className
string | string[]

Class names to add to wrapper component

PropDefaultDescription
children
React.ReactNode

Children to be rendered inside the component

className
string | string[]

Class names to add to wrapper component

PropDefaultDescription
children
React.ReactNode

Children to be rendered inside the component

className
string | string[]

Class names to add to wrapper component

PropDefaultDescription
children
React.ReactNode

Children to be rendered inside the component

className
string | string[]

Class names to add to wrapper component