Cards are useful to hold content. They have been used to contain content related to screeners and tasks.
This is where the card info would go.
This is a footer
<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>
Small cards are used for containing content in a small area.
This will span full width of its container.
<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>
Medium cards are used for containing content in a medium area.
<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>
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lorem
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lorem
<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>
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 numeratedtk-badges
must each contain their index that follows the placement of the cards.
The spacing is tighter for compact cards.
<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>
Compact cards should be used when the outer container is compacted.
<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>
The removable card is using the height transition to slide-down/up when it opens and closes.
<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>
Light (default): for the dark background.
Muted: for the light background.
--tk-theme
CSS property.
To receive theme styling: set :root { --tk-theme: userTestingTheme }
in your main CSS file.Does not receive :focus
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 |
Event | Description | Type |
---|---|---|
close |
Fires when the removeable card is closed. | CustomEvent<any> |
closeCard() => Promise<void>
Type: Promise<void>
openCard() => Promise<void>
Type: Promise<void>