Note: This style guide is outdated.

This style guide was last updated in April 2017. If you're looking for more up to date styles, go to the current style guide.

This page is here for historical purposes only. Most of the associated CSS code is found in qualtrics-scaffolding.less.

Qualtrics Jumbotron

The Qualtrics Jumbotron is the base of both .qualtrics-hero and .qualtrics-sidekick but is more flexible as far as content goes. Here's some sample code:

<section class="qualtrics-jumbotron spacing-lg">
	<div class="container">
		<div class="row">
			<div class="col-sm-7">
				<h1 class="no-spacing text-white">Two Words: Qualtrics Jumbotron.</h1>
			</div>
			<div class="col-sm-5">
				<p class="no-spacing spacing-tn-top text-white">This is the Qualtrics jumbotron.</p>
				<a class="btn-q-primary spacing-tn-top" href="#">It's so jumbo!</a>
			</div>
		</div>
	</div>
	<img class="sidekick-image" src="/wp-content/themes/qualtrics/images/pages/about/qualtrics-building.jpg" />
</section>

The use case for the .qualtrics-jumbotron is for when you need a section with a responsive, full-width image; the margins aren't set by default, and you're pretty free to do whatever you need to do (content-wise) within the .container, but be sure to include the <img class="sidekick-image" /> with a background image.

Optional Modifiers

Use these modifiers by adding them right after qualtrics-jumbotron:

• .jumbotron-light-text - changes the text color of the h1, p, and ul to white
• Image attachment classes:
  • Depending on the background image, it needs to be "attached" to the page in different ways (in terms of responsive design)
  • The available classes for attaching an image are .attach-bottom & .attach-right
  • Images are "attached" by default to the top and left

Qualtrics Hero

The Qualtrics Hero is used frequently throughout our pages - typically at the top, and sometimes again lower down the page. Here's what the code looks like:

<section class="qualtrics-hero">
	<div class="container">
		<h3 class="text-primary">This is such a fancy little red header</h3>
		<h1>The Qualtrics Style Guide</h1>
		<p>Welcome. This is the qualtrics style guide.</p>
		<a href="#" class="btn-q-primary">Click Me</a>
	</div>
	<img class="hero-image" src="/wp-content/themes/qualtrics/images/home/cruise.jpg" />
</section>

By using the .qualtrics-hero class with the following code, it normalizes and sets the margin between the h3, h1, p, and, optionally, an anchor with a .btn-pill or .btn-q-primary class.

Optional Modifiers

Use these modifiers by adding them right after qualtrics-hero:

• .hero-light-text - changes the text color of the h1 and p to white
• .hero-light-subtitle - changes the text color of the h3 to white
• Any of the Qualtrics Jumbotron modifier classes work on the Qualtrics Hero

Qualtrics Sidekick

The Qualtrics Sidekick is really similar to the Qualtrics Hero, but typically isn't used at the top of the page. Here's what the code looks like:

<section class="qualtrics-sidekick">
	<div class="container">
		<div class="row">
			<div class="col-sm-7">
				<h3>Customer Experience</h3>
				<h1>This is the Qualtrics Sidekick. Pun intended.</h1>
			</div>
			<div class="col-sm-5">
				<ul class="plus-list">
					<li>Qualtrics Sidekick<sup>&reg;</sup></li>
					<li>Has this fancy plus list</li>
					<li>Works pretty much like the qualtrics-hero</li>
				</ul>
				<a class="btn-q-primary" href="#">I'm so impressed</a>
			</div>
		</div>
	</div>
	<img class="sidekick-image" src="/wp-content/themes/qualtrics/images/home/jetblue.jpg" />
</section>

By using the .qualtrics-sidekick class with the following code, it normalizes and sets the margin between the h3 and h1, ul and .btn-pill or .btn-q-primary.

Optional Modifiers

Use these modifiers by adding them right after qualtrics-sidekick:

• .sidekick-light-text - changes the text color to white
• Any of the Qualtrics Jumbotron modifier classes work on the Qualtrics Sidekick

Qualtrics Line Header

This nifty little line header is fairly extensible, and has the following markup:

<div>
	<hr class="qualtrics-hr-break spacing-sm" />
	<h3 class="qualrics-hr-title spacing-xs bg-white width-25">
		What a header!
	</h3>
</div>

The key components of this are:

• The parent div - this keeps your hr and header
• <hr class="qualtrics-hr-break" /> - this is the actual hr, and it needs to have the .qualtrics-hr-break in order to have the right margins and look to it.
  • You can apply .spacing-* classes to this, which only affects the spacing above the <hr>, but not the spacing below.
• <h3 class="qualrics-hr-title"> - this is the container for the words (or icon) - the two elements you can use are an <h3> and an <h4>.
  • You can apply .spacing-* classes to this, which only affects the spacing below the header, but not the spacing above.
  • You can use an icon in this section and it'll work just fine (something like <i class="ql ql-sap"></i>)
  • The header needs a background color class in order to work properly (to make it look like the line stops around the "box" where the header is)

Optional Modifiers

By default, the <hr> is colored @qualtrics-gray-md. Use the following classes to change the color:

• .black - changes the <hr> black
• .white - changes the <hr> white

The header has default widths and background colors, but sometimes those don't match the design or content; use the following modifier classes to get it looking just right:

• Width classes:
  • .width-15 - changes the width of the header to 15%
  • .width-18 - changes the width of the header to 18%
  • .width-20 - changes the width of the header to 20%
  • .width-25 - changes the width of the header to 25%
• Background color classes:
  • .bg-gray-super-lt - changes the background to @bg-gray-super-lt
  • .bg-gray-lt - changes the background to @bg-gray-lt
  • .bg-gray-md - changes the background to @bg-gray-md

Logo Strip

Here's some example code for the logo wall:

<section class="qualtrics-logos bg-gray-super-lt">
	<div class="container">
		<div class="row">
			<div class="col-bl-6 col-sm-3 col-md-offset-1 col-md-2">
				<i class="ql ql-3x ql-southwest"></i>
			</div>
			<div class="col-bl-6 col-sm-3 col-md-2">
				<i class="ql ql-8x ql-emirates ql-top-20"></i>
			</div>
			<div class="col-bl-6 col-sm-3 col-md-2">
				<i class="ql ql-5x ql-jetblue ql-top-6"></i>
			</div>
			<div class="col-bl-6 col-sm-3 col-md-2">
				<i class="ql ql-2x ql-american-airlines ql-bottom-3"></i>
			</div>
			<div class="hidden-xs hidden-sm col-md-2">
				<i class="ql ql-2x ql-united ql-bottom-2"></i>
			</div>
		</div>
	</div>
</section>

This one is for a 5-logo layout that hides one of those 5 logos on smaller screens; the key here is the .qualtrics-logos class on the parent </section> tag. You use the logo class (.ql) like the icon class.

Optional Modifiers

You can use any of the logo font modifiers with the logo strip.

Horizontal ol

The .horizontal-ol isn't a modification of the actual <ol> tag, but just a class (and subclasses) to show blocks in a row, as you see before. The code looks like this:

<section class="horizontal-ol qualtrics-hero spacing-sm">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<h1 class="text-center">Sometimes you need to say three things.</h1>
			</div>
			<div class="col-md-4">
				<div class="empower-number">1</div>
				<div class="empower-about">
					<h3>First</h3>
					<p>If you end your training now—if you choose the quick and easy path, as Vader did—you will become an agent of evil.</p>
				</div>
			</div>
			<div class="col-md-4">
				<div class="empower-number">2</div>
				<div class="empower-about">
					<h3>Second</h3>
					<p>A Jedi must have the deepest commitment, the most serious mind.... All his life has he looked away...to the future, to the horizon. Never his mind on where he was. Hmm? What he was doing. Hmph. Adventure. Heh. Excitement. Heh. A Jedi craves not these things. You are reckless.</p>
				</div>
			</div>
			<div class="col-md-4">
				<div class="empower-number">3</div>
				<div class="empower-about">
					<h3>Third</h3>
					<p>You must unlearn what you have learned.</p>
				</div>
			</div>
		</div>
	</div>
	<img class="hero-image" src="/wp-content/themes/qualtrics/images/pages/employee-insights/ei-hero-two.jpg" alt="Empower your Customer Experience">
</section>

This module is used on the solutions pages, and they're a pretty specialized module; if you're planning on using this module more (and wanting to modify it), the CSS and associated markup should be re-written to be more generic and make better use of the helper classes.

Qualtrics Information List

The above module is called the Qualtrics information list. Here's some sample code:

<section class="qualtrics-information-list spacing-sm bg-gray-lt">
	<div class="container">
		<div class="row">
			<div class="col-xs-12 no-spacing-important">
				<h1 class="no-spacing">Mmm. Information lists.</h1>
			</div>
			<div class="col-md-4">
				<i class="qi qi-"></i>
				<h3>I really like bacon</h3>
				<p>...</p>
			</div><div class="col-md-4">
				<i class="qi qi-"></i>
				<h3>I also like cats</h3>
				<p>...</p>
			</div><div class="col-md-4">
				<i class="qi qi-"></i>
				<h3>I also like latin</h3>
				<p>...</p>
			</div>
		</div>
	</div>
</section>

IMPORTANT: when making the column divs, it's important that there is no whitespace between the divs. So in the above code, the </div><div class="col-md-4"> code structure is essential to making this work properly.

Reasoning for using inline block rather than bootstrap's default styling:

• Bootstrap uses floats; a grid of floating objects with differing heights will cause elements to catch on each other and not wrap correctly
• The alternative would be to use multiple rows of floated objects, however this would cause responsive issues. If you have 3 columns in a row with classes .col-xs-6 and .col-sm-4, since they are wrapped in a row, there would be a missing grid item in the bottom right corner when the screen size goes below 767px. Check out the broken row example below by bringing the screen width below 767px:

Expanding Element

The above is an expanding element. Here's the most basic code to implement it:

<section class="expand-outer">
	<div class="whatever">
		Here is some content that is always visible.
	</div>
	<div class="expand-inner">
		Hidden Content
		<a class="link-expand btn-pill btn-q-primary" href="#" data-alternate="Close" scroll="false" data-visible="false">
			Second (optional) button inside of the expanding section that will close this expanding section
		</a>
	</div>
	<a class="link-expand btn-pill btn-q-primary" href="#" data-alternate="Close" scroll="false" data-visible="false">
		Open
	</a>
</section>

Optional Modifiers

Use these modifiers by adding them right after expand-outer:

• .border-top-lt - adds a border with a light gray fill
• .border-bottom - adds a border with a medium gray fill
• .border-bottom-lt - adds a border with a light gray fill
• .open-border-bottom - when the expanded div is open, this adds a border with a medium gray fill
• .open-border-bottom-lt - when the expanded div is open, this adds a border with a light gray fill

Button Attributes

Use these attributes to customize the buttons:

• data-alternate - Set this value to whatever you want; This is the value that will be displayed when the expanding element is visible
• data-scroll - Either true or false - using true will scroll the user to the expanding element when it becomes visible
• data-visible - Do not change this as it is used by the JS for toggling. In the future we can add ability to have it visible on page load, but for now it must be hidden
• data-time - Customize the time to open and close the expanding element in milliseconds. Default is 400 milliseconds. (Elements always close faster by a factor of 50%)

Features and UX

• Any button with a class of link-expand within an element with the class expand-outer will expand the element with class expand-inner
• This means you can have buttons inside of the expand-inner element itself! (these will always close the div)
• When you click a button, all of the buttons will change values to reflect expanding element's current state
• Containers and rows are not required
• When data-scroll is set to true, scrolling only occurs when the expanding element goes from hidden to visible

Expanding Section

The expanding section is similar to the expanding element, but it's meant to be used with a qualtrics hero/sidekick/jumbotron. Here's what the code looks like:

<div class="expand-outer">
	<section class="qualtrics-sidekick sidekick-light-text">
		<div class="container">
			<div class="row">
				<div class="col-sm-7">
					<h3 class="header-cx">Coder Experience</h3>
					<h1>Expand even <br />from inside a sidekick.</h1>
				</div>
				<div class="col-sm-5">
					<ul class="plus-list">
						<li>Expands your content to see stuff</li>
						<li>Nice picture of a lady in an airport</li>
					</ul>
					<a class="link-expand btn-q-primary" href="#" data-alternate="See More" scroll="true" data-visible="false">See More</a>
				</div>
			</div>
		</div>
		<img class="sidekick-image" src="/wp-content/themes/qualtrics/images/pages/airlines/market-research.jpg" />
	</section>
	<div class="expand-inner bg-gray-super-lt">
		<section class="expanded-section">
			<div class="container spacing-lg">
				<a class="link-expand btn-q-secondary-alt" href="#" data-alternate="Close" scroll="false" data-visible="false">Close</a>
				<h1 class="no-spacing spacing-xs-bottom">You'd probably see content inside this area.</h1>
				<p class="spacing-xs-bottom">
					They'd have fancy jargon about how this increased baseline sales or NPS or something.
				</p>
				<p>
					It would be a nice story about them doing cool stuff and making big bucks. Or maybe not as big bucks if it's about a non-profit. Depends on the non-profit. 
				</p>
			</div>
		</section>
	</div>
</div>

Tabs Section

This module can be used to toggle between 2 or 3 different tabs which have different content.

<section class="qualtrics-tabs">
	<div class="container"><div class="row spacing-md-top spacing-xs-bottom">
		<div class="col-bl-offset-1 col-bl-10 col-sm-offset-0 col-sm-12 col-md-offset-3 col-md-8 col-lg-offset-4 col-lg-6">
		<ul class="nav nav-tabs-blue" role="tablist">
		<li role="presentation" class="active" id="tab-first"><h2><a href="#customer" aria-controls="home" role="tab" data-toggle="tab">What It Is</a></h2>
			</li><li role="presentation" class=""><h2><a href="#market" aria-controls="profile" role="tab" data-toggle="tab">How it works</a></h2>
			</li><li role="presentation" class="" id="tab-last"><h2><a href="#academic" aria-controls="messages" role="tab" data-toggle="tab">Questions</a></h2>
			</li>
		</ul>
	</div>
</div> 
	<div class="tab-content spacing-sm-bottom"> 
	<div role="tabpanel" class="tab-pane active spacing-sm-top" id="customer"> 
		<div class="col-xs-10 col-xs-offset-1 spacing-md-bottom"> <h2>We're always looking for ways to improve our products</h2> <h3>And the best people to tell us how to do that are users like you!</h3>
		<p class="spacing-tn">User experience research helps us improve Qualtrics products by gathering feedback directly from the people who use them. Sharing your experience and feedback helps our product team continue to build and enhance the tools you love.</p> 
		<p class="spacing-tn-bottom">During a study session, we may show you an existing product or a prototype of a new feature and ask what you think. We may also ask about your work habits or daily practices, such as how you interact with the people on your team to process and report survey data.</p> 
			</div> 
		</div>
	</div>
</div>
</section>
			

Bullet List Section

This module can be used for unordered lists (currently used in 3rd tier pages).

<ul class="circle-list">
	<li class="spacing-tn-bottom"><span class="h4 no-spacing">This is a title to a bullet point.</span>
		<span>This is the content. Content for the win! This is designed to be a paragraph, so at this point I'm just typing things to take up space. I really should look into using the Lorem Ipsum or something.</span></li>
	<li class="spacing-tn-bottom"><span class="h4 no-spacing">Another Bullet Point!</span>
		<span>Even MORE content. Content is the best. </span></li>
	<li class="spacing-tn-bottom"><span class="h4 no-spacing">Aaaaaand yet another bullet point.</span>
		<span>I've heard that if you have bullet points, you should always have at least three. So here we are - 3! It looks like the style for bullet points has an issue where the line height is too high. Let's fix it!</span></li>
</ul>
			

Introduction Text Section

This module can be used for introduction text at the top of a new page

<p class="intro-text" align="center">
	This is the introductory paragraph, which is larger text and centered. It's probably wise to make sure that this paragraph doesn't get too long because people don't actually read things on the internet. <br>People are the worst.
</p>