Elements logo

Cards

Examples of building card components

Elements doesn’t include pre-designed card components out of the box, but they’re easy to build using existing utilities.

Here are a few examples showing how you can create a consistent yet flexible card components.

Skill Card

Beginner

Quantum principles

Understand the state of the quantum computing industry today, and be introduced to the foundational terminology of quantum computing - the qubit, superposition and entanglement.

  • 5 topics
  • 40 min
Beginner

Quantum principles

Understand the state of the quantum computing industry today, and be introduced to the foundational terminology of quantum computing - the qubit, superposition and entanglement.

  • 5 topics
  • 40 min
<div class="relative">
  <div class="bg-white rounded-lg shadow">
    <div class="flex py-8 px-7">
      <span class="ml-auto bg-blue-300 px-3 text-sm leading-xs text-blue-800 shadow-sm rounded-full">Beginner</span>
    </div>
    <div class="px-7">
      <h4 class="text-2xl text-gray-800 leading-xl mb-2">Quantum principles</h4>
      <p class="text-gray-700">Understand the state of the quantum computing industry today, and be introduced to the foundational terminology of quantum computing - the qubit, superposition and entanglement.</p>
    </div>
    <footer class="py-6 px-7">
      <ul class="list-none p-0 m-0 text-xs text-gray-600">
        <li class="inline-flex inline-sm"><svg class="icon icon--format-list-bulleted inline-sm icon-sm" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="/assets/img/sprite.svg#icon-format-list-bulleted"></use></svg> 5 topics</li>
        <li class="inline-flex"><svg class="icon icon--clock-outline inline-sm icon-sm" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="/assets/img/sprite.svg#icon-clock-outline"></use></svg> 40 min</li>
      </ul>
    </footer>
  </div>
  <span class="block h-4 mx-4 bg-white rounded-b-lg shadow opacity-50"></span>
  <span class="block h-4 mx-8 bg-white rounded-b-lg shadow opacity-30"></span>
</div>

Using Animation

Beginner

Quantum principles

Understand the state of the quantum computing industry today, and be introduced to the foundational terminology of quantum computing - the qubit, superposition and entanglement.

  • 5 topics
  • 40 min
<div class="relative">
  <div class="bg-secondary rounded-lg shadow-dark">
    <div class="flex py-8 px-7">
      <span class="ml-auto bg-blue-300 px-3 text-sm leading-xs text-blue-800 shadow-sm rounded-full">Beginner</span>
    </div>
    <div class="px-7">
      <h4 class="text-2xl text-gray-200 leading-xl mb-2">Quantum principles</h4>
      <p class="text-gray-200">Understand the state of the quantum computing industry today, and be introduced to the foundational terminology of quantum computing - the qubit, superposition and entanglement.</p>
    </div>
    <footer class="py-6 px-7">
      <ul class="list-none p-0 m-0 text-xs text-gray-600">
        <li class="inline-flex items-center inline-sm"><svg class="icon icon--format-list-bulleted inline-sm icon-sm" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="/assets/img/sprite.svg#icon-format-list-bulleted"></use></svg> 5 topics</li>
        <li class="inline-flex items-center"><svg class="icon icon--clock-outline inline-sm icon-sm" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="/assets/img/sprite.svg#icon-clock-outline"></use></svg> 40 min</li>
      </ul>
    </footer>
  </div>
  <span class="block h-4 mx-4 bg-secondary rounded-b-lg shadow opacity-50"></span>
  <span class="block h-4 mx-8 bg-secondary rounded-b-lg shadow opacity-30"></span>
</div>