Base

  • Colors
  • Icons
  • Logos
  • Spacing
  • Typography

Components

  • Accordion
  • Avatars
  • Badges
  • Buttons
  • Cards
  • Character Counter
  • Device Type Icons
  • Draggables
  • Dropdowns
  • Droppables
  • Filters
  • Gallery card
  • Indicators
  • Lists
  • Loading
  • Messages
  • Pictogram
  • Poster Play
  • Progress bar
  • QR Code
  • Rating stars
  • Row Selector
  • Sentiment
  • Split View
  • Tables
  • Tags
  • Tester vitals
  • Toast
  • Toggle button
  • Typeahead

Form

  • Checkbox
  • Combobox
  • Form Rule
  • Hint
  • Input
  • Input Title
  • Label
  • Multi-select List
  • Search
  • Select
  • Single-select List
  • Sliders
  • Switch
  • Tabs
  • Text Area

Layout

  • Containers
  • Layers
  • Layout
  • Split Layout
  • Wrappers

Navigation

  • Context Switcher
  • Nav bar
  • Navigation
  • Pagination
  • Sidebar Navigation
  • Step Navigation

Overlay

  • Banners
  • Bulk Selector
  • Modals
  • Popovers
  • Tooltips
  • User Notifications

Patterns

  • Full Page Message

Usertesting-next

  • Cards
  • Colors
  • Segmented Controls
  • Shadows and Elevations
  • Spacing
  • Typography

Visualizations

  • Data Colors

Cards

Cards are useful to hold content. They have been used to contain content related to screeners and tasks.

Size

Small Card

Card Content

This is where the card info would go.

This is a footer

Expand Copy
<tk-card size="small" class="mt-2x">
  <tk-card-header>
    <h3 class="t-large">Small Card</h3>
  </tk-card-header>
  <tk-card-body>
    <h4 class="t-medium">Card Content</h4>
    <p>This is where the card info would go.</p>
  </tk-card-body>
  <tk-card-footer>
    <p>This is a footer</p>
  </tk-card-footer>
</tk-card>

Description

Small cards are used for containing content in a small area.

Medium Card

Medium Card

Card Content

This will span full width of its container.

Expand Copy
<tk-card size="medium">
  <tk-card-header>
    <h3 class="t-large">Medium Card</h3>
  </tk-card-header>
  <tk-card-body>
    <h4 class="t-medium">Card Content</h4>
    <p>This will span full width of its container.</p>
  </tk-card-body>
</tk-card>

Description

Medium cards are used for containing content in a medium area.

Moveable

Moveable Card

Card Button

Uses:

  • Screener Questions
  • Task Editor
  • Highlight Reel
Expand Copy
<tk-card moveable>
  <tk-card-header>
    <h3 class="t-large">Moveable Card</h3>
    <tk-card-toolbar>
      <tk-button type="ghost">Card Button</tk-button>
    </tk-card-toolbar>
  </tk-card-header>
  <tk-card-body>
    <h4 class="t-medium">Uses:</h4>
    <ul class="bulleted-list">
      <li>Screener Questions</li>
      <li>Task Editor</li>
      <li>Highlight Reel</li>
    </ul>
  </tk-card-body>
</tk-card>

Description

This card pattern works well with droppable and draggable styles. Moveable cards house content that give customers the ability to manipulate their order. This makes them great for screeners and tasks.

Numerated

1

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lorem

2

Header

Card Button

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lorem

Expand Copy
<div>
  <!-- card #1 -->
  <tk-card size="medium">
    <tk-card-header>
      <tk-badge class="mr-2x">1</tk-badge>
      <h3 class="t-medium m-0x task__count">Header</h3>
    </tk-card-header>
    <tk-card-body>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lorem</p>
    </tk-card-body>
  </tk-card>

  <!-- card #2 -->
  <tk-card class="mt-4x" size="medium">
    <tk-card-header>
      <tk-badge class="mr-2x">2</tk-badge>
      <h3 class="t-medium m-0x task__count">Header</h3>
      <tk-card-toolbar>
        <tk-button type="ghost">Card Button</tk-button>
      </tk-card-toolbar>
    </tk-card-header>
    <tk-card-body>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lorem</p>
    </tk-card-body>
  </tk-card>
</div>

Description

Like moveable cards, numerated cards are often paired with screeners and tasks to serve as a reference in which the content will be seen.

Insight

Note: The numerated tk-badges must each contain their index that follows the placement of the cards.

Compact Card

Compact Card

Card Button

Card Content

The spacing is tighter for compact cards.

Expand Copy
<tk-card compact>
  <tk-card-header>
    <h3 class="t-large">Compact Card</h3>
    <tk-card-toolbar>
      <tk-button type="ghost">Card Button</tk-button>
    </tk-card-toolbar>
  </tk-card-header>
  <tk-card-body>
    <h4 class="t-medium">Card Content</h4>
    <p>The spacing is tighter for compact cards.</p>
  </tk-card-body>
</tk-card>

Description

Compact cards should be used when the outer container is compacted.

Removable card

Show the card

Removable Card Content

Card Content

Expand Copy
<tk-button class="btn mb-2x" onClick="card.openCard()">
  Show the card
</tk-button>
<tk-card id="card" muted removable>
  <tk-card-header>
    <h3 class="t-large">Removable Card Content</h3>
  </tk-card-header>
  <tk-card-body>
    <h4 class="t-medium">Card Content</h4>
  </tk-card-body>
</tk-card>

Description

The removable card is using the height transition to slide-down/up when it opens and closes.

Variants

Light Card

Card Content

Muted Card

Card Content

Expand Copy
<tk-card>
  <tk-card-header>
    <h3 class="t-large">Light Card</h3>
  </tk-card-header>
  <tk-card-body>
    <h4 class="t-medium">Card Content</h4>
  </tk-card-body>
</tk-card>

<tk-card muted class="mt-5x">
  <tk-card-header>
    <h3 class="t-large">Muted Card</h3>
  </tk-card-header>
  <tk-card-body>
    <h4 class="t-medium">Card Content</h4>
  </tk-card-body>
</tk-card>

Description

Light (default): for the dark background.
Muted: for the light background.

Usage

Do

  • Use the card for the correct amount of content
  • Group like items within a card
  • Use moveable and numerated cards together

Don't

  • Use movable cards for cards that aren’t meant to be moved
  • Use larger cards inside of smaller cards

Theming

This component will receive a different set of styles based on the active --tk-theme CSS property. To receive theme styling: set :root { --tk-theme: userTestingTheme } in your main CSS file.

Accessibility

  • Does not receive :focus

tk-card

Properties

Property Attribute Description Type Default
compact compact This prop is to set the compact styling of the card. boolean false
drag drag This prop is to set the drag styling of the card. It is only themed for userTestingNext. boolean false
interactive interactive This prop is to set the interactive state of the card. It is only themed for userTestingNext. boolean false
moveable moveable This prop is to set the moveable styling of the card. boolean false
muted muted A boolean flag indicating whether the color of the card should be muted or not. boolean false
removable removable A boolean flag indicating whether the card is removeable. boolean false
size size This prop is to set the size of the card. "large" | "medium" | "small" | "xl" 'medium'
spacing spacing This prop is to set the outer spacing of the card. It is only themed for userTestingNext. "0x" | "1x" | "2x" | "3x" | "4x" | "5x" '2x'
type type This prop is to set the type of the card. It is only themed for userTestingNext. "dissolved" | "elevated" | "filled" | "outline" 'outline'
visible visible A boolean flag indicating whether the card is visible. boolean !this.removable

Events

Event Description Type
close Fires when the removeable card is closed. CustomEvent<any>

Methods

closeCard() => Promise<void>

Returns

Type: Promise<void>

openCard() => Promise<void>

Returns

Type: Promise<void>