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 $interface-white
to ensure contrast from the background.
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>
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 subcontainer>
<p>Subcontainer</p>
</tk-container>
This pattern is useful in separating content within containers. It uses $interface-midnight--xx-light
as its background color.
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. |