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;

Buttons


  • Class: .xm-plus-cta

  • Class: .xm-plus-cta-lg

  • Class: .watch-btn .d-flex

  • Class: .play-btn

  • Class: .back-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" 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" class="d-block d-md-inline" height="93.34"/>
    </figure>

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" />

Video Cards

<div class="video-card lazy d-flex" data-url="" data-bg="https://www.qualtrics.com/m/assets/wp-content/uploads/2022/02/sample-image-2.png">
    <video class="w-100 h-100" loop loading="eager" 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 class="play-btn"></div>
</div>

Forms