Containers

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

Default

Default container

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

Description

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

Sizes

Small container

Medium container

Large container (default)

 
<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>

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

 
<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

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

Description

This pattern is useful in separating content within containers. It uses $interface-midnight--xx-light as its background color.

Props: tk-container

Property Type Default Description
header boolean false Adds a header for the container’s content.
noHeaderBorder boolean false Removes the header’s border.
padding boolean true Provides padding between the content and container border.
size 'large', 'medium', or 'small' 'large' Sets the width of the container.
subcontainer boolean false Marks the container as a subcontainer.

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