Artificial Intelligence 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

Artificial Intelligence

AI decision-making: Beyond the hype

Real-time AI isn’t just a trend – it’s a way to transform your customer experience. We’ve gathered experts, best practices, and examples to show you how.

As the technology evolves ... so increases the opportunity for brands to build higher-value relationships with consumers based on relevance and intimacy.

Twig
{% set content %}
  {% include '@bolt-components-headline/eyebrow.twig' with {
    text: 'Artificial Intelligence',
    tag: 'p',
  } only %}
  {% include '@bolt-components-headline/headline.twig' with {
    text: 'AI decision-making: Beyond the hype',
    tag: 'h1',
    size: 'xxxlarge',
  } only %}
  {% include '@bolt-components-headline/subheadline.twig' with {
    text: 'Real-time AI isn’t just a trend – it’s a way to transform your customer experience. We’ve gathered experts, best practices, and examples to show you how.',
    tag: 'h2',
    size: 'xlarge',
  } only %}
{% endset %}

{% set supplement %}
  {% include '@bolt-components-blockquote/blockquote.twig' with {
    logo: {
      invert: true,
      src: '/images/content/logos/logo-paypal.svg'
    },
    content: '<p>As the technology evolves ... so increases the opportunity for brands to build higher-value relationships with consumers based on relevance and intimacy.</p>',
    author: {
      name: 'Mark Taylor',
      title: 'Chief Experience Officer, Digital Customer Experience Practice'
    }
  } only %}
{% endset %}

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

{% set background %}
  {% set image %}
    {% include '@bolt-elements-image/image.twig' with {
      background: true,
      attributes: {
        src: '/images/placeholders/backgrounds/background-light2.jpg'
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-background/background.twig' with {
    fill: 'solid',
    items: [
      image
    ]
  } only %}
{% endset %}

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