Accordion

Es un conjunto de botones acomodados verticalmente, interactivos que al presionarse despliegan más información. Cada botón puede estar contraído con una breve etiqueta o desplegado con toda la información.

Avatar

Representación gráfica del usuario; puede ser una foto, una ilustración, ícono o inicial.

Badge

Es una etiqueta pequeña que generalmente va adentro de otro componente o a lado de un componente más grande; este representa un estado, propiedad u otros metadatos.

Breadcrumbs

Es una lista horizontal de enlaces (links) que muestran la ubicación de la página actual en la jerarquía de navegación.

Button

Es un componente que realiza una acción en específico como enviar información, mostrar u ocultar cosas, confirmar, etc.

Category Card

Contenedor de la información de la categoría.

Card

Es un contenedor de información, gráficos, íconos, etc. Solo es la tarjeta.

Detail card

Contenedor de la información del detalle del producto.

Product Card

Contenedor de la información del producto. Está compuesto por:

• Badge
• Image
• Heading
• Details
• Horizontal rule
• Card

Checkbox

Es una casilla que permite seleccionar una o más opciones en una lista. 

Combobox

Es un input o campo de texto que se comporta de manera parecida a un menú desplegable, nada más que en este el usuario tiene la libertad de escribir y el componente filtra por los más buscados, por sugerencias u otros datos.

Date input

Es un campo de texto que generalmente solo permite números y se divide por campos para 2 caracteres para día y mes y 4 o 2 para año.

Date picker

Es una forma visual de elegir una fecha utilizando una vista de calendario.

Drawer

Es un componente que se desliza hacia dentro de la pantalla desde alguno de los bordes de la misma; haciendo un efecto de cajón. Este es un componente exclusivo de web.

Dropdown menu

Es un menú en el que las opciones están ocultas por defecto, pero pueden mostrarse con un botón o un clic en el componente; se diferencia de un dropdown normal en que muestra acciones u opciones de navegación y no es una solo información estática.

Fieldset

Es el contenedor de un formulario y todos sus inputs.

Footer

Componente que aparece al final de una página o sección, se utiliza para mostrar información legal y sobre derechos de autor o enlaces a contenidos relacionados. Está compuesto por:

• Input
• Button
• Links
• Logo
• Icon
• Heading

Form

Grupo de inputs y botones que permiten al usuario enviar información a un servidor. Está compuesto por:

• Inputs
• Date input
• Select
• Input description text

Header

Componente que aparece en la parte superior de todas las páginas de un sitio web o aplicación; suele contener el nombre del sitio y la navegación principal. Está compuesto por:

• Imagotipo
• Menu
• Select
• Search input
• Avatar
• Cart
• Icons

Heading

Título utilizado para introducir una nueva sección.

Hero banner

Imagen de gran tamaño, que aparece como uno de los primeros elementos de una página; a menudo contiene una imagen de ancho completo.

Horizontal rule

Separador entre dos elementos, generalmente consiste en una línea horizontal.

Icons

Es un símbolo gráfico diseñado para indicar visualmente la finalidad de un elemento de la interfaz. Dibujo que tiene un parecido con el objeto que representa.

Image

Una representación visual de un objeto mediante técnicas diferentes de diseño, pintura, fotografía, vídeo.

Input description text

Texto que “etiqueta” a los campos de un formulario.

Link

Es una referencia a una página, texto o recurso, puede ser externo o interno.

List

Componentes que se utilizan para agrupar una colección de elementos relacionados. En HTML existen tres tipos:

• Lista desordenada.
• Lista ordenada.
• Lista descriptiva.

Modal

Es un elemento gráfico que aparece sobre otro contenido. Requiere una interacción del usuario antes de que pueda volver a lo que hay debajo. Este componente sirve para informar al usuario de cambios importantes en el producto, a manera de cintillo o una tarjeta pequeña, puede ser con 2 botones, un botón, hasta 3 botones. 

Navigation

Contenedor de la navegación (menú); pueden ser a otras páginas (por ejemplo, navegación principal del sitio) o a elementos dentro de la página actual (por ejemplo, un índice).

Pagination, Paginator, Pager

La paginación es el proceso de dividir la información en varias páginas en lugar de mostrarla toda en una sola; también es el nombre del componente utilizado para navegar entre estas páginas.

Progress indicator

Es una representación gráfica del progreso de un usuario a través de una serie de pasos discretos. En el caso de Elektra es el proceso que lleva el usuario para la compra de algún producto, consta de 4 pasos: Detalle del carrito, Ingresar a cuenta de Elektra, datos de envío y pago, confirmación de compra.

Quote

Las comillas se utilizan para mostrar una cita: ya sea de una persona o de otra fuente externa o para resaltar un pasaje del documento actual. 

Radio button

Son elementos gráficos que permiten al usuario seleccionar una única opción de una lista de opciones predefinidas.

Rating

La calificación o rating permite a los usuarios ver y/o establecer una valoración por estrellas para un producto u otro artículo. Es una sección dentro del PDP para calificar el producto, no es una card.

Search input

Permite al usuario encontrar productos o contenido introduciendo una palabra o varias en el input.

Segmented controls

Es un componente híbrido entre botonera, tabs y radio botones que se usan para cambiar entre diferentes vistas u opciones.

Select

Es un input para seleccionar una opción o valor, en ocasiones cuando está colapsado se ve la opción seleccionada, cuando está expandido se muestran todas las opciones y en ocasiones se requiere de scroll. 

Skeleton

Layout del contenido a manera de wireframe o “cuadros” grises para comunicarle al usuario que el contenido se está cargando.

Skip link

Liga dentro de alguna página, modal o sección usada primordialmente por los usuarios que utilizan mucho el teclado para navegar.

Slick dots

Es un componente indicador de cuantas imágenes o elementos forman el carrusel, estos se muestran como puntos o pequeñas líneas y están ubicados debajo del carrusel.

Spinner

Es un indicador visual de que hay un proceso cargándose, una base de datos, imagen o contenido en general.

Stepper

Es un control para editar el valor numérico con botones de más y menos para incrementar o disminuir respectivamente.

Table

Es un componente para mostrar varios datos o información en columnas y renglones.

Tabs

Componente formado de pestañas que permite al usuario navegar en varias secciones dentro de un espacio pequeño.

Text input

Un input, elemento que permite solo una línea de texto.

Text area

Un elemento que permite al usuario escribir varias líneas de texto.

Toast

Es un tipo de alerta que aparece en una capa encima de otro contenido, es similar a un push notification para móvil o escritorio.

Toggle

Es un control que funciona como un apagador entre dos estados, generalmente on/off (Encendido y apagado)

Tooltip

Componente para mostrar información extra sobre otro elemento en la interfaz; generalmente se muestra cuando se hace hover en algún ícono o texto para mostrarlo, también se puede mostrar con un clic o tap.

Visually hidden

Texto oculto usado para dar al usuario seguridad en datos como contraseñas