Containers

<tk-container>
  <p>Default container</p>
</tk-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 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>

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