Component

Cards

Disponible

Componente de contenedor versátil que organiza información y acciones. Utiliza un sistema de capas dinámicas para adaptarse a cualquier identidad de marca.

Cobrá con QR

Aceptá pagos con cualquier billetera virtual, sin manejar efectivo.

Default · With Action · Composed

Import

Importa los estilos base y el componente Card.

TypeScript

1import 'nave-ui-library/styles.css'
2import { Card } from 'nave-ui-library/react'

Basic Usage

Una tarjeta estándar que utiliza el token primary por defecto. El ancho se ajusta al contenido a menos que se especifique.

Promociones a tu medida

Ofrecé cuotas, descuentos y beneficios para que tus clientes elijan tu negocio primero.

Vertical

Recibís más plata

Ganás más en cada venta porque tenés las comisiones más bajas.

API Reference

Todas las props disponibles para el componente Card.

Card

Prop	Type	Default	Description
`imgSrc`	`string`	—	SRC image.
`imgAlt`	`string`	—	ALT image.
`imgOri`	`string`	`left`	'left' \| 'right'
`orientation`	`string`	`horizontal`	'vertical' \| 'horizontal'

Card Content

Prop	Type	Default	Description
`title`	`string`	—	Title for the card.
`description`	`string`	—	Description for the card.

Registry

Ver configuración técnica del registro

JSON

1{
2  "name": "Card",
3  "description": "Card contenedor para agrupar contenido relacionado.",
4  "component": "Card",
5  "files": [
6    "components/base/data-display/cards-blocks/card/Card.tsx"
7  ],
8  "dependencies": [
9    "react",
10    "class-variance-authority"
11  ],
12  "props": {
13    "imgSrc": {
14      "type": "string",
15      "description": "SRC image."
16    },
17    "imgAlt": {
18      "type": "string",
19      "description": "ALT image."
20    },
21    "imgOri": {
22      "type": "string",
23      "default": "left",
24      "description": "'left' | 'right'"
25    },
26    "orientation": {
27      "type": "string",
28      "default": "horizontal",
29      "description": "'vertical' | 'horizontal'"
30    }
31  }
32}

JSON

1{
2  "name": "Card Content",
3  "description": "Card Content muestra titulo, descripcion y contenido adicional.",
4  "component": "Card Content",
5  "files": [
6    "components/base/data-display/cards-blocks/card/CardContent.tsx"
7  ],
8  "dependencies": [
9    "react",
10    "class-variance-authority"
11  ],
12  "props": {
13    "title": {
14      "type": "string",
15      "description": "Title for the card."
16    },
17    "description": {
18      "type": "string",
19      "description": "Description for the card."
20    }
21  }
22}

Prop

Type

Default

Description

imgSrc

string

—

SRC image.

imgAlt

string

—

ALT image.

imgOri

string

left

'left' | 'right'

orientation

string

horizontal

'vertical' | 'horizontal'

Prop

Type

Default

Description

title

string

—

Title for the card.

description

string

—

Description for the card.

1{ 2 "name": "Card", 3 "description": "Card contenedor para agrupar contenido relacionado.", 4 "component": "Card", 5 "files": [ 6 "components/base/data-display/cards-blocks/card/Card.tsx" 7 ], 8 "dependencies": [ 9 "react", 10 "class-variance-authority" 11 ], 12 "props": { 13 "imgSrc": { 14 "type": "string", 15 "description": "SRC image." 16 }, 17 "imgAlt": { 18 "type": "string", 19 "description": "ALT image." 20 }, 21 "imgOri": { 22 "type": "string", 23 "default": "left", 24 "description": "'left' | 'right'" 25 }, 26 "orientation": { 27 "type": "string", 28 "default": "horizontal", 29 "description": "'vertical' | 'horizontal'" 30 } 31 } 32}

1{ 2 "name": "Card Content", 3 "description": "Card Content muestra titulo, descripcion y contenido adicional.", 4 "component": "Card Content", 5 "files": [ 6 "components/base/data-display/cards-blocks/card/CardContent.tsx" 7 ], 8 "dependencies": [ 9 "react", 10 "class-variance-authority" 11 ], 12 "props": { 13 "title": { 14 "type": "string", 15 "description": "Title for the card." 16 }, 17 "description": { 18 "type": "string", 19 "description": "Description for the card." 20 } 21 } 22}