Utility Classes

Card

<div class="card">
  <p>Card Content</p>
</div>

Card Content

Drop Shadow

<div class="drop-shadow">
  <p>Section with Drop Shadow</p>
</div>

Section with Drop Shadow

Icon

<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>

Container

<div class="container">
  <p>I am identical to the <code>&lt;main&gt;</code> <a href="./semantic-elements.html">Semantic Element</a>.</p>
  <p>I have a max-width and stay centered in the page. I also have top, left and right padding.</p>
<div>

I am identical to the <main> Semantic Element.

I have a max-width and stay centered in the page. I also have top, left and right padding.