Card

Usage

variant

import Card from '@mavvy/m3-ui/Card';
import Text from '@mavvy/m3-ui/Text';

export function VariantExample() {
  return (
    <div className="flex gap-x-2">
      <Card className="bg-surface-container-highest">
        <div className="flex w-[200px] h-[150px]">
          <Text>elevated</Text>
        </div>
      </Card>
      <Card variant="filled" className="bg-surface-container">
        <div className="flex w-[200px] h-[150px]">
          <Text>filled</Text>
        </div>
      </Card>
      <Card variant="outlined">
        <div className="flex w-[200px] h-[150px]">
          <Text>outlined</Text>
        </div>
      </Card>
    </div>
  )
}

elevated

filled

outlined

Props

prop	type	description
variant	elevated | filled | outlined	card variant
noPadding	boolean	if true, no padding will be added to the card
className	string	className of the component
children	React.ReactNode	react children
style	Object	style of the component