Background Component Use Case Hero

This is an example of a Background Component with an image being used as a hero section.

Demo

Visualization & Simulation

Imagine the Future with Decision Hub

Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.

Twig

{% set image %}
  {% include '@bolt-elements-image/image.twig' with {
    background: true,
    attributes: {
      src: '/images/placeholders/backgrounds/background-light-tall.jpg',
      loading: 'eager'
    },
  } only %}
{% endset %}
{% include '@bolt-components-background/background.twig' with {
  opacity: 'heavy',
  fill: 'gradient',
  focal_point: {
    horizontal: 'right',
    vertical: 'top',
  },
  items: [
    image,
  ]
} only %}

HTML