Hero Banner

Un Hero Banner muestra información importante, breve y proporciona acciones (botones) con las cuales el usuario puede interactuar. Los banners deben mostrarse siempre en la parte superior de la pantalla, como un encabezado de la sección. Estos pueden ir como header de una vista o dentro de un modal. Solo se debe mostrar un banner a la vez.

Demostración Interactiva

Juan Sebastián Gómez Córdoba

folder_sharedno_accountsperson_off

Lorem ipsum

Avatar

Placeholder

Cambiar título

Ruby

<<%= hero_banner_widget 'Juan Sebastián Gómez Córdoba', avatar_image: 'https://cdn.vuetifyjs.com/images/john.jpg', placeholder: 'img/placeholder_hero_banner.png' do %>
  <div class="my-2">
    <%= md_icon(:folder_shared, clase: 'mr-3') %>
    <%= md_icon(:no_accounts, clase: 'mr-3') %>
    <%= md_icon(:person_off, clase: 'mr-3') %>
  </div>
  <div class="flex">
    <div class="d-inline-block">
      <%= btn_dropdown_secondary 'Mover de Etapa',
                                 data: { toggle: 'dropdown',
                                         boundary: 'body' } do |w| %>
        <%= w.item link_to('Lorem ipsum', "") %>
      <% end %>
    </div>
    <%= btn_icon_destroy icon: :person_remove, icon_source: :md, class: 'ml-1', data: {toggle: :tooltip}, title: 'Descartar postulante' %>
    <%= btn_icon_primary :edit, icon_source: :md, class: 'ml-1' %>
  </div>
<% end %>

Html

<div class="hero_banner">
  <div class="hero_banner__avatar">
  <img src="https://cdn.vuetifyjs.com/images/john.jpg">
</div>
  <div class="hero_banner__content">
    <h3 class="mb-1">Juan Sebastián Gómez Córdoba</h3>
    <div class="hero_banner__content--section">
      <div class="my-2">
        <span class=" material-icons  notranslate mr-3" aria-hidden="true">folder_shared</span>
        <span class=" material-icons  notranslate mr-3" aria-hidden="true">no_accounts</span>
        <span class=" material-icons  notranslate mr-3" aria-hidden="true">person_off</span>
      </div>
      <div class="d-flex">
        <div class="d-inline-block">
          <div class="dropdown">
            <button type="button" class="btn btn-dropdown dropdown-toggle btn-secondary btn-md " data-toggle="dropdown" data-boundary="body">
              Mover de Etapa
            </button>
            <div class="dropdown-menu dropdown-menu-left" data-boundary="viewport" role="menu">
              <a href="">Lorem ipsum</a>
            </div>
          </div>
        </div>      
        <button name="button" type="button" method="delete" class="btn btn-icon btn-destructive btn-md md-component   ml-1" title="" data-toggle="tooltip" data-original-title="Descartar postulante">
          <span class=" material-icons  notranslate icon" aria-hidden="true">person_remove</span> 
        </button>               
        <button name="button" type="button" class="btn btn-icon btn-primary btn-md md-component   ml-1">
          <span class=" material-icons  notranslate icon" aria-hidden="true">edit</span> 
        </button>
      </div>   
    </div>
  </div>
  <div class="hero_banner__placeholder">
  <img src="img/placeholder_hero_banner.png">
</div>
</div>

Lista de parámetros

Parámetro

Tipo

Detalle

title	String	Define el título
avatar_image	Boolean	(Opcional) Define la imagen del avatar
placeholder	Boolean	(Opcional) Se utiliza para agregar un apoyo visual

Anatomía

El Hero banner se conforma de 3 bloques de información, el primero es el avatar a la izquierda, el segundo es el bloque de información y el tercero que va fijo a la derecha se conforma por contenido dinámico (en el ejemplo el raiting)

1. Contenedor principal

Es la superficie que alberga todo el contenido del banner.

2. Avatar

Puede llevar un avatar. el tamaño de este es de 90x90px.

3. Título fijo y sección de contenido

Lleva un título fijo y contenido variable, como chips, íconos, un subtítulo o un campo de texto.

4. Acciones

Es la sección final y puede llevar acciones representadas con botones y btn icons.

5. Contenido de apoyo visual

Puede llevar contenido simple de apoyo al lado derecho como una ilustración.

Principios

Disruptivos

Los banners son disruptivos, pero su nivel de interrupción debe coincidir con la información que contienen y el contexto en el que aparecen.

Breve

Los banners comunican un mensaje breve y lo que sucederá si los usuarios interactúan con ellos.

Enfocado

Los banners contienen un solo mensaje y acciones específicas que un usuario puede realizar.

Tamaño y proporciones

El banner tiene un alto mínimo de 152px de alto y de 196 px como alto máximo.

El ancho del banner es variable y se adapta a un 100%, este puede adaptarse al ancho completo de 12 columnas u ocupar un minimo de 5 columnas totales.

Ubicación

Los banners deben colocarse en la parte superior de un diseño o pantalla y utilizar un ancho máximo, este puede ser con el total de las 12 columnas (cómo es el caso de la ficha del postulante) o un ancho máximo de una cantidad de columnas en específico. El ancho mínimo es el de 5 columnas como es el caso de la vista de la ficha del empleado en donde el hero banner utiliza las 5 columnas y el resto del contenido (data box) utiliza las otras 7 restantes.

Uso correcto

Uso incorrecto

El banner siempre debe colocarse al inicio de la vista, nunca al final o entre más contenido.

Para mantener un uso consistente y minimalísta se reduce su uso a solo uno por vista.

No puede utilizar menos de 5 columnas.

Uso actual en buk

Actualmente el componente banner se utiliza en dos casos dentro de la plataforma:

1. En la ficha del Empleado
2. En el modal de la ficha del Postulante

Ficha Empleado

Ficha Postulante

Comportamiento responsivo y mobile

A partir de un breakpoint sm (mobile) la disposición del contenido se organiza verticalmente al centro.