XM+ Style Guide

Spacing

  • 25px
    Class: .mb-25
    Class: .mb-25
  • 35px
    Class: .mt-35
    Class: .mb-35
  • 45px
    Class: .mt-45
    Class: .mb-45
  • 53px
    Class: .mt-53
    Class: .mb-53
  • 55px
    Class: .mt-55
    Class: .mb-55
  • 70px
    Class: .mt-70
    Class: .mb-70
  • 125px
    Class: .mt-125
    Class: .mb-125
  • 160px
    Class: .mt-160
    Class: .mb-160

Colors


  • HEX: #1F0DAA
    Background Class: .bg-dark-blue
    Color Class: .text-dark-blue

  • HEX: #371DFF
    Background Class: .bg-light-blue
    Color Class: .text-light-blue

  • HEX: #3E00E6
    Background Class: .bg-purple
    Color Class: .text-purple

  • HEX: #FFF
    Background Class: .bg-white
    Color Class: .text-white

Backgrounds

Typography

  • DISNEY on Experience Strategy
    Class: .hero-eyebrow
    Properties: font-family: 'input-sans', sans-serif; font-size: 13px;
  • PREMIERING APRIL 26
    Class: .hero-eyebrow-lg
    Properties: font-weight: 600;font-size: 17px;opacity: 0.7;
  • Qualtrics CEO, Zig Serafin, sits down with Disney CEO, Bob Chapek, to talk experience strategy and where Disney is headed.
    Class: .paragraph
    Properties: font-family: 'benton-sans'; font-weight: 300; font-size: 17px; line-height: 24px;
  • By gaining access to X4 you are also signing up for a free XM+ account to view the content Privacy Statement
    Class: .paragraph-small
    Properties: font-family: 'benton-sans'; font-size: 11px;
  • By gaining access to X4 you are also signing up for a free XM+ account to view the content Privacy Statement
    Class: .paragraph-large
    Properties: font-family: 'benton-sans'; font-size: 20px;
  • RUN TIME
    Class: .run-time
    Properties: font-family: 'benton-sans'; font-weight: 700;font-size: 14px;letter-spacing: 0.05em;line-height: 25px;
  • 32m
    Class: .video-time
    Properties: font-family: 'benton-sans'; font-weight: 300; font-size: 17px; line-height: 24px;
  • IRREVERENT
    Class: .content-eyebrow
    Properties: font-family: 'input-sans', sans-serif; font-size: 16px; font-weight: 400;opacity:0.7;
  • FAQs
    Class: .faq-headline
    Properties: font-family: 'input-sans', sans-serif;font-size: 28px;letter-spacing: -0.03em;line-height: 37px;
  • ©2022 QualtricsXM
    Class: .footer-text
    Properties: font-family: 'benton-sans';font-weight: 300;font-size: 14px;letter-spacing: 0.01em;line-height: 25px;opacity: 0.6;

  • Premiering
    April 26

Buttons


  • Class: .xm-plus-cta

  • Class: .xm-plus-cta-lg

  • Class: .watch-btn .d-flex

  • Class: .play-btn

  • Class: .back-btn

  • Class: .close-btn

  • Class: .dropdown-btn

Logos


  • URL: https://www.qualtrics.com/m/xm-plus/xm-plus.svg

  • URL: https://www.qualtrics.com/m/xm-plus/x4.svg

  • URL: https://www.qualtrics.com/m/xm-plus/experience-mgmt-logo.svg

  • URL: https://www.qualtrics.com/m/xm-plus/xm-originals.svg
  • X4 logo
    • <figure class="x4-logo">
        <img src="https://www.qualtrics.com/m/xm-plus/x4.svg" alt="X4" class="d-block d-md-inline mr-20 mb-15 mb-md-0" height="93.34"/>
        <img src="https://www.qualtrics.com/m/xm-plus/experience-mgmt-logo.svg" alt="The Experience Management Summit" class="d-block d-md-inline" height="93.34"/>
    </figure>

Animations


  • Check Animation

Video

<!-- Put this wherever you would like your player to appear -->
<img style="width: 100%; margin: auto; display: block;" class="vidyard-player-embed" src="https://play.vidyard.com/wNBFgd5L2BxCukiQb3JS2f.jpg" data-uuid="wNBFgd5L2BxCukiQb3JS2f" data-v="4" data-type="inline" />

Embed Video (Without Vidyard)

A revolution in the workplace has begun. If that's news, you're already on the losing side of history.

<section id="embed-container" >
 <div class="container py-7">
  <div class="row align-items-center ">
   <div class="col-12 col-md-4 pl-0">
    <img class="d-block img-fluid mb-35" src="https://www.qualtrics.com/m/xm-plus/xm-originals.svg" alt="">
    <img class="player-intro-logo d-block img-fluid mb-35" src="https://www.qualtrics.com/m/assets/wp-content/uploads/2022/02/Repeat-Grid-2.png" alt="Logo" />
    <p class="paragraph text-white">A revolution in the workplace has begun. If that's news, you're already on the losing side of history.</p>
    <button class="watch-btn mt-25 d-flex justify-content-center $vidyard_uuid">WATCH</button>
   </div>
   <div class="col-12 col-md-7 offset-md-1">
    <div class="embed-video embed-responsive embed-responsive-21by9 pl-0 lazy trailer" data-bg="https://www.qualtrics.com/m/assets/wp-content/uploads/2022/02/video-Thubnail.png">
     <video class="embed-responsive-item lazy d-block sectionVideoPreview" autoplay="" loop="" muted="" playsinline="" preload="auto">
      <source src="https://www.qualtrics.com/m/assets/wp-content/uploads/2019/08/Chobani-Webiste.mp4" type="video/mp4">
     </video>
    </div>
   </div>
  </div>
 </div>
</section>

Forms

Work : New.0 Work : New.0

Today’s employees are looking for a workplace that works for them.
See what they’ll give up—or where they’ll go—to find it.

Work : New.0 Work : New.0

Today’s employees are looking for a workplace that works for them.
See what they’ll give up—or where they’ll go—to find it.

IRREVERENTGO TO SERIES

Slider

<section id="swiperTrigger0" class="slider-section swiperTrigger">
 < class="sectionSliderTitle position-relative container-padding mb-25 shadow-title" style="z-index:3;">
  <a class="arrow-url content-eyebrow text-white d-inline-block" href="/xmplus/irreverent/">IRREVERENT<span>GO TO SERIES</span></a>
 </div>
 <div class="swiper swiper-test mb-53 swiper-initialized swiper-horizontal swiper-pointer-events swiper-backface-hidden" data-direction-mobile="horizontal" data-pt-mobile="131%" data-slides-per-view-mobile="2.5" data-direction-desktop="horizontal" data-pt-desktop="60.6%" data-slides-per-view-desktop="5">
  <div class="swiper-wrapper" id="swiper-wrapper-eaca9e6ebac9ca7c" aria-live="polite" style="transform: translate3d(0px, 0px, 0px);">
   <a class="swiper-slide double d-none d-lg-block swiper-slide-visible swiper-slide-active" href="/xmplus/irreverent/" data-gatext="video-carousel-xmplus-irreverent-irreverent" style="width: 931.2px; margin-right: 10px;" role="group" aria-label="Watch Irreverent">
    <img class="info-image lazy lz-entered lz-loaded" data-src="https://www.qualtrics.com/m/xm-plus/ir-info-glitch.png" alt="Irreverent" loading="lazy" data-ll-status="loaded" src="https://www.qualtrics.com/m/xm-plus/ir-info-glitch.png">
   </a>
   <a class="swiper-slide hover-expand hover-video swiper-slide-visible swiper-slide-next" href="/xmplus/irreverent/costco/" data-gatext="video-carousel-xmplus-irreverent-costco" style="width: 460.6px; margin-right: 10px;" role="group" aria-label="Watch Costco">
    <div class="placeholder" style="padding-top: 60.6%;">
     <img class="absolute-inside slide-image lazy lz-entered lz-loaded" alt="Costco" draggable="false" data-src-mobile="https://www.qualtrics.com/m/xm-plus/ir-costo-mt.png" data-src-desktop="https://www.qualtrics.com/m/xm-plus/ir-costco-t.png" data-ll-status="loaded" data-src="https://www.qualtrics.com/m/xm-plus/ir-costco-t.png" src="https://www.qualtrics.com/m/xm-plus/ir-costco-t.png">
     <video class="absolute-inside slide-video hover lazyVideo" loop="" muted="" playsinline="" preload="auto">
      <source type="video/mp4" data-src="https://www.qualtrics.com/m/xm-plus/costco.mp4" src="https://www.qualtrics.com/m/xm-plus/costco.mp4">Your browser does not support the video tag.
     </video>
     <div class="absolute-inside layer">
      <span class="time"></span>
      <div class="play-btn"></div>
     </div>
    </div>
   </a>
   ...
   ...
 <div class="swiper-button swiper-button-prev swiper-button-disabled" tabindex="-1" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-eaca9e6ebac9ca7c" aria-disabled="true"></div>
 <div class="swiper-button swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-controls="swiper-wrapper-eaca9e6ebac9ca7c" aria-disabled="false"></div>
 <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
</section>

Individual regular tile

<a class="swiper-slide hover-expand hover-video swiper-slide-visible swiper-slide-next" href="/xmplus/irreverent/costco/" data-gatext="video-carousel-xmplus-irreverent-costco" style="width: 460.6px; margin-right: 10px;" role="group" aria-label="Watch Costco">
 <div class="placeholder" style="padding-top: 60.6%;">
  <img class="absolute-inside slide-image lazy lz-entered lz-loaded" alt="Costco" draggable="false" data-src-mobile="https://www.qualtrics.com/m/xm-plus/ir-costo-mt.png" data-src-desktop="https://www.qualtrics.com/m/xm-plus/ir-costco-t.png" data-ll-status="loaded" data-src="https://www.qualtrics.com/m/xm-plus/ir-costco-t.png" src="https://www.qualtrics.com/m/xm-plus/ir-costco-t.png">
  <video class="absolute-inside slide-video hover lazyVideo" loop="" muted="" playsinline="" preload="auto">
   <source type="video/mp4" data-src="https://www.qualtrics.com/m/xm-plus/costco.mp4" src="https://www.qualtrics.com/m/xm-plus/costco.mp4">Your browser does not support the video tag.
  </video>
  <div class="absolute-inside layer">
   <span class="time"></span>
   <div class="play-btn"></div>
  </div>
 </div>
</a>

Individual locked tile

<div class="swiper-slide locked swiper-slide-visible last-visible" style="width: 460.6px; margin-right: 10px;" role="group" aria-label="Watch Impossible">
 <div class="placeholder" style="padding-top: 60.6%;">
  <img class="absolute-inside slide-image lazy lz-entered lz-loaded" alt="Impossible" draggable="false" data-src-mobile="https://www.qualtrics.com/m/xm-plus/ir-impossible-mt.png" data-src-desktop="https://www.qualtrics.com/m/xm-plus/ir-impossible-t.png" data-src="https://www.qualtrics.com/m/xm-plus/ir-impossible-t.png" data-ll-status="loaded" src="https://www.qualtrics.com/m/xm-plus/ir-impossible-t.png">
  <div class="absolute-inside layer">
   <span class="absolute-center text"></span>
  </div>
 </div>
</div>

Individual double width tile

<a class="swiper-slide double d-none d-lg-block swiper-slide-visible swiper-slide-active" href="/xmplus/irreverent/" data-gatext="video-carousel-xmplus-irreverent-irreverent" style="width: 931.2px; margin-right: 10px;" role="group" aria-label="Watch Irreverent">
 <img class="info-image lazy lz-entered lz-loaded" data-src="https://www.qualtrics.com/m/xm-plus/ir-info-glitch.png" alt="Irreverent" loading="lazy" data-ll-status="loaded" src="https://www.qualtrics.com/m/xm-plus/ir-info-glitch.png">
</a>

FAQ accordians

Launching with X4 on April 27, 2022, XM+ is an all-new streaming service with compelling on-demand and live content that tells stories of how the best brands and businesses win on Experience. Featuring original series, documentary films, live events, and other programming that spotlights brand, customer, and employee experiences that move the world forward, XM+ content is created for people in every role in every industry, and is produced to Hollywood standards by the team at Qualtrics Studios to be entertaining, relevant, thought-provoking, and inspiring to leaders at every level of every organization.

With its debut on XM+ this year, X4: The Experience Management Summit is now on your schedule. All sessions will be available for viewing on April 27. No tickets to buy, no travel to book—just the energy, inspiration, and exclusive content of X4 available in a streaming experience you’ll love.

Note that our one-on-one X4 sessions will be available for a limited time only. As we announce each new guest, we’ll communicate how long you’ll be able to view their session.

XM+ content is in English and has the following language options for subtitles: English, Korean, Japanese, Thai, Traditional Chinese, German, French, Dutch, Italian, Spanish, Arabic, Portuguese.

You can read the terms and conditions here.

<div id="faq-accordion" class="w-100 px-3 mb-5 bg-white">
 <div class="faq-card card">
  <div class="faq-card-header card-header bg-white pl-0 pr-0 pt-3 pb-2 border-bottom-0" id="heading0" data-toggle="collapse" data-target="#collapse0" aria-expanded="false" aria-controls="collapse0">
   <h5 class="mb-0 d-flex justify-content-between">
    <span class="d-block paragraph-large">What languages is XM+ content available in?</span>
    <button class="dropdown-btn d-flex"></button>
   </h5>
  </div>
  <div class="faq-card-body card-body p-0">
   <div id="collapse0" class="collapse" aria-labelledby="heading0" data-parent="#faq-accordion">
    <p class="paragraph pt-2 pb-7">XM+ content is in English and has the following language options for subtitles: English, Korean, Japanese, Thai, Traditional Chinese, German, French, Dutch, Italian, Spanish, Arabic, Portuguese.</p>
   </div>
  </div>
 </div>
 ...
 ...
</div>

BG fade

<class="w-100 position-relative shadow-container" style="opacity:1;">
  <class="shadow-gradient"></div>
</div>

Related content

XM Keynote

XM Keynote

17 min

Qualtrics CEO Zig Serafin discusses why companies today must win on Experience – and how leading businesses are deepening their relationships with customers and employees using the power of deep empathy at scale.

Qualtrics CEO Zig Serafin discusses why companies today must win on Experience – and how leading businesses are deepening their relationships with customers and employees using the power of deep empathy at scale.
Jo Malone

Rethinking First Impressions

14 min

From London, world-renowned perfumer Jo Malone reflects on the beliefs that have driven her maverick approach to scent-making and describes the innovative ways her brand is delivering a lasting first impression.

From London, world-renowned perfumer Jo Malone reflects on the beliefs that have driven her maverick approach to scent-making and describes the innovative ways her brand is delivering a lasting first impression.
Chip and Joanna Gaines

Authenticity Transforms Experience

19 min

Filmed on the slopes of Deer Valley, Chip and Joanna discuss how centering helped them create powerfully authentic experiences.

Filmed on the slopes of Deer Valley, Chip and Joanna discuss how centering helped them create powerfully authentic experiences.
<section class="content-list-section container-padding mt-4">
 <a class="content-list-row" href="/xmplus/x4/xm-keynote/" data-gatext="video-tile-x4player-xm-in-healthcare-xm-keynote" alt="Watch XM Keynote" target="_self">
  <div class="image-container">
   <img class="content-image lazy lz-entered lz-loaded" data-src="https://www.qualtrics.com/m/xm-plus/keynote-t.png" alt="XM Keynote" data-ll-status="loaded" src="https://www.qualtrics.com/m/xm-plus/keynote-t.png">
   <div class="absolute-inside shadow-layer-1">
     <div class="play-btn"></div>
   </div>
  </div>
  <div class="content-list text-white d-flex flex-column justify-content-center">
   <h3 class="content-title mb-0 mb-lg-3">XM Keynote</h3>
   <p class="content-time mb-0">17 min</p>
   <p class="d-none d-lg-block col-10 p-0 m-0">Qualtrics CEO Zig Serafin discusses why companies today must win on Experience – and how leading businesses are deepening their relationships with customers and employees using the power of deep empathy at scale.</p>
  </div>
  <p class="d-lg-none col-11 text-white p-0 mt-2 mb-0">Qualtrics CEO Zig Serafin discusses why companies today must win on Experience – and how leading businesses are deepening their relationships with customers and employees using the power of deep empathy at scale.</p>
 </a>
...
...
</section>

Slab slider

<section id="swiperTrigger1" class="slider-section swiperTrigger">
 <div class="swiper swiper-test mb-53 swiper-initialized swiper-horizontal swiper-pointer-events swiper-backface-hidden" data-direction-mobile="horizontal" data-pt-mobile="131%" data-slides-per-view-mobile="1.5" data-direction-desktop="horizontal" data-pt-desktop="60.6%" data-slides-per-view-desktop="2.5">
  <div class="swiper-wrapper" id="swiper-wrapper-710df4b5adb08c933" aria-live="polite" style="transform: translate3d(0px, 0px, 0px);">
   <a class="swiper-slide hover-video swiper-slide-visible swiper-slide-active" href="/xmplus/x4/jo-malone/" data-gatext="video-carousel-x4-jo-malone" style="width: 931.2px; margin-right: 10px;" role="group" aria-label="Watch Jo Malone">
    <div class="placeholder" style="padding-top: 60.6%;">
     <img class="absolute-inside slide-image lazy lz-entered lz-loaded" alt="Jo Malone" draggable="false" data-src-mobile="https://www.qualtrics.com/m/xm-plus/jm-m.png" data-src-desktop="https://www.qualtrics.com/m/xm-plus/jm.png" data-src="https://www.qualtrics.com/m/xm-plus/jm.png" src="https://www.qualtrics.com/m/xm-plus/jm.png">
     <video class="absolute-inside slide-video hover lazyVideo" loop="" muted="" playsinline="" preload="auto">
      <source type="video/mp4" data-src="https://www.qualtrics.com/m/xm-plus/jm.mp4" src="https://www.qualtrics.com/m/xm-plus/jm.mp4">
      Your browser does not support the video tag.
     </video>
     <div class="absolute-inside layer">
      <span class="time"></span>
      <div class="play-btn"></div>
     </div>
    </div>
   </a>
  </div>
 </div>
 <div class="swiper-button swiper-button-prev swiper-button-disabled" tabindex="-1" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-710df4b5adb08c933" aria-disabled="true"></div>
 <div class="swiper-button swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-controls="swiper-wrapper-710df4b5adb08c933" aria-disabled="false"></div>
 <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
</section>

Individual regular slab

<a class="swiper-slide hover-video swiper-slide-visible swiper-slide-active" href="/xmplus/x4/jo-malone/" data-gatext="video-carousel-x4-jo-malone" style="width: 931.2px; margin-right: 10px;" role="group" aria-label="Watch Jo Malone">
 <div class="placeholder" style="padding-top: 60.6%;">
  <img class="absolute-inside slide-image lazy lz-entered lz-loaded" alt="Jo Malone" draggable="false" data-src-mobile="https://www.qualtrics.com/m/xm-plus/jm-m.png" data-src-desktop="https://www.qualtrics.com/m/xm-plus/jm.png" data-src="https://www.qualtrics.com/m/xm-plus/jm.png" src="https://www.qualtrics.com/m/xm-plus/jm.png">
  <video class="absolute-inside slide-video hover lazyVideo" loop="" muted="" playsinline="" preload="auto">
   <source type="video/mp4" data-src="https://www.qualtrics.com/m/xm-plus/jm.mp4" src="https://www.qualtrics.com/m/xm-plus/jm.mp4">
   Your browser does not support the video tag.
  </video>
  <div class="absolute-inside layer">
   <span class="time"></span>
   <div class="play-btn"></div>
  </div>
 </div>
</a>

Individual locked slab

<div class="swiper-slide locked" style="width: 931.2px; margin-right: 10px;" role="group" aria-label="Watch Reese Witherspoon">
 <div class="placeholder" style="padding-top: 60.6%;">
  <img class="absolute-inside slide-image lazy lz-entered lz-loaded" alt="Reese Witherspoon" draggable="false" data-src-mobile="https://www.qualtrics.com/m/assets/wp-content/uploads/2022/05/tile-RW-E-m.png" data-src-desktop="https://www.qualtrics.com/m/assets/wp-content/uploads/2022/05/S-RW-E.png" data-src="https://www.qualtrics.com/m/assets/wp-content/uploads/2022/05/S-RW-E.png" data-ll-status="loaded" src="https://www.qualtrics.com/m/assets/wp-content/uploads/2022/05/S-RW-E.png">
  <div class="absolute-inside layer">
   <span class="absolute-center text"></span>
  </div>
 </div>
</div>
By providing this information, you agree that we may process your personal data in accordance with our Privacy Statement
By submitting this form, you agree to receive marketing information from Qualtrics as set out in our Terms of Service & Privacy Statement. You may unsubscribe at any time.
By submitting I agree to Qualtrics' Terms of Service & Privacy Statement