Card

Imports

Card: The main component to display a list of accordion items.
CardHeader: The main component to display a list of accordion items.
CardTitle: The main component to display a list of accordion items.
CardContent: The main component to display a list of accordion items.
CardDescription: The main component to display a list of accordion items.
CardFooter: The main component to display a list of accordion items.

Sagittis, eu pretium massa quisque cursus augue massa cursus. Sed quisque velit, auctor at lobortis hac tincidunt sodales id. Elit interdum vel nisi, in enim sagittis at. Netus sagittis eleifend aliquet urna quis.

$99.90

import {Card, CardHeader, CardTitle, CardContent, CardDescription, CardFooter} from '@openlite/ui'
 
function App() {
  return(
  <Card className="max-w-sm">
    <div className="w-full flex justify-center items-center bg-default-50 rounded-t-lg h-60">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" color="currentColor"><circle cx="7.5" cy="7.5" r="1.5"/><path d="M2.5 12c0-4.478 0-6.718 1.391-8.109S7.521 2.5 12 2.5c4.478 0 6.718 0 8.109 1.391S21.5 7.521 21.5 12c0 4.478 0 6.718-1.391 8.109S16.479 21.5 12 21.5c-4.478 0-6.718 0-8.109-1.391S2.5 16.479 2.5 12"/><path d="M5 21c4.372-5.225 9.274-12.116 16.498-7.458"/></g></svg>
    </div>
    <CardHeader>
      <CardTitle className="text-4xl">
        Card Title
      </CardTitle>
      <CardDescription className="text-sm">
        Sagittis, eu pretium massa quisque cursus augue massa cursus. Sed quisque velit, auctor at lobortis hac tincidunt sodales id. Elit interdum vel nisi, in enim sagittis at. Netus sagittis eleifend aliquet urna quis.
      </CardDescription>
    </CardHeader>
    <CardContent className="w-full font-bold">
      $99.90
    </CardContent>
    <CardFooter className="w-full grid grid-cols-2">
      <Button rippleColor="ligth">Button</Button>
      <Button outline="default">Button ligth</Button>
    </CardFooter>
  </Card>
  )
}

Examples

Card with horizontal orientation

Card Title

$99.90

import {Card, CardHeader, CardTitle, CardContent, CardDescription, CardFooter} from '@openlite/ui'
 
function App() {
  return(
  <Card orientation="horizontal">
    <div className="max-w-sm hidden w-2/5 md:flex justify-center items-center bg-default-50 rounded-l-lg h-64">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" color="currentColor"><circle cx="7.5" cy="7.5" r="1.5"/><path d="M2.5 12c0-4.478 0-6.718 1.391-8.109S7.521 2.5 12 2.5c4.478 0 6.718 0 8.109 1.391S21.5 7.521 21.5 12c0 4.478 0 6.718-1.391 8.109S16.479 21.5 12 21.5c-4.478 0-6.718 0-8.109-1.391S2.5 16.479 2.5 12"/><path d="M5 21c4.372-5.225 9.274-12.116 16.498-7.458"/></g></svg>
    </div>
    <div className='w-full md:w-3/5'>
      <div className="max-w-sm w-2/5 md:hidden justify-center items-center bg-default-50 rounded-t-lg h-60">
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" color="currentColor"><circle cx="7.5" cy="7.5" r="1.5"/><path d="M2.5 12c0-4.478 0-6.718 1.391-8.109S7.521 2.5 12 2.5c4.478 0 6.718 0 8.109 1.391S21.5 7.521 21.5 12c0 4.478 0 6.718-1.391 8.109S16.479 21.5 12 21.5c-4.478 0-6.718 0-8.109-1.391S2.5 16.479 2.5 12"/><path d="M5 21c4.372-5.225 9.274-12.116 16.498-7.458"/></g></svg>
      </div>
      <CardHeader>
        <CardTitle className="text-4xl">
          Card Title
        </CardTitle>
        <CardDescription className="text-sm">
          Sagittis, eu pretium massa quisque cursus augue massa cursus. Sed quisque velit, auctor at lobortis hac tincidunt sodales id. Elit interdum vel nisi, in enim sagittis at. Netus sagittis eleifend aliquet urna quis.
        </CardDescription>
      </CardHeader>
      <CardContent padded="sm" className="w-full font-bold">
        $99.90
      </CardContent>
      <CardFooter padded="sm" className="w-full grid grid-cols-2">
        <Button rippleColor="ligth">Button</Button>
        <Button outline="default">Button ligth</Button>
      </CardFooter>
    </div>
  </Card>
  )
}

API

Card Props

Props	Type	Description
`rounded`	`'none' \| 'sm' \| 'md' \| 'lg'`	The rounded of the Card.
`orientation`	`'horizontal' \| 'vertical'`	The orientation of the Card.
`padded`	`'none' \| 'sm' \| 'md' \| 'lg'`	The padding of the CardHeader, CardTitle, CardContent, CardFooter

Card

Imports

Usage

Card Title

Examples

Card with horizontal orientation

Card Title

API

Card Props

On this page