Á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.

Los átomos hero pueden tener un énfasis de color si agregamos los modificadores is-primary, is-info, is-success, is-danger, is-warning.

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.

El tamaño vertical de los átomos Hero puede controlarse con un modificador entre los siguientes: is-small `is-medium` is-large `is-halfheight` e is-fullheight

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

Cuida el indentado del Markup para visualizar correctamente la conformación del contenido.

¿Quieres aprender paso a paso? Inscríbete al curso gratuito "Introducción a Bloom" de Yeira Academy

¿Necesitas ayuda? Contacta al Soporte de Yeira en: soporte@yeira.training

¿Aún no tienes cuenta en Yeira? Crea una gratis ahora aquí.

Actualizado el: 09/08/2021