Locations (France) 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).
  • To set a background image that utilizes a gradient or color affect, continue to use the Bolt Background Component. This component still utilizes the Image Component and will not be performant.
Demo

Pega in France

Your partner for digital transformation

Founded in 1983 in the United States, Pega is the leader in dedicated software for customer engagement and process automation. In 2010, Pega arrived in France with talented employees and an increased knowledge of the market and local specificities. Today Pega France is growing and is working to surround itself with the most innovative minds.

Contact Us Join Us
Twig
{% set content %}
  {% include '@bolt-components-headline/headline.twig' with {
    text: 'Pega in France',
    tag: 'h1',
    size: 'xxxlarge',
  } only %}
  {% include '@bolt-components-headline/subheadline.twig' with {
    text: 'Your partner for digital transformation',
    tag: 'h2',
    size: 'xxlarge',
  } only %}
  {% include '@bolt-components-headline/subheadline.twig' with {
    text: 'Founded in 1983 in the United States, Pega is the leader in dedicated software for customer engagement and process automation. In 2010, Pega arrived in France with talented employees and an increased knowledge of the market and local specificities. Today Pega France is growing and is working to surround itself with the most innovative minds.',
    tag: 'h3',
    size: 'large',
  } only %}
  {% set button_1 %}
    {% include '@bolt-elements-button/button.twig' with {
      content: 'Contact Us',
      display: 'block',
      attributes: {
        href: '#!',
      }
    } only %}
  {% endset %}
  {% set button_2 %}
    {% include '@bolt-elements-button/button.twig' with {
      content: 'Join Us',
      display: 'block',
      hierarchy: 'secondary',
      attributes: {
        href: '#!',
      }
    } only %}
  {% endset %}
  {% include '@bolt-components-list/list.twig' with {
    display: 'inline',
    spacing: 'small',
    items: [
      button_1,
      button_2
    ]
  } only %}
{% endset %}

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

  {% set background %}
    {% set image %}
      {% include '@bolt-elements-image/image.twig' with {
        background: true,
        attributes: {
          src: '/images/placeholders/backgrounds/background-busy.jpg'
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-background/background.twig' with {
      opacity: 'heavy',
      focal_point: {
        vertical: 'center',
        horizontal: 'center'
      },
      items: [
        image
      ]
    } only %}
  {% endset %}

{% include '@bolt-layouts-layout/layout.twig' with {
  content: layout_items,
  padding_top: 'xlarge',
  padding_bottom: 'xlarge',
  valign_items: 'center',
  background: background,
  template: [
    '67/33@from-medium'
  ],
  attributes: {
    class: 't-bolt-navy-dark'
  }
} only %}
HTML
Not available in plain HTML. Please use Twig.