Canon Styleguide

Flex Block Media

Label

Lorem ipsum

Get easy guidance on DSLR photography with Canon’s Photo Companion app (downloadable for Android and iOS). Add lenses and accessories or take manual control when you’re ready.

ACTIVE

<div class="bs-row">
  <div class="bs-col-md-6 ">
    <div class="ps-lg-0 pe-lg-8">
      <picture class="canon-amplience lazyload__picture">
        <source data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" type="image/webp" media="(min-width: 1472px)" class="canon-amplience__image" />
        <source data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" type="image/webp" media="(min-width: 1200px)" class="canon-amplience__image" />
        <source data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" type="image/webp" media="(min-width: 769px)" class="canon-amplience__image" />
        <source data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" type="image/webp" media="(min-width: 0)" class="canon-amplience__image" />
        <img data-src="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" alt="Canon Camera" class="canon-amplience__image lazy" />
      </picture>
    </div>
  </div>
  <div class="bs-col-md-6 py-4 py-md-0  ">
    <div class="ps-lg-8 pe-lg-0">
      <p class="canon-label canon-label--medium canon-color--grey-darkest mb-3">Label</p>
      <h2 class="canon-h1--small mb-3">Lorem ipsum</h2>
      <p class="canon-paragraph--big mb-4">
        Get easy guidance on DSLR photography with Canon’s Photo Companion app (downloadable for Android and iOS). Add lenses
        and accessories or take manual control when you’re ready.
      </p>
      <div class="d-flex flex-column align-items-start">
        <a href="//google.co.uk" class="button button--small button--blue mb-4"> Contact Us </a>
        <a href="//google.co.uk" class="canon-link canon-link--big canon-link--fwd mb-4">
          Find out more
          <span class="canon-link--fwd-icon">
            <i aria-hidden="true" class="canon-icon icon-icon-right-c-t"> &#xe889; </i>
          </span>
        </a>
        <div class="d-flex fw-light flex-row align-items-center mb-3 mb-lg-0">
          <span class="indicator__status-icon bg-success">

            <svg width="10" height="7" fill="none" xmlns="http://www.w3.org/2000/svg" class=" d-none">
              <g clip-path="url(#clip0)">
                <path d="M.354 3.487l2.711 2.711L8.91.353" stroke="#fff" />
              </g>
              <defs>
                <clipPath id="clip0">
                  <path fill="#fff" d="M0 0h9.263v6.905H0z" />
                </clipPath>
              </defs>
            </svg>
          </span>
          <span class="d-inline-block ms-2 me-0 fs-xs">ACTIVE</span>
        </div>
      </div>
    </div>
  </div>
</div>

Label

Lorem ipsum

Get easy guidance on DSLR photography with Canon’s Photo Companion app (downloadable for Android and iOS). Add lenses and accessories or take manual control when you’re ready.

ACTIVE

<div class="bs-row">
  <div class="bs-col-md-6 order-md-1 ">
    <div class="ps-lg-8 pe-lg-0">
      <picture class="canon-amplience lazyload__picture">
        <source data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" type="image/webp" media="(min-width: 1472px)" class="canon-amplience__image" />
        <source data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" type="image/webp" media="(min-width: 1200px)" class="canon-amplience__image" />
        <source data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" type="image/webp" media="(min-width: 769px)" class="canon-amplience__image" />
        <source data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" type="image/webp" media="(min-width: 0)" class="canon-amplience__image" />
        <img data-src="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" alt="Canon Camera" class="canon-amplience__image lazy" />
      </picture>
    </div>
  </div>
  <div class="bs-col-md-6 py-4 py-md-0 order-md-0  ">
    <div class="ps-lg-0 pe-lg-8">
      <p class="canon-label canon-label--medium canon-color--grey-darkest mb-3">Label</p>
      <h2 class="canon-h1--small mb-3">Lorem ipsum</h2>
      <p class="canon-paragraph--big mb-4">
        Get easy guidance on DSLR photography with Canon’s Photo Companion app (downloadable for Android and iOS). Add lenses
        and accessories or take manual control when you’re ready.
      </p>
      <div class="d-flex flex-column align-items-start">
        <a href="//google.co.uk" class="button button--small button--blue mb-4"> Contact Us </a>
        <a href="//google.co.uk" class="canon-link canon-link--big canon-link--fwd mb-4">
          Find out more
          <span class="canon-link--fwd-icon">
            <i aria-hidden="true" class="canon-icon icon-icon-right-c-t"> &#xe889; </i>
          </span>
        </a>
        <div class="d-flex fw-light flex-row align-items-center mb-3 mb-lg-0">
          <span class="indicator__status-icon bg-success">

            <svg width="10" height="7" fill="none" xmlns="http://www.w3.org/2000/svg" class=" d-none">
              <g clip-path="url(#clip0)">
                <path d="M.354 3.487l2.711 2.711L8.91.353" stroke="#fff" />
              </g>
              <defs>
                <clipPath id="clip0">
                  <path fill="#fff" d="M0 0h9.263v6.905H0z" />
                </clipPath>
              </defs>
            </svg>
          </span>
          <span class="d-inline-block ms-2 me-0 fs-xs">ACTIVE</span>
        </div>
      </div>
    </div>
  </div>
</div>

Flex Block Media with narrow gap

Label

Lorem ipsum

Get easy guidance on DSLR photography with Canon’s Photo Companion app (downloadable for Android and iOS). Add lenses and accessories or take manual control when you’re ready.

ACTIVE

<div class="bs-row">
  <div class="bs-col-md-6 ">
    <div class="ps-md-0 pe-md-1">
      <picture class="canon-amplience lazyload__picture">
        <source data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" type="image/webp" media="(min-width: 1472px)" class="canon-amplience__image" />
        <source data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" type="image/webp" media="(min-width: 1200px)" class="canon-amplience__image" />
        <source data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" type="image/webp" media="(min-width: 769px)" class="canon-amplience__image" />
        <source data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" type="image/webp" media="(min-width: 0)" class="canon-amplience__image" />
        <img data-src="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" alt="Canon Camera" class="canon-amplience__image lazy" />
      </picture>
    </div>
  </div>
  <div class="bs-col-md-6 py-4 py-md-0  ">
    <div class="ps-md-1 pe-md-0">
      <p class="canon-label canon-label--medium canon-color--grey-darkest mb-3">Label</p>
      <h2 class="canon-h1--small mb-3">Lorem ipsum</h2>
      <p class="canon-paragraph--big mb-4">
        Get easy guidance on DSLR photography with Canon’s Photo Companion app (downloadable for Android and iOS). Add lenses
        and accessories or take manual control when you’re ready.
      </p>
      <div class="d-flex flex-column align-items-start">
        <a href="//google.co.uk" class="button button--small button--blue mb-4"> Contact Us </a>
        <a href="//google.co.uk" class="canon-link canon-link--big canon-link--fwd mb-4">
          Find out more
          <span class="canon-link--fwd-icon">
            <i aria-hidden="true" class="canon-icon icon-icon-right-c-t"> &#xe889; </i>
          </span>
        </a>
        <div class="d-flex fw-light flex-row align-items-center mb-3 mb-lg-0">
          <span class="indicator__status-icon bg-success">

            <svg width="10" height="7" fill="none" xmlns="http://www.w3.org/2000/svg" class=" d-none">
              <g clip-path="url(#clip0)">
                <path d="M.354 3.487l2.711 2.711L8.91.353" stroke="#fff" />
              </g>
              <defs>
                <clipPath id="clip0">
                  <path fill="#fff" d="M0 0h9.263v6.905H0z" />
                </clipPath>
              </defs>
            </svg>
          </span>
          <span class="d-inline-block ms-2 me-0 fs-xs">ACTIVE</span>
        </div>
      </div>
    </div>
  </div>
</div>

Label

Lorem ipsum

Get easy guidance on DSLR photography with Canon’s Photo Companion app (downloadable for Android and iOS). Add lenses and accessories or take manual control when you’re ready.

ACTIVE

<div class="bs-row">
  <div class="bs-col-md-6 order-md-1 ">
    <div class="ps-md-1 pe-md-0">
      <picture class="canon-amplience lazyload__picture">
        <source data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" type="image/webp" media="(min-width: 1472px)" class="canon-amplience__image" />
        <source data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" type="image/webp" media="(min-width: 1200px)" class="canon-amplience__image" />
        <source data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" type="image/webp" media="(min-width: 769px)" class="canon-amplience__image" />
        <source data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" type="image/webp" media="(min-width: 0)" class="canon-amplience__image" />
        <img data-src="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" alt="Canon Camera" class="canon-amplience__image lazy" />
      </picture>
    </div>
  </div>
  <div class="bs-col-md-6 py-4 py-md-0 order-md-0  ">
    <div class="ps-md-0 pe-md-1">
      <p class="canon-label canon-label--medium canon-color--grey-darkest mb-3">Label</p>
      <h2 class="canon-h1--small mb-3">Lorem ipsum</h2>
      <p class="canon-paragraph--big mb-4">
        Get easy guidance on DSLR photography with Canon’s Photo Companion app (downloadable for Android and iOS). Add lenses
        and accessories or take manual control when you’re ready.
      </p>
      <div class="d-flex flex-column align-items-start">
        <a href="//google.co.uk" class="button button--small button--blue mb-4"> Contact Us </a>
        <a href="//google.co.uk" class="canon-link canon-link--big canon-link--fwd mb-4">
          Find out more
          <span class="canon-link--fwd-icon">
            <i aria-hidden="true" class="canon-icon icon-icon-right-c-t"> &#xe889; </i>
          </span>
        </a>
        <div class="d-flex fw-light flex-row align-items-center mb-3 mb-lg-0">
          <span class="indicator__status-icon bg-success">

            <svg width="10" height="7" fill="none" xmlns="http://www.w3.org/2000/svg" class=" d-none">
              <g clip-path="url(#clip0)">
                <path d="M.354 3.487l2.711 2.711L8.91.353" stroke="#fff" />
              </g>
              <defs>
                <clipPath id="clip0">
                  <path fill="#fff" d="M0 0h9.263v6.905H0z" />
                </clipPath>
              </defs>
            </svg>
          </span>
          <span class="d-inline-block ms-2 me-0 fs-xs">ACTIVE</span>
        </div>
      </div>
    </div>
  </div>
</div>

Flex Block Media Animation

Taken By John Doe

Taken With Canon Ambassador

Taken with EOS 5D Mark IV

f/7.1
1/100
800

Ambassador video lorem ipsum dolor sit amet

Get easy guidance on DSLR photography with Canon’s Photo Companion app (downloadable for Android and iOS). Add lenses and accessories or take manual control when you’re ready.

            <div class="bs-container-lg">
              <div class="bs-row">
                <div class="bs-col-lg-7  ">
                  <div class="ps-lg-0 pe-lg-8" data-parallax>
                    <div class="position-relative">
                      <picture class="canon-amplience lazyload__picture">
                        <source data-srcset="//i1.adis.ws/i/canon/eos-r6-back-showing-lcd-gallery_53e49161c4d34861824094b603153a1c?$3by2-desktop$&bg=rgba(0,0,0,0)" type="image/webp" media="(min-width: 1472px)" class="canon-amplience__image" />
                        <source data-srcset="//i1.adis.ws/i/canon/eos-r6-back-showing-lcd-gallery_53e49161c4d34861824094b603153a1c?$3by2-desktop$&bg=rgba(0,0,0,0)" type="image/webp" media="(min-width: 1200px)" class="canon-amplience__image" />
                        <source data-srcset="//i1.adis.ws/i/canon/eos-r6-back-showing-lcd-gallery_53e49161c4d34861824094b603153a1c?$3by2-tablet$&bg=rgba(0,0,0,0)" type="image/webp" media="(min-width: 769px)" class="canon-amplience__image" />
                        <source data-srcset="//i1.adis.ws/i/canon/eos-r6-back-showing-lcd-gallery_53e49161c4d34861824094b603153a1c?$3by2-mobile$&bg=rgba(0,0,0,0)" type="image/webp" media="(min-width: 0)" class="canon-amplience__image" />
                        <img data-src="//i1.adis.ws/i/canon/eos-r6-back-showing-lcd-gallery_53e49161c4d34861824094b603153a1c?$3by2-desktop$&bg=rgba(0,0,0,0)" data-srcset="//i1.adis.ws/i/canon/eos-r6-back-showing-lcd-gallery_53e49161c4d34861824094b603153a1c?$3by2-desktop$&bg=rgba(0,0,0,0)" alt="Canon Camera" class="canon-amplience__image lazy" />
                      </picture>
                      <div class="position-md-absolute exif ">
                        <div class="px-4 py-3 canon-bg--grey-darkest align-items-center text-white d-flex w-100 w-md-auto mb-md-3">
                          <div class="me-2 flex-shrink-0 rounded-circle overflow-hidden exif__img">
                            <picture class="canon-amplience lazyload__picture">
                              <source data-srcset="https://i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$1by1-45px$" type="image/webp" media="(min-width: 1472px)" class="canon-amplience__image" />
                              <source data-srcset="https://i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$1by1-45px$" type="image/webp" media="(min-width: 1200px)" class="canon-amplience__image" />
                              <source data-srcset="https://i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$1by1-tablet$" type="image/webp" media="(min-width: 769px)" class="canon-amplience__image" />
                              <source data-srcset="https://i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$1by1-mobile$" type="image/webp" media="(min-width: 0)" class="canon-amplience__image" />
                              <img data-src="https://i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$1by1-45px$" data-srcset="https://i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$1by1-45px$" alt="Canon Camera" class="canon-amplience__image lazy" />
                            </picture>
                          </div>
                          <div>
                            <p class="mb-2">
                              <span class="d-md-none"> Taken By </span>
                              <strong>John Doe</strong>
                            </p>
                            <p class="mb-0">
                              <span class="d-md-none"> Taken With </span>
                              Canon Ambassador
                            </p>
                          </div>
                        </div>
                        <div class="px-4 py-3 canon-bg--grey-darkest align-items-center text-white d-flex w-100 w-md-auto">
                          <div class="me-2 flex-shrink-0 rounded-circle overflow-hidden exif__img">
                            <picture class="canon-amplience lazyload__picture">
                              <source data-srcset="https://i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$1by1-45px$" type="image/webp" media="(min-width: 1472px)" class="canon-amplience__image" />
                              <source data-srcset="https://i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$1by1-45px$" type="image/webp" media="(min-width: 1200px)" class="canon-amplience__image" />
                              <source data-srcset="https://i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$1by1-tablet$" type="image/webp" media="(min-width: 769px)" class="canon-amplience__image" />
                              <source data-srcset="https://i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$1by1-mobile$" type="image/webp" media="(min-width: 0)" class="canon-amplience__image" />
                              <img data-src="https://i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$1by1-45px$" data-srcset="https://i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$1by1-45px$" alt="Canon Camera" class="canon-amplience__image lazy" />
                            </picture>
                          </div>
                          <div class="fs-sm">
                            <p class="mb-2">Taken with <strong>EOS 5D Mark IV</strong></p>
                            <ul class="list-unstyled fs-xs d-flex">
                              <li class="d-flex me-2">
                                <span class="d-flex me-2">
                                  <i aria-hidden="true" class="canon-icon icon-aperture-t"> &#xe803; </i>
                                </span>
                                <p class="mb-0">f/7.1</p>
                              </li>
                              <li class="d-flex me-2">
                                <span class="d-flex me-2">
                                  <i aria-hidden="true" class="canon-icon icon-icon-time"> &#xe8b3; </i>
                                </span>
                                <p class="mb-0">1/100</p>
                              </li>
                              <li class="d-flex">
                                <span class="d-flex me-2">
                                  <i aria-hidden="true" class="canon-icon icon-icon-iso-t">&#xe842;</i>
                                </span>
                                <p class="mb-0">800</p>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>

                    </div>
                  </div>
                </div>
                <div class="bs-col-lg-5 py-7  d-flex align-items-center  ">
                  <div class="ps-lg-8 pe-lg-0" data-fade-in>
                    <div class="pt-3 pt-lg-0">
                      <h2 class="canon-h1 mb-5">Ambassador video lorem ipsum dolor
                        sit amet</h2>
                      <p class="canon-paragraph--big mb-4">
                        Get easy guidance on DSLR photography with Canon’s Photo Companion app (downloadable for Android and iOS). Add lenses
                        and accessories or take manual control when you’re ready.
                      </p>
                    </div>
                  </div>
                </div>
              </div>

            </div>

Taken By John Doe

Taken With Canon Ambassador

Taken with EOS 5D Mark IV

f/7.1
1/100
800

Ambassador video lorem ipsum dolor sit amet

Get easy guidance on DSLR photography with Canon’s Photo Companion app (downloadable for Android and iOS). Add lenses and accessories or take manual control when you’re ready.

            <div class="bs-container-lg">
              <div class="bs-row">
                <div class="bs-col-lg-7  order-lg-1 ">
                  <div class="ps-lg-8 pe-lg-0" data-parallax>
                    <div class="position-relative">
                      <picture class="canon-amplience lazyload__picture">
                        <source data-srcset="//i1.adis.ws/i/canon/eos-r10-sample-10_df1728d445814a0580b15f4c57da67be?$2by3-desktop$" type="image/webp" media="(min-width: 1472px)" class="canon-amplience__image" />
                        <source data-srcset="//i1.adis.ws/i/canon/eos-r10-sample-10_df1728d445814a0580b15f4c57da67be?$2by3-desktop$" type="image/webp" media="(min-width: 1200px)" class="canon-amplience__image" />
                        <source data-srcset="//i1.adis.ws/i/canon/eos-r10-sample-10_df1728d445814a0580b15f4c57da67be?$2by3-tablet$" type="image/webp" media="(min-width: 769px)" class="canon-amplience__image" />
                        <source data-srcset="//i1.adis.ws/i/canon/eos-r10-sample-10_df1728d445814a0580b15f4c57da67be?$2by3-mobile$" type="image/webp" media="(min-width: 0)" class="canon-amplience__image" />
                        <img data-src="//i1.adis.ws/i/canon/eos-r10-sample-10_df1728d445814a0580b15f4c57da67be?$2by3-desktop$" data-srcset="//i1.adis.ws/i/canon/eos-r10-sample-10_df1728d445814a0580b15f4c57da67be?$2by3-desktop$" alt="Canon Camera" class="canon-amplience__image lazy" />
                      </picture>
                      <div class="position-md-absolute exif exif-left">
                        <div class="px-4 py-3 canon-bg--grey-darkest align-items-center text-white d-flex w-100 w-md-auto mb-md-3">
                          <div class="me-2 flex-shrink-0 rounded-circle overflow-hidden exif__img">
                            <picture class="canon-amplience lazyload__picture">
                              <source data-srcset="https://i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$1by1-45px$" type="image/webp" media="(min-width: 1472px)" class="canon-amplience__image" />
                              <source data-srcset="https://i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$1by1-45px$" type="image/webp" media="(min-width: 1200px)" class="canon-amplience__image" />
                              <source data-srcset="https://i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$1by1-tablet$" type="image/webp" media="(min-width: 769px)" class="canon-amplience__image" />
                              <source data-srcset="https://i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$1by1-mobile$" type="image/webp" media="(min-width: 0)" class="canon-amplience__image" />
                              <img data-src="https://i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$1by1-45px$" data-srcset="https://i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$1by1-45px$" alt="Canon Camera" class="canon-amplience__image lazy" />
                            </picture>
                          </div>
                          <div>
                            <p class="mb-2">
                              <span class="d-md-none"> Taken By </span>
                              <strong>John Doe</strong>
                            </p>
                            <p class="mb-0">
                              <span class="d-md-none"> Taken With </span>
                              Canon Ambassador
                            </p>
                          </div>
                        </div>
                        <div class="px-4 py-3 canon-bg--grey-darkest align-items-center text-white d-flex w-100 w-md-auto">
                          <div class="me-2 flex-shrink-0 rounded-circle overflow-hidden exif__img">
                            <picture class="canon-amplience lazyload__picture">
                              <source data-srcset="https://i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$1by1-45px$" type="image/webp" media="(min-width: 1472px)" class="canon-amplience__image" />
                              <source data-srcset="https://i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$1by1-45px$" type="image/webp" media="(min-width: 1200px)" class="canon-amplience__image" />
                              <source data-srcset="https://i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$1by1-tablet$" type="image/webp" media="(min-width: 769px)" class="canon-amplience__image" />
                              <source data-srcset="https://i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$1by1-mobile$" type="image/webp" media="(min-width: 0)" class="canon-amplience__image" />
                              <img data-src="https://i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$1by1-45px$" data-srcset="https://i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$1by1-45px$" alt="Canon Camera" class="canon-amplience__image lazy" />
                            </picture>
                          </div>
                          <div class="fs-sm">
                            <p class="mb-2">Taken with <strong>EOS 5D Mark IV</strong></p>
                            <ul class="list-unstyled fs-xs d-flex">
                              <li class="d-flex me-2">
                                <span class="d-flex me-2">
                                  <i aria-hidden="true" class="canon-icon icon-aperture-t"> &#xe803; </i>
                                </span>
                                <p class="mb-0">f/7.1</p>
                              </li>
                              <li class="d-flex me-2">
                                <span class="d-flex me-2">
                                  <i aria-hidden="true" class="canon-icon icon-icon-time"> &#xe8b3; </i>
                                </span>
                                <p class="mb-0">1/100</p>
                              </li>
                              <li class="d-flex">
                                <span class="d-flex me-2">
                                  <i aria-hidden="true" class="canon-icon icon-icon-iso-t">&#xe842;</i>
                                </span>
                                <p class="mb-0">800</p>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>

                    </div>
                  </div>
                </div>
                <div class="bs-col-lg-5 py-7 order-md-0  d-flex align-items-center  ">
                  <div class="ps-lg-0 pe-lg-8" data-fade-in>
                    <div class="pt-3 pt-lg-0">
                      <h2 class="canon-h1 mb-5">Ambassador video lorem ipsum dolor sit
                        amet</h2>
                      <p class="canon-paragraph--big mb-4">
                        Get easy guidance on DSLR photography with Canon’s Photo Companion app (downloadable for Android and iOS). Add lenses
                        and accessories or take manual control when you’re ready.
                      </p>
                    </div>
                  </div>
                </div>
              </div>

            </div>

Advanced Technology

Get easy guidance on DSLR photography with Canon’s Photo Companion app (downloadable for Android and iOS). Add lenses and accessories or take manual control when you’re ready.

            <div class="bs-container-lg">
              <div class="bs-row bs-gy-5 bs-gy-md-7">
                <div class="bs-col-12">
                  <picture class="canon-amplience lazyload__picture">
                    <source data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" type="image/webp" media="(min-width: 1472px)" class="canon-amplience__image" />
                    <source data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" type="image/webp" media="(min-width: 1200px)" class="canon-amplience__image" />
                    <source data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" type="image/webp" media="(min-width: 769px)" class="canon-amplience__image" />
                    <source data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" type="image/webp" media="(min-width: 0)" class="canon-amplience__image" />
                    <img data-src="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" data-srcset="//i1.adis.ws/i/canon/Canon-eos-6d-mark-ii-Hero?$hero-header-half-16by9-dt$" alt="Canon Camera" class="canon-amplience__image lazy" />
                  </picture>
                </div>
                <div class="bs-col-12" data-fade-in>
                  <div class="bs-row align-items-center justify-content-md-center">
                    <div class="bs-col-md-4">
                      <h2 class="canon-h1--small mb-3">Advanced Technology</h2>
                    </div>
                    <div class="bs-col-md-6">
                      <p class="canon-paragraph--big mb-0">
                        Get easy guidance on DSLR photography with Canon’s Photo Companion app (downloadable for Android and iOS). Add
                        lenses and accessories or take manual control when you’re ready.
                      </p>
                    </div>
                  </div>

                </div>
              </div>
            </div>

Flex Block Media - Fixed Video

Video Player is loading.

Current Time 0:00

Duration 0:00

Loaded: 0%

Stream Type LIVE

Remaining Time 0:00

Zebra Settings

Get easy guidance on DSLR photography with Canon’s Photo Companion app (downloadable for Android and iOS). Add lenses and accessories or take manual control when you’re ready.

Find out more

            <div class="bs-container-lg">
              <div class="bs-row flex-block-media">
                <div class="bs-col-md-7 order-md-1 ">
                  <div class="ps-lg-8 pe-lg-0 position-relative" data-parallax>
                    <div class="bg-white position-absolute flex-block-media__camera-body-slot">
                      <div class="responsive-video__video-element video-autoplay h-100">
                        <div class="responsive-video__placeholder responsive-video__placeholder--autoplay" data-account-id="640741352001" data-player-id="ak5qw7zZP" data-video-id="1df43f732fd74040bebe7c61c16405e8" data-poster="\/\/i1.adis.ws\/i\/canon\/print-supplies?w=544&qlt=60" data-element-id="facelift-video-autoplay-2" data-ratio=""></div>
                      </div>
                    </div>
                    <picture class="canon-amplience lazyload__picture">
                      <source data-srcset="//i1.adis.ws/i/canon/eos-r6-back-showing-lcd-gallery_53e49161c4d34861824094b603153a1c?$3by2-desktop$&bg=rgba(0,0,0,0)" type="image/webp" media="(min-width: 1472px)" class="canon-amplience__image" />
                      <source data-srcset="//i1.adis.ws/i/canon/eos-r6-back-showing-lcd-gallery_53e49161c4d34861824094b603153a1c?$3by2-desktop$&bg=rgba(0,0,0,0)" type="image/webp" media="(min-width: 1200px)" class="canon-amplience__image" />
                      <source data-srcset="//i1.adis.ws/i/canon/eos-r6-back-showing-lcd-gallery_53e49161c4d34861824094b603153a1c?$3by2-tablet$&bg=rgba(0,0,0,0)" type="image/webp" media="(min-width: 769px)" class="canon-amplience__image" />
                      <source data-srcset="//i1.adis.ws/i/canon/eos-r6-back-showing-lcd-gallery_53e49161c4d34861824094b603153a1c?$3by2-mobile$&bg=rgba(0,0,0,0)" type="image/webp" media="(min-width: 0)" class="canon-amplience__image" />
                      <img data-src="//i1.adis.ws/i/canon/eos-r6-back-showing-lcd-gallery_53e49161c4d34861824094b603153a1c?$3by2-desktop$&bg=rgba(0,0,0,0)" data-srcset="//i1.adis.ws/i/canon/eos-r6-back-showing-lcd-gallery_53e49161c4d34861824094b603153a1c?$3by2-desktop$&bg=rgba(0,0,0,0)" alt="Canon Camera" class="canon-amplience__image lazy" />
                    </picture>
                  </div>
                </div>
                <div class="bs-col-md-5 py-7 py-md-4 py-lg-0 order-md-0  d-flex align-items-center">
                  <div class="ps-lg-0 pe-lg-8" data-fade-in>
                    <div class="pt-4 pt-md-0">
                      <h2 class="canon-h1--small mb-3">Zebra Settings</h2>
                      <p class="canon-paragraph--big mb-4">
                        Get easy guidance on DSLR photography with Canon’s Photo Companion app (downloadable for Android and iOS). Add lenses
                        and accessories or take manual control when you’re ready.
                      </p>
                      <div class="d-flex flex-column align-items-start">
                        <a href="//google.co.uk" class="canon-link canon-link--white canon-link--big canon-link--fwd mb-4" data-product-skuId="id" data-product-name="name">
                          Find out more
                          <span class="canon-link--fwd-icon">
                            <i aria-hidden="true" class="canon-icon icon-icon-right-c-t"> &#xe889; </i>
                          </span>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>