Sistema de diseño
Basic card
La Basic Card es la versión más sencilla y esencial de las cards de Oxygen, y por ello se encuentra en la librería de Core Web, mientras que otras cards están en la librería de Editorial.
Figma
Storybook
AEM
Overview
Es el conjunto de elementos de Oxygen más sencillo mediante el cual podemos formar una card de contenido.
Nombre
Descripción / Uso
Ejemplo
No items found.
Variantes
Existe una variante estructural de la Basic Card en la que los elementos no se ubican solo verticalmente, como en su versión default, sino que también se juega con el espacio horizontal. Esto permite optimizar la altura de la card en la página.
Variantes de estado de la Basic card
Nombre
Descripción / Uso
Ejemplo
Default
Card basic por defecto.
Highlighted
Tiene un borde de un pixel de color naranja, token “Content Highlight” rodeando la card para hacer que visualmente destaque por encima del resto de elementos.
Nombre
Descripción / Uso
Ejemplo
No items found.
Opciones
La Basic card es muy versátil y dentro de su configuración tiene múltiples opciones para dar respuesta a diversas necesidades de diseño. Estas opciones son:
Icon
El contenido de la card puede ir acompañado con un icono que ilustre su contenido. Por defecto este icono viene visible.
Microillustration
Se puede también configurar con una microilustración del sistema para tener mayor carga gráfica. Incompatible con el uso del icono en la dirección vertical.
Detail
Como complemento al texto descriptivo predeterminado de la card, existe la opción de incluir un texto adicional para datos secundarios que se quieran añadir.
Actions
La card ofrece dos opciones: Link y/o botón. Ambas opciones pueden usarse simultáneamente si es necesario. Por defecto, el botón está visible, con el comportamiento definido según estemos en desktop o en mobile.
Bullet list
Existe la posibilidad de incluir en la card un listado de texto acompañando el texto y el detalle. Esta opción es compatible con todas las acciones, excepto con la opción “Bullet link”.
Bullet link
Se puede incluir un listado de enlaces para acceder a distintos tipos de contenido. Es importante gestionar cuidadosamente estos enlaces para evitar confusión en la navegación del usuario, especialmente en combinación con las acciones del final de la card.
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Behaviour
Algunos de los átomos que componen la Basic Card tienen pautado un comportamiento específico que debemos conocer y respetar.
Buttons behaviour
Por defecto, los botones se configuran como "hug" en desktop y "fill" en mobile.
Grouping fill content
Cuando hay varias cards y una de ellas tiene un contenido más largo, las demás cards se ajustan para igualar la altura, manteniendo las acciones alineadas al mismo nivel.
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
Anterior
Overview componentes
Siguiente
Overview componentes