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="#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="#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="#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="#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>