Infinity 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).
  • u-bolt-text-align-center utility class has been added to the layout column through a style tag.
  • This example contains custom code found on the live example.
Demo Image alt text Alt text.

One powerful portfolio of enterprise software. Limitless possibilities.

Video Player is loading.
Current Time 0:00
Duration 0:00
Loaded: 0%
Stream Type LIVE
Remaining Time 0:00
 
1x
How far will infinity take you?
Twig
Twig
{% set content %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      alt: 'Alt text.',
      src: '/images/heros/live-assets/Infinity-logo-color.png',
      width: '60%',
      loading: 'eager'
    },
  } only %}
  {% include '@bolt-components-headline/headline.twig' with {
    text: 'One powerful portfolio of enterprise software. Limitless possibilities.',
    tag: 'h1',
    size: 'xlarge',
  } only %}
  {% set video %}
    <video-js
      data-account="1900410236"
      data-player="O3FkeBiaDz"
      data-embed="default"
      data-video-id="5793474985001"
      data-media-duration
      data-media-title
      controls
      class="c-base-video"></video-js>
  {% endset %}
  {% include '@bolt-elements-ratio/ratio.twig' with {
    content: video,
    ratio: 'wide'
  } only %}

  <div style="margin-top: 80px; margin-bottom: 76px;">
    <style>
      #arrow-text {
        text-decoration: none;
        text-transform: uppercase;
        font-weight: bold;
      }
      #down-arrow {
        border: solid;
        border-top-width: medium;
        border-right-width: medium;
        border-bottom-width: medium;
        border-left-width: medium;
        border-width: 0 2px 2px 0;
        display: inline-block;
        padding: 5px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
      }
    </style>
    <span id="arrow-text" class="c-bolt-text--xsmall">How far will infinity take you?</span>
    <br />
    <span id="down-arrow"></span>
  </div>
{% endset %}

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

{% set layout_items %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: content,
    attributes: {
      class: 'u-bolt-text-align-center'
    }
  } only %}
{% endset %}

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