Átomo Expositivo: Hero

Este átomo de Bloom consiste en un elemento de información destacado que puede utilizarse para mostrar un contenido muy relevante, como una introducción, portada, presentación o sección de conclusión de una actividad o contenido.

Personalización del Átomo:

Este caso particular de átomo se define con los elementos provenientes de la librería de estilos. Por esta razón, el átomo se escribe con inicial minúscula - hero:

Dentro del Markup en Bloom, el elemento hero se compone de los siguientes elementos:

  - hero: 
    - hero-head:
    - hero-body:
      - container:
    - hero-foot:

- hero: es el elemento principal de este átomo, dentro del cual se incluyen los elementos internos de encabezado, cuerpo y pie.

- hero-head: es un encabezado que puede contener cualquier otro tipo de elemento.

- hero-body: es el cuerpo del contenido.

- hero-foot: es un pie de página que puede contener cualquier otro tipo de elemento.

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.

A continuación un ejemplo de contenido con el átomo Hero en tamaño completo, en color primary (naranja)

- page:
  - hero is-primary is-fullheight: 
    - hero-body:
      - container:
        - title: Principios de Facilitación Remota 
        - subtitle: Dinámica Sesión

Actualizado el: 09/08/2021