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.
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.
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.
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.
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/cardAdditional props are passed to the <Card> element. See div docs for a list of props accepted by the <Card> element.