Card
El componente Card nos permite agrupar contenidos y acciones relacionadas, facilitando la identificación de grupos de información.
import React from "react";
import { Card, Box, Tag, Title, Text, Button } from "@nimbus-ds/components";
const Example: React.FC = () => (
<Card>
<Card.Header>
<Box alignItems="center" display="flex" justifyContent="space-between">
<Title as="h3">Title</Title>
<Tag appearance="primary">Text</Tag>
</Box>
</Card.Header>
<Card.Body>
<Text fontSize="base" lineHeight="base" textAlign="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed tortor
hendrerit, varius nulla tristique.
</Text>
</Card.Body>
<Card.Footer>
<Button appearance="neutral">Button</Button>
<Button appearance="primary">Button</Button>
</Card.Footer>
</Card>
);
export default Example;
El componente se compone de un box con sombra y bordes redondeados, y un padding opcional.
Utilizamos el componente para agrupar componentes y elementos similares, separando temas y creando grupos que facilitan la lectura y el entendimiento de la información.
El componente es básicamente un contenedor que puede recibir otros componentes de Nimbus, componentes locales o textos con estilo.
El orden de los elementos debe respetar la jerarquía visual en forma decreciente. Botones y links deben permanecer en la base del card preferentemente. Títulos y elementos que comunican estado o contexto sobre el card en la parte superior.
El componente posee 10 variantes de color diferentes, cada una con funciones específicas.
- Background - Variante neutral por defecto, usada para agrupar los contenidos sin destaque.
- Neutral/Primary Surface y Surface Highlight - Utilizada para destacar contenidos neutrales que requieren mayor destaque.
- Success Surface/Surface Highlight - Utilizada para destacar estados de éxito o normalidad.
- Warning Surface/Surface Highlight - Utilizada para destacar estados de atención o verificación.
- Danger Surface/Surface Highlight - Utilizada para destacar estados de error o peligro.
Podemos utilizar cualquier combinación de componentes en el contenido de un card. En todos los casos, es importante que el título y cualquier label o acción que usemos en la parte superior, estén correctamente vinculados y representen claramente a la información del contenido.
No puede haber un card con más de un asunto o tipo de información dentro. Todo el contenido debe ser relacionado para ayudar a la persona usuaria a navegar fácilmente por un grupo de cards.
- Agrupar informaciones de un pedido o cliente
- Separar configuraciones de diferentes tipos
- Agrupar información sobre un estado
- Box - Puede ser usado para agrupar y separar múltiples elementos dentro de un card.
![Los componentes del footer de página deben estar alineados a la izquierda, siguiendo el orden descendente de importancia.](/_next/image?url=%2Fimages%2Fdo-card-1.png&w=3840&q=75)
Los componentes del footer de página deben estar alineados a la izquierda, siguiendo el orden descendente de importancia.
![los elementos interactivos no deben estar alineados a la derecha cuando se usan dentro de una card.](/_next/image?url=%2Fimages%2Fdont-card-1.png&w=3840&q=75)
los elementos interactivos no deben estar alineados a la derecha cuando se usan dentro de una card.
![Los elementos posicionados en el encabezado de la card deben estar dispuestos en extremos opuestos.](/_next/image?url=%2Fimages%2Fdo-card-2.png&w=3840&q=75)
Los elementos posicionados en el encabezado de la card deben estar dispuestos en extremos opuestos.
![No se deben incluir elementos adicionales en el título de la card.](/_next/image?url=%2Fimages%2Fdont-card-2.png&w=3840&q=75)
No se deben incluir elementos adicionales en el título de la card.
![Debemos preservar el relleno, no comprimiendo los elementos a lo largo del borde del componente.](/_next/image?url=%2Fimages%2Fdo-card-3.png&w=3840&q=75)
Debemos preservar el relleno, no comprimiendo los elementos a lo largo del borde del componente.
![En componentes que no tengan relleno, debemos evitar utilizar la card sin relleno.](/_next/image?url=%2Fimages%2Fdont-card-3.png&w=3840&q=75)
En componentes que no tengan relleno, debemos evitar utilizar la card sin relleno.
![Es importante considerar el contraste de color de los elementos utilizados dentro de una card con fondo de color para asegurar el contraste del contenido.](/_next/image?url=%2Fimages%2Fdo-card-4.png&w=3840&q=75)
Es importante considerar el contraste de color de los elementos utilizados dentro de una card con fondo de color para asegurar el contraste del contenido.
![Algunos fondos pueden comprometer la accesibilidad de los colores de los elementos aplicados a la card.](/_next/image?url=%2Fimages%2Fdont-card-4.png&w=3840&q=75)
Algunos fondos pueden comprometer la accesibilidad de los colores de los elementos aplicados a la card.
Instalá el componente via terminal.
npm install @nimbus-ds/card
Additional props are passed to the <Card> element. See div docs for a list of props accepted by the <Card> element.