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

Containers

Containers are a stylized component to hold content. Containers provide the visual foundation for most views.

Default

Default container

Copy
<tk-container>
  <p>Default container</p>
</tk-container>

Description

The default visual style for containers. Containers use var(--interface-white) to ensure contrast from the background.

Sizes

Small container

Medium container

Large container (default)

Extra large container

Expand Copy
<tk-container size="small">
  <p>Small container</p>
</tk-container>

<tk-container size="medium">
  <p>Medium container</p>
</tk-container>

<tk-container size="large">
  <p>Large container (default)</p>
</tk-container>

<tk-container size="xl">
  <p>Extra large container</p>
</tk-container>

Description

There are three container sizes: small, medium, and large. The default size is large.

Header

Basilisk

The Basilisk is a giant serpent, also known as the King of Serpents. It is a magical beast that is bred by Dark Wizards. Herpo the Foul was the first to breed a Basilisk; he accomplished this by hatching a chicken egg beneath a toad which resulted in the creature known as a Basilisk.

Three-headed Dogs

Three-headed dogs are very rare magical beasts. Their great weakness is the inability to resist falling asleep to the sound of music.

Rubeus Hagrid once owned a three-headed dog named Fluffy. "They were looking straight into the eyes of a monstrous dog, a dog that filled the whole space between ceiling and floor. It had three heads. Three pairs of rolling,mad eyes; three noses, twitching and quivering in their direction; three drooling mouths, saliva hanging in slippery ropes from yellowish fangs." —Harry Potter, Ron Weasley, Hermione Granger and Neville Longbottom encountering Fluffy

Expand Copy
<tk-container header>
  <h2 slot="header-title" class="t-large">Basilisk</h2>
  <p>The Basilisk is a giant serpent, also known as the King of Serpents. It is a magical beast that is bred by Dark Wizards. Herpo the Foul was the first to breed a Basilisk; he accomplished this by hatching a chicken egg beneath a toad which resulted in the creature known as a Basilisk.</p>
</tk-container>

<tk-container header no-header-border>
  <h2 slot="header-title" class="t-large">Three-headed Dogs</h2>
  <p slot="header-subtitle" class="t-ghost">Three-headed dogs are very rare magical beasts. Their great weakness is the inability to resist falling asleep to the sound of music.</p>
  <div slot="header-actions">
    <button type="button" class="btn t-link">Adopt Puppy</button>
  </div>
  <p>Rubeus Hagrid once owned a three-headed dog named Fluffy. "They were looking straight into the eyes of a monstrous dog, a dog that filled the whole space between ceiling and floor. It had three heads. Three pairs of rolling,mad eyes; three noses, twitching and quivering in their direction; three drooling mouths, saliva hanging in slippery ropes from yellowish fangs."
  —Harry Potter, Ron Weasley, Hermione Granger and Neville Longbottom encountering Fluffy</p>
</tk-container>

Description

This pattern uses a header to introduce the container’s content.

Subcontainer

Subcontainer

Copy
<tk-container>
  <tk-container subcontainer>
    <p>Subcontainer</p>
  </tk-container>
</tk-container>

Description

This pattern is useful in separating content within containers. It uses var(--interface-secondary-xx-light) as its background color.

tk-container

Properties

Property Attribute Description Type Default
header header Adds a header for the container’s content. boolean false
noHeaderBorder no-header-border Removes the header’s border. boolean false
padding padding Provides padding between the content and container border. boolean true
size size Sets the width of the container. "large" | "medium" | "small" | "xl" 'large'
subcontainer subcontainer Marks the container as a (nested) subcontainer, which applies the appropriate styling. boolean false

Usage

Do

  • Use large containers as the outermost element
  • Put smaller containers within larger containers
  • Use clear language in the header of a new container

Don't

  • Mix and match container sizes at the outermost level