Version 2.0

Card

Componente de uso fundamental, ya que representa todo lo visual del producto o la marca.

Import

Example code
import Card from 'components/@ui/card'

Usage

A continuación se muestra un ejemplo de una tarjeta básica con contenido mixto y un ancho fijo. Las tarjetas no tienen un ancho fijo para comenzar, por lo que naturalmente llenarán todo el ancho de su elemento principal. Esto se puede personalizar fácilmente con diversas opciones de tamaño.

Example code
<Card>
  <Card.Content>
    <Card.Header>
      <h5>Card header</h5>
    </Card.Header>
    <Card.Body>
      lorem ipsum dolor ipsum dolor, minimatch dolor. Lore minimatch dolor. Lore minimatchore
    </Card.Body>
    <Card.Footer>
      Card footer
    </Card.Footer>
  </Card.Content>
</Card>

Card content

Example code
<Card>
  <Card.Content border={true}>
    <Card.Body>
      lorem ipsum dolor ipsum dolor, minimatch dolor. Lore minimatch dolor. Lore minimatchore
    </Card.Body>
  </Card.Content>
</Card>

With border

Example code
<Card>
  <Card.Content border={true}>
    <Card.Header>
      <h5>Card header</h5>
    </Card.Header>
    <Card.Body>
      lorem ipsum dolor ipsum dolor, minimatch dolor. Lore minimatch dolor. Lore minimatchore
    </Card.Body>
    <Card.Footer>
      Card footer
    </Card.Footer>
  </Card.Content>
</Card>

Image

Example code
<Card>
  <Card.Content border={true} style={{ maxWidth: '22rem'}}>
    <Image 
      src='/images/pexels-photo-13836783.jpeg'
      width={1460}
      height={973}
      layout='intrinsic'
      objectFit="cover"
      alt='Image'
    />
    <Card.Body className='space-y-2'>
      <Text variant='headline4'>
        Web Design templates Selection
      </Text>
      <p>
        lorem ipsum dolor ipsum dolor, minimatch dolor. Lore minimatch dolor. Lore minimatchore
      </p>
    </Card.Body>
    <Card.Footer>
      <Button color='primary' size='sm'>View items</Button>
    </Card.Footer>
  </Card.Content>
</Card>

Full examples

If you want to see complete examples with tailwind css take a look at the following links

👉 https://cards-components.vercel.app/

👉 https://social-cards-components.vercel.app/

👉 https://music-widgets-components.vercel.app/

👉 https://widget-components.vercel.app/

👉 https://teneues-cards-components.vercel.app/