Center Out 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).
  • The order prop was used to move the image above the headline on mobile.
Demo Image alt text

Build from the center out

Feeling the need for speed and scalability? You can have both if you take a Center-out™ approach to structuring your technology – and avoid some common mistakes.

Get the ebook
Twig
{% set content %}
  {% include '@bolt-components-headline/headline.twig' with {
    text: 'Build from the center out',
    tag: 'h1',
    size: 'xxxlarge',
  } only %}
  {% include '@bolt-components-headline/subheadline.twig' with {
    text: 'Feeling the need for speed <em>and</em> scalability? You can have both if you take a Center-out&trade; approach to structuring your technology – and avoid some common mistakes.',
    tag: 'h2',
    size: 'xlarge',
  } only %}
  {% include '@bolt-elements-button/button.twig' with {
    content: 'Get the ebook',
    attributes: {
      href: '#!',
    }
  } only %}
{% endset %}

{% set supplement %}
  {% set video %}
    <video-js
      data-account="1900410236"
      data-player="O3FkeBiaDz"
      data-embed="default"
      data-video-id="6154161119001"
      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 %}
{% endset %}

{% set layout_items %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: supplement,
    order: 'last@from-medium'
  } 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/heros/live-assets/center-out-hero-bg.jpg',
      loading: 'eager',
      width: '100vw'
    },
  } 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-navy'
  }
} only %}
HTML
Not available in plain HTML. Please use Twig.