Normal card

Cards must always be inside a card container. If you’re making multiple cards, just add all the cards inside of the container.

<section class="card-container">
  <div class="card">
    <div class="avatar">
      <img src="URL/PATH">
    </div>
    <h1 class="title">Username</h1>
    <p class="description">Text under username</p>
    <div class="footer">
      <a href="#">Website</a>
      <a href="#">Website 2</a>
    </div>
  </div>

  <div class="card">...
</section>

Preview

Username

Text under username

Username

Text under username

Worker card

Have an image card on your website to display something with more style.

You can replace <span> with whatever text type you want.

<section class="workcard-container">
  <div class="card">
    <img src="https://i.alexflipnote.xyz/7c4714.png">
    <div class="overlay">
      <span class="text">Hello world<br>Have a nice day</span>
    </div>
  </div>
  <!-- and more cards if wanted -->
</section>

NOTE: If you want to have a clickable card:

<!-- Target -->
<div class="overlay"></div>

<!-- Replace to -->
<a href="LINK HERE" class="overlay"></a>

Preview

Hello world

Hello world

Hello world
Have a nice day