Web ResponsiveComponents
Image headings

Image headings

Los image headings se basan en la misma estructura que se usa para construir los panels, pero con una imagen de fondo. Como norma general siempre debes situarlos en la parte superior de la página, justo debajo de la navegación. También es posible intercalarlos entre los panels que uses para construir tu página. Usa este componente en situaciones en las que quieras crear un gran impacto.

  • Image heading debajo de la navegación.
  • Image heading intercalada en el contenido.
  • Image heading como último elemento de la página.

Default image heading

El image heading por defecto está formado por una imagen que debe cubrir por completo el panel, un bloque de texto y un botón. Divide la pieza en 2 columnas y utiliza la primera para ajustar el ancho del texto. Aplica también un overlay negro sobre la imagen con una opacidad del 20% para no perder legibilidad en el texto. Evita usar mucho texto o más de un call to action en la misma pieza.

Estructura de un image heading default.

Image heading styles

Además del image heading por defecto también puedes aplicar otros estilos para adaptar este componente a tus necesidades. Prueba a centrar el texto y aplicar un overlay negro con una transparencia al 60% sobre la imagen, usa solo un titular con una parte del texto que funcione como link o aplica el color Day Blue de fondo con tituales en los que combines el uso de regular y bold.

Usa los estilos alternativos para customizar tu image heading.

Image heading con carrusel

Puedes partir del image heading para crear un carrusel de imágenes. Tan solo has de combinar image headings individuales y añadirles un pie de navegación que contenga un titular a modo de resumen del contenido de cada slide. Añade también flechas laterales para reforzar la idea de que este componente es navegable.

Añade un elemento de navegación en la parte inferior del image heading para convertirlo en un carrusel.

Header grid

Usa el header grid en aquellas ocasiones en las que necesites mostrar varios mensajes a la vez en pantalla. El header grid está formado por un panel que a su vez está dividido en bloques de imágenes con un texto descriptivo.

Utiliza el header grid para mostrar diferentes bloques de imagen en el mismo panel.