English Homepage Hero Live example
Important Notes:
  • ALL images in a hero require the loading="eager" HTML attribute.
  • ALL images should utilize the srcset HTML attribute (not done for this example due to time).
Demo Image alt text Image alt text

Ready to crush business complexity?

Our software helps you work smarter, simpler, and faster.

Let's go
Twig
{% set content %}
  {% include '@bolt-components-headline/headline.twig' with {
    text: 'Ready to crush business complexity?',
    tag: 'h1',
    size: 'xxxlarge',
  } only %}
  {% include '@bolt-components-headline/subheadline.twig' with {
    text: 'Our software helps you work smarter, simpler, and faster.',
    tag: 'h2',
    size: 'xlarge',
  } only %}
  {% include '@bolt-elements-button/button.twig' with {
    content: 'Let\'s go',
    attributes: {
      href: '#!',
    }
  } only %}
{% endset %}

{% set supplement %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      alt: 'Image alt text',
      src: '/images/content/heroes/foreground-go-graphic.png',
      loading: 'eager',
      width: 516,
      height: 389,
    },
  } only %}
{% endset %}

{% set layout_items %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    valign_self: 'start-offset',
    content: supplement,
  } only %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: content
  } only %}
{% endset %}

{% set background %}
  {% include '@bolt-elements-image/image.twig' with {
    background: true,
    attributes: {
      alt: 'Image alt text',
      src: '/images/placeholders/backgrounds/background-light.jpg',
      loading: 'eager',
      width: '100vw'
    },
  } only %}
{% endset %}

{% include '@bolt-layouts-layout/layout.twig' with {
  content: layout_items,
  gutter: 'large',
  row_gutter: 'large',
  padding_top: 'large',
  padding_bottom: 'large',
  valign_items: 'center',
  background: background,
  template: [
    'halves@from-medium'
  ],
  attributes: {
    class: 't-bolt-gray-xlight'
  }
} only %}
HTML
Not available in plain HTML. Please use Twig.