Átomo Expositivo:

Este tipo de contenido muestra una forma de presentar información con una combinación de elementos.

El átomo más importante de esta construcción es Label, que es un átomo que permite insertar un elemento con cualquier tipo de contenido en una posición relativa de un bloque previo.

Personalización del Átomo:

Las partículas son los atributos del átomo, es decir, las configuraciones disponibles que se pueden personalizar dependiendo del ejercicio que desees realizar. En este caso, un Hotspot hace uso de una imagen fija, seguida de una o varias etiquetas con el átomo Label, las cuales contienen un contenido (dentro de la partícula content) y una particula llamada position, compuesta a la vez de dos valores, x y y que representan la posición del contenido.

En este átomo además se hace uso dentro de content de un átomo Modal que permite mostrar información al dar clic a un botón numerado, que a la vez está basado en un átomo Button con algunas partículas de formato relevantes, como class: is-rounded para redondear el botón, y una partícula style que limita el ancho del botón a un valor fijo.

En caso de que quieras modificarlo desde el Markup, esta es la estructura que debes de seguir:

- page:
  - card m-5:
    - Image: cockpit.jpg
    - Label:
        position:
          x: 0.49
          y: 0.25
        content: 
        - Modal:
            header:
            - Button:
                content: <b>1
                class: is-rounded
                style: "width: 22px;"
            content:
            - box:
              - text: 'Lower Overhead Panel'

Donde - page: es la página que contiene los átomos, por lo que es necesario incluirlo al principio del Markup, - title: es un átomo de título y - subtitle: es un átomo de subtítulo.

Actualizado el: 09/08/2021