Info Components - Cards

Cards to display information in an elegant way

Cards - Informational Display

Cards - with clickable anchor element

Implementation Code and the output

<a class="button-card" href="#">
  <span class="button-card-text">
    
    <div class="heading">
      <span>Specific Heading</span>
    </div>
    
    <span class="content">Lorem ipsum dolor sit
      amet consectetur adipisicing.
    </span>
    
    <p class="button-card-more">
      <b>Click for more</b>
    </p>

  </span>
</a>

Copy

Output Sample

Specific Heading

Lorem ipsum dolor sit amet consectetur adipisicing.

Click for more

Cards - with closable window

Implementation Code and the output

<div class="button-card">
  <span class="button-card-text">

    <div class="heading">
      <span>Specific Heading</span>
      <i class="fa-regular fa-circle-xmark button-close"></i>
    </div>
  
    <span class="content">Lorem ipsum dolor sit
      amet consectetur adipisicing elit.dolor sit
      amet consectetur adipisicing elit.
    </span>
  
  </span>
</div>

Copy

Output Sample

Specific Heading

Lorem ipsum dolor sit amet consectetur adipisicing elit.dolor sit amet consectetur adipisicing elit.

Info Components - Code Block

Data Components - Tables