Selection card

Es un componente de interfaz utilizado en el diseño de aplicaciones y sitios web que permite a los usuarios seleccionar una opción de entre varias alternativas.

Figma

Storybook

AEM

‍

Overview

Es un componente visual utilizado para representar opciones de manera clara y accesible. Cada tarjeta presenta una opción mediante un contenedor rectangular que puede incluir texto descriptivo, imágenes o iconos, dependiendo del diseño. Las tarjetas permiten a los usuarios seleccionar entre diferentes opciones de forma intuitiva y eficaz.

Nombre

Descripción / Uso

Ejemplo

No items found.

Variantes

‍

Este componente tiene varios estados que se documentan como variantes del mismo.

‍

Default

Estado por defecto del componente.

Hover

Solo para dispositivos desktop, este estado interactivo indica al usuario que el elemento es clicable.

‍

Active

Estado seleccionado de la card.

Nombre

Descripción / Uso

Ejemplo

No items found.

Nombre

Descripción / Uso

Ejemplo

No items found.

Opciones

Cada una de las variantes del componente tiene las siguientes opciones de configuración:

‍

Default

La configuración por defecto que tiene el componente está compuesta por textos y radio button.

Microillustration

En Oxygen, la variante con microilustración permite reducir el texto para disminuar la carga visual de las cards. Esta variante está disponible en dos configuraciones: Vertical y Landscape.

Icon

Es posible agregar un ícono al lado del título para facilitar la comprensión de los conceptos. Sin embargo, esta opción no es compatible con la colocación del check o radio button a la derecha.