Containers are a stylized component to hold content. Containers provide the visual foundation for most views.
Default container
<tk-container>
<p>Default container</p>
</tk-container>
The default visual style for containers. Containers use var(--interface-white)
to ensure contrast from the background.
Small container
Medium container
Large container (default)
Extra large container
<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>
There are three container sizes: small, medium, and large. The default size is large.
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 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>
This pattern uses a header to introduce the container’s content.
Subcontainer
<tk-container>
<tk-container subcontainer>
<p>Subcontainer</p>
</tk-container>
</tk-container>
This pattern is useful in separating content within containers. It uses var(--interface-secondary-xx-light)
as its background color.
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 |