Base

  • Colors
    Colors have been developed to help guide a user through our interface.
  • Icons
    Icons add a visual layer to written information. They should be used to inform and enhance components. The purpose of the icon will determine whether or not it needs to receive focus or not.
  • Logos
  • Shadows and Elevations
    Shadows and Elevations to be used in Usertesting Next theme.
  • Spacing
  • Typography
    We also use the 8-pt methodology to control the vertical rhythm of our typography. Our base type size is 16px with a 1.5 line-height for optimal reading.

Components

  • Accordion
    Accordion is a toggle component to help customers expand and collapse sections of data
  • Avatars
    Avatars are used to quickly identify a customer’s properties including: studies, drafts, highlight reels, etc.
  • Badges
    Badges help inform customers on the state of a study. They also communicate and indicate number-driven information.
  • Buttons
    Buttons are useful to draw attention to a goal or action. Calls to actions within buttons should be explicit.
  • Cards
    Cards are useful to hold content. They have been used to contain content related to screeners and tasks.
  • Character Counter
    Wrap an input or textarea to keep count
  • Device Type Icons
  • Draggables
    Draggables are items that can be moved about the interface. Customers use this pattern to add and reorder elements to fit their needs.
  • Dropdowns
    Dropdowns are used to present individuals with a wide range of options and actions they can take.
  • Droppables
    Droppables are containers that can receive draggable components and files. They help customers transfer information across the interface.
  • Expandable image
    An image that can be be enlarged to view in full detail using the Lightbox.
  • Filters
    Filters are a way for users to drill down information.
  • Gallery card
    This component is in Beta. Gallery Cards are used to hold specific types of content. They have been used to preview content on the dashboard such as highlight reels and insights.
  • Icon Button
    The icon button is used to trigger a secondary action when we want to reduced visual noise.
  • Indicators
    Indicators are a source of metadata that help customers find what they need quickly.
  • Lightbox image
    A lightbox is a UI component used to display (in this case) an image in a modal overlay appearing on top of the main content. It provides users with an immersive way to focus on content without disrupting the overall layout, while also allowing them to quickly navigate back to the content beneath the lightbox.
  • Lists
    The List Row component helps group overview information. The information presented should be scannable and actionable.
  • Loading
    A visual indicator that a process is happening in the background but the interface is not yet ready for interaction.
  • Messages
    Messages enable customers and testers to communicate with each other.
  • Pictogram
    This component provides pictogram typed icons.
  • Poster Play
    This component is a button that provides a preview image for videos.
  • Progress bar
    General purpose component to track progress
  • QR Code
    This component is a component that will render a QR code of the value provided.
  • Rating stars
    Rating stars component that supports half stars
  • Row Selector
    The row selector component allows the user to select a list for bulk actions. It should only be used within tk-list-row.
  • Segmented Controls
    Use segment controls for mutually exclusive selections that directly controls another component.
  • Sentiment
  • Split View
    The split view component is made up of two content areas. The description area on the left and with the data/information area on the right. This pattern helps customers focus on data-heavy information.
  • Tables
    Tables are used to arrange and display data in a well-structured and meaningful way.
  • Tags
    Tags are compact elements that represent an input or attribute.
  • Tester vitals
    Configurable widget to display tester demographics along with an optional rating
  • Toggle button
  • Typeahead
    Typeahead helps customers find teammates and reduce the likelihood of errors.

Form

  • Checkbox
    A checkbox is used to give a user a way to select a value.
  • Combobox
    Combobox lets you choose a single or multiple values from a list of options.
  • Form Rule
    Form rules are used to divide content within forms.
  • Hint
    A prompt for inputs
  • Input
    A controllable input box. Note: we are currently in the midst of breaking out TkInput into several smaller, more focused components.
  • Input Title
    Input titles are used to name many different elements. Note: This is not yet a web component.
  • Label
    A label for inputs.
  • Multi-select List
    A checkbox list is used to give a user a way to select any number of a set of choices.
  • Search
    This component is still in Beta. Please reach out to Design System team before using it.
  • Select
    Make a selection using a dropdown.
  • Single-select List
    A radio box list is used to give a user a way to select one from a set of choices.
  • Sliders
    The range slider component allows the user to select a value or range.
  • Switch
    Switch for users to customize their experience.
  • Text Area
    A controllable text area box.

Layout

  • Containers
    Containers are a stylized component to hold content. Containers provide the visual foundation for most views.
  • Layers
    Layers are used to give order and preference on components. The most common applications of Layer are on Modals and Tooltips.
  • Layout
    Use the Toolkit helper classes to maintain harmony and alignment in the UI.
  • Split Layout
    Two columns layout with main left side content and secondary right side.
  • Wrappers
    Wrappers have specific widths to hold content blocks. Wrappers help organize content on a page to ensure a comfortable reading length.

Navigation

  • Context Switcher
    This component is still in Beta. Please reach out to Design System team before using it.
  • Nav bar
    These components are located near the top of views and help orient customers when they arrive to new pages.
  • Navigation
    These components are located near the top of views and help orient customers when they arrive to new pages.
  • Pagination
    Pagination allows customers to navigate between multiple pages worth of items in a single view.
  • Sidebar Navigation
    This component is still in Beta. Please reach out to Design System team before using it.
  • Step Navigation
    Step Navigation guides users through a workflow.
  • Tabs
    Tabs are used as a form of navigation within the same context, allowing the user to alternate between views that provide different information. A count badge can also be used in a tab.

Overlay

  • Banners
    When considering the use of a banner, it's best to evaluate the level of the message first. Content within banners must be important or require action taken by the customer.
  • Bulk Selector
    The bulk selector gives individuals the ability to take complex actions on a group of items.
  • Modals
    Modals are overlaying patterns and will intentionally obscure information behind it as such they can be disruptive. Modals require action before the user can continue interacting with the rest of UserTesting.
  • Popovers
    Popovers are components that overlay on top of the interface. Popovers can contain a mix of information. Popovers are used to inform customers about specific content and actions.
  • Toast
    Toast gives customers helpful information about the success or failure of their action
  • Tooltips
    Tooltips provide contextual information about a particular element.
  • User Notifications
    The notifications appear when the logged in user has new or existing notifications.

Patterns

  • Full Page Message
    A template that defines a simple message page, with options to include an image, banner and/or button if required.
  • Question card & Group Questions Container
    Question cards allow users to customize their tasks or Screener questions. Group Question Containers show multiple questions that are related to a bigger task or question.

Visualizations

  • Data Colors
    A color palette to help guide our Data Visualizations.

Gallery card

This component is in Beta. Gallery Cards are used to hold specific types of content. They have been used to preview content on the dashboard such as highlight reels and insights.

Default in a Grid Layout

The most basic magic ever known 8:30

Wingardium Leviosa

A charm used to make objects fly, or levitate. It was taught to first-years at Hogwarts School of Witchcraft and Wizardry.

Hermione Granger

Updated March 22,2022

 Basic magic 7:29

Alohomora

A spell to open locks; aka "the thief's friend.

Hermione Granger

Updated March 22,2022

 The best magic ever 7:29

Lumos

A charm that illuminated the tip of the caster's wand, allowing the caster to see in the dark. The counter-charm for the spell was the Wand-Extinguishing Charm (Nox), which was used to extinguish the light from the caster's wand.

Hermione Granger

Updated March 22,2022
Expand Copy 
<div class="l-grid l-col-3 l-md-col-2 l-sm-col-1 l-gap-2x">
  <tk-gallery-card selectable>
    <tk-gallery-card-content-type class="l-flex l-v-center">
      <tk-badge icon type="light">
        <tk-icon name="bolt"></tk-icon>
          The most basic magic ever known
      </tk-badge>
    </tk-gallery-card-content-type>
    <tk-gallery-card-actions>
      <button type="button" class="btn--icon-only" aria-label="Share Wingardium Leviosa">
        <tk-icon name="share"></tk-icon>
      </button>
      <tk-dropdown trigger-type="action" button-label="See Howler options">
        <tk-dropdown-item>
          <button class="dropdown__link" type="button">
            Send a Howler
          </button>
        </tk-dropdown-item>
        <tk-dropdown-item>
          <button class="dropdown__link" type="button">
            Recieve a Howler
          </button>
        </tk-dropdown-item>
        <tk-dropdown-item>
          <button class="dropdown__link" type="button">
            Delete a Howler
          </button>
        </tk-dropdown-item>
      </tk-dropdown>
    </tk-gallery-card-actions>
    <tk-gallery-card-body>
      <tk-poster-play
        class="mb-3x"
        poster-image-url="https://cdn3.vectorstock.com/i/1000x1000/77/77/unique-and-colorful-graphic-of-video-thumbnail-vector-40327777.jpg"
      >
        <span class="ml-2x t-base t-heavy" slot="play-length">8:30</span>
      </tk-poster-play>
      <tk-gallery-card-title>
        <h2 class="t-base t-heavy">Wingardium Leviosa</h2>
      </tk-gallery-card-title>
      <p class="t-truncate-2x">A charm used to make objects fly, or levitate. It was taught to first-years at Hogwarts School of Witchcraft and Wizardry.</p>
    </tk-gallery-card-body>
    <tk-gallery-card-footer>
      <tk-gallery-card-metadata>
        <p class="mb-0x t-small t-ghost t-heavy">Hermione Granger</p>
        <p class="t-ghost">Updated March 22,2022</p>
      </tk-gallery-card-metadata>
    </tk-gallery-card-footer>
  </tk-gallery-card>
  <tk-gallery-card>
    <tk-gallery-card-content-type>
      <tk-badge icon type="light">
        <tk-icon name="bolt"></tk-icon>
        Basic magic
      </tk-badge>
    </tk-gallery-card-content-type>
    <tk-gallery-card-actions>
      <button type="button" class="btn--icon-only" aria-label="Share Alohomora">
        <tk-icon name="share"></tk-icon>
      </button>
      <tk-dropdown trigger-type="action" button-label="See Howler options">
        <tk-dropdown-item>
          <button class="dropdown__link" type="button">
            Send a Howler
          </button>
        </tk-dropdown-item>
        <tk-dropdown-item>
          <button class="dropdown__link" type="button">
            Recieve a Howler
          </button>
        </tk-dropdown-item>
        <tk-dropdown-item>
          <button class="dropdown__link" type="button">
            Delete a Howler
          </button>
        </tk-dropdown-item>
      </tk-dropdown>
    </tk-gallery-card-actions>
    <tk-gallery-card-body>
      <tk-poster-play
        class="mb-3x"
        poster-image-url="https://cdn3.vectorstock.com/i/1000x1000/16/72/unique-and-colorful-video-thumbnail-design-vector-39131672.jpg"
      >
        <span class="ml-2x t-base t-heavy" slot="play-length">7:29</span>
      </tk-poster-play>
      <tk-gallery-card-title>
        <h2 class="t-base t-heavy">Alohomora</h2>
      </tk-gallery-card-title>
      <p class="t-truncate-2x">A spell to open locks; aka "the thief's friend.</p>
    </tk-gallery-card-body>
    <tk-gallery-card-footer>
      <tk-gallery-card-metadata>
        <p class="mb-0x t-small t-ghost t-heavy">Hermione Granger</p>
        <p class="t-ghost">Updated March 22,2022</p>
      </tk-gallery-card-metadata>
    </tk-gallery-card-footer>
  </tk-gallery-card>
  <tk-gallery-card>
    <tk-gallery-card-content-type>
      <tk-badge icon type="light">
        <tk-icon name="bolt"></tk-icon>
        The best magic ever
      </tk-badge>
    </tk-gallery-card-content-type>
    <tk-gallery-card-actions>
      <button type="button" class="btn--icon-only" aria-label="Share Lumos">
        <tk-icon name="share"></tk-icon>
      </button>
      <tk-dropdown trigger-type="action" button-label="See Howler options">
        <tk-dropdown-item>
          <button class="dropdown__link" type="button">
            Send a Howler
          </button>
        </tk-dropdown-item>
        <tk-dropdown-item>
          <button class="dropdown__link" type="button">
            Recieve a Howler
          </button>
        </tk-dropdown-item>
        <tk-dropdown-item>
          <button class="dropdown__link" type="button">
            Delete a Howler
          </button>
        </tk-dropdown-item>
      </tk-dropdown>
    </tk-gallery-card-actions>
    <tk-gallery-card-body>
      <tk-poster-play
        class="mb-3x"
        poster-image-url="https://cdn3.vectorstock.com/i/1000x1000/16/72/unique-and-colorful-video-thumbnail-design-vector-39131672.jpg"
      >
        <span class="ml-2x t-base t-heavy" slot="play-length">7:29</span>
      </tk-poster-play>
      <tk-gallery-card-title>
        <h2 class="t-base t-heavy">Lumos</h2>
      </tk-gallery-card-title>
      <p class="t-truncate-2x">A charm that illuminated the tip of the caster's wand, allowing the caster to see in the dark. The counter-charm for the spell was the Wand-Extinguishing Charm (Nox), which was used to extinguish the light from the caster's wand.</p>
    </tk-gallery-card-body>
    <tk-gallery-card-footer>
      <tk-gallery-card-metadata>
        <p class="mb-0x t-small t-ghost t-heavy">Hermione Granger</p>
        <p class="t-ghost">Updated March 22,2022</p>
      </tk-gallery-card-metadata>
    </tk-gallery-card-footer>
  </tk-gallery-card>
</div>

Description

Our Gallery Card component holds a preview of the content and is usually displayed in a grid with other Gallery Cards. The parent container dictates the width of the card. The tk-poster-play component is used within gallery card, you can learn more about it here.

Ratio wide

The most basic magic ever known 8:30

Wingardium Leviosa

A charm used to make objects fly, or levitate. It was taught to first-years at Hogwarts School of Witchcraft and Wizardry.

Hermione Granger

Updated March 22,2022

 Basic magic 7:29

Alohomora

A spell to open locks; aka "the thief's friend.

Hermione Granger

Updated March 22,2022

 The best magic ever 7:29

Lumos

A charm that illuminated the tip of the caster's wand, allowing the caster to see in the dark. The counter-charm for the spell was the Wand-Extinguishing Charm (Nox), which was used to extinguish the light from the caster's wand.

Hermione Granger

Updated March 22,2022
Expand Copy 
<div class="l-grid l-col-3 l-md-col-2 l-sm-col-1 l-gap-2x">
  <tk-gallery-card>
    <tk-gallery-card-content-type class="l-flex l-v-center">
      <tk-badge icon type="light">
        <tk-icon name="bolt"></tk-icon>
          The most basic magic ever known
      </tk-badge>
    </tk-gallery-card-content-type>
    <tk-gallery-card-actions>
      <button type="button" class="btn--icon-only" aria-label="Share Wingardium Leviosa">
        <tk-icon name="share"></tk-icon>
      </button>
      <button type="button" class="btn--icon-only" aria-label="Share Wingardium Leviosa">
        <tk-icon name="email"></tk-icon>
      </button>
    </tk-gallery-card-actions>
    <tk-gallery-card-body>
      <tk-poster-play
        ratio="wide"
        class="mb-3x"
        poster-image-url="https://cdn3.vectorstock.com/i/1000x1000/77/77/unique-and-colorful-graphic-of-video-thumbnail-vector-40327777.jpg"
      >
        <span class="ml-2x t-base t-heavy" slot="play-length">8:30</span>
      </tk-poster-play>
      <tk-gallery-card-title>
        <h2 class="t-base t-heavy">Wingardium Leviosa</h2>
      </tk-gallery-card-title>
      <p class="t-truncate-2x">A charm used to make objects fly, or levitate. It was taught to first-years at Hogwarts School of Witchcraft and Wizardry.</p>
    </tk-gallery-card-body>
    <tk-gallery-card-footer>
      <tk-gallery-card-metadata>
        <p class="mb-0x t-small t-ghost t-heavy">Hermione Granger</p>
        <p class="t-ghost">Updated March 22,2022</p>
      </tk-gallery-card-metadata>
    </tk-gallery-card-footer>
  </tk-gallery-card>
  <tk-gallery-card>
    <tk-gallery-card-content-type>
      <tk-badge icon type="light">
        <tk-icon name="bolt"></tk-icon>
        Basic magic
      </tk-badge>
    </tk-gallery-card-content-type>
    <tk-gallery-card-actions>
      <button type="button" class="btn--icon-only" aria-label="Share Alohomora">
        <tk-icon name="share"></tk-icon>
      </button>
      <tk-dropdown trigger-type="action" button-label="See Howler options">
        <tk-dropdown-item>
          <button class="dropdown__link" type="button">
            Send a Howler
          </button>
        </tk-dropdown-item>
        <tk-dropdown-item>
          <button class="dropdown__link" type="button">
            Recieve a Howler
          </button>
        </tk-dropdown-item>
        <tk-dropdown-item>
          <button class="dropdown__link" type="button">
            Delete a Howler
          </button>
        </tk-dropdown-item>
      </tk-dropdown>
    </tk-gallery-card-actions>
    <tk-gallery-card-body>
      <tk-poster-play
        ratio="wide"
        class="mb-3x"
        poster-image-url="https://cdn3.vectorstock.com/i/1000x1000/16/72/unique-and-colorful-video-thumbnail-design-vector-39131672.jpg"
      >
        <span class="ml-2x t-base t-heavy" slot="play-length">7:29</span>
      </tk-poster-play>
      <tk-gallery-card-title>
        <h2 class="t-base t-heavy">Alohomora</h2>
      </tk-gallery-card-title>
      <p class="t-truncate-2x">A spell to open locks; aka "the thief's friend.</p>
    </tk-gallery-card-body>
    <tk-gallery-card-footer>
      <tk-gallery-card-metadata>
        <p class="mb-0x t-small t-ghost t-heavy">Hermione Granger</p>
        <p class="t-ghost">Updated March 22,2022</p>
      </tk-gallery-card-metadata>
    </tk-gallery-card-footer>
  </tk-gallery-card>
  <tk-gallery-card>
    <tk-gallery-card-content-type>
      <tk-badge icon type="light">
        <tk-icon name="bolt"></tk-icon>
        The best magic ever
      </tk-badge>
    </tk-gallery-card-content-type>
    <tk-gallery-card-actions>
      <button type="button" class="btn--icon-only" aria-label="Share Lumos">
        <tk-icon name="share"></tk-icon>
      </button>
      <tk-dropdown trigger-type="action" button-label="See Howler options">
        <tk-dropdown-item>
          <button class="dropdown__link" type="button">
            Send a Howler
          </button>
        </tk-dropdown-item>
        <tk-dropdown-item>
          <button class="dropdown__link" type="button">
            Recieve a Howler
          </button>
        </tk-dropdown-item>
        <tk-dropdown-item>
          <button class="dropdown__link" type="button">
            Delete a Howler
          </button>
        </tk-dropdown-item>
      </tk-dropdown>
    </tk-gallery-card-actions>
    <tk-gallery-card-body>
      <tk-poster-play
        ratio="wide"
        class="mb-3x"
        poster-image-url="https://cdn3.vectorstock.com/i/1000x1000/16/72/unique-and-colorful-video-thumbnail-design-vector-39131672.jpg"
      >
        <span class="ml-2x t-base t-heavy" slot="play-length">7:29</span>
      </tk-poster-play>
      <tk-gallery-card-title>
        <h2 class="t-base t-heavy">Lumos</h2>
      </tk-gallery-card-title>
      <p class="t-truncate-2x">A charm that illuminated the tip of the caster's wand, allowing the caster to see in the dark. The counter-charm for the spell was the Wand-Extinguishing Charm (Nox), which was used to extinguish the light from the caster's wand.</p>
    </tk-gallery-card-body>
    <tk-gallery-card-footer>
      <tk-gallery-card-metadata>
        <p class="mb-0x t-small t-ghost t-heavy">Hermione Granger</p>
        <p class="t-ghost">Updated March 22,2022</p>
      </tk-gallery-card-metadata>
    </tk-gallery-card-footer>
  </tk-gallery-card>
</div>

Description

Passing a ratio="wide" prop to the tk-poster-play component renders the thumbnail on the card in a 16:9 ratio.

Minimal version in a Grid Layout

Astronomy Care of Magical Creatures Charms
Expand Copy 
<div class="l-grid l-col-3 l-md-col-2 l-sm-col-1 l-gap-2x">
  <tk-gallery-card minimal>
    <tk-gallery-card-content-type class="l-flex l-v-center">
      <tk-icon name="folder"></tk-icon>
      <span class="t-heavy t-small ml-2x">Astronomy</span>
    </tk-gallery-card-content-type>
    <tk-gallery-card-actions>
      <tk-dropdown trigger-type="action" button-label="See Howler options">
          <tk-dropdown-item>
            <button class="dropdown__link" type="button">
              Send a Howler
            </button>
          </tk-dropdown-item>
          <tk-dropdown-item>
            <button class="dropdown__link" type="button">
              Recieve a Howler
            </button>
          </tk-dropdown-item>
          <tk-dropdown-item>
            <button class="dropdown__link" type="button">
              Delete a Howler
            </button>
        </tk-dropdown-item>
      </tk-dropdown>
    </tk-gallery-card-actions>
  </tk-gallery-card>
  <tk-gallery-card minimal selectable>
    <tk-gallery-card-icon>
      <tk-icon name="folder"></tk-icon>
    </tk-gallery-card-icon>
    <tk-gallery-card-content-type>
      <span class="t-heavy t-small ml-2x">Care of Magical Creatures</span>
    </tk-gallery-card-content-type>
    <tk-gallery-card-actions>
      <tk-dropdown trigger-type="action" button-label="See Howler options">
          <tk-dropdown-item>
            <button class="dropdown__link" type="button">
              Send a Howler
            </button>
          </tk-dropdown-item>
          <tk-dropdown-item>
            <button class="dropdown__link" type="button">
              Recieve a Howler
            </button>
          </tk-dropdown-item>
          <tk-dropdown-item>
            <button class="dropdown__link" type="button">
              Delete a Howler
            </button>
        </tk-dropdown-item>
      </tk-dropdown>
    </tk-gallery-card-actions>
  </tk-gallery-card>
  <tk-gallery-card minimal selectable>
    <tk-gallery-card-icon>
      <tk-icon name="folder"></tk-icon>
    </tk-gallery-card-icon>
    <tk-gallery-card-content-type>
      <span class="t-heavy t-small ml-2x">Charms</span>
    </tk-gallery-card-content-type>
    <tk-gallery-card-actions>
      <tk-dropdown trigger-type="action" button-label="See Howler options">
          <tk-dropdown-item>
            <button class="dropdown__link" type="button">
              Send a Howler
            </button>
          </tk-dropdown-item>
          <tk-dropdown-item>
            <button class="dropdown__link" type="button">
              Recieve a Howler
            </button>
          </tk-dropdown-item>
          <tk-dropdown-item>
            <button class="dropdown__link" type="button">
              Delete a Howler
            </button>
        </tk-dropdown-item>
      </tk-dropdown>
    </tk-gallery-card-actions>
  </tk-gallery-card>
</div>

Description

The Gallery Card component can be used in minimal mode. This mode is intended for showing basic data only, usually an icon, a title, an action and a short description. If a Gallery Card in minimal mode is also selectable, the checkbox appears where the icon used to be when you hover over a card.

tk-gallery-card

Properties

Property Attribute Description Type Default
minimal minimal Boolean flag indicating whether a card should be rendered in minimal mode boolean false
selectable selectable Boolean flag indicating whether a card should be rendered with a checkbox to be able to select it boolean false
selected selected State indicator of whether a card is currently selected boolean false

Events

Event Description Type
cardSelect Fires when a card is selected by clicking its checkbox CustomEvent<boolean>

Slots

Slot Description
"actions" Actions that the user can take with the selected items. It should always be on the far right side. If using our tk-dropdown, the dropdown should have a position of top-right.
"body" Displays a title and description of the card content
"content-type" Displays the content type of the card content
"footer" Shows tertiary information like created date, created by, etc.
"title" Displays the title of the card content

Usage

Do

  • If you are using the gallery card in a grid, do use our grid utility classes on the parent element to set the number of cards in the row
  • Reserve the use of tk-gallery-card-content-type sub-component for our badge or badge-like content
  • When in minimal mode, reserve the use of tk-gallery-card-content-type sub-component for an icon (like tk-icon)

Don't

  • Add more than four actions in the tk-gallery-card-actions
  • Add more than one action in tk-gallery-card-actions if using the Gallery Card in minimal mode sub-component