Info Components - Cards

<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>

<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>

<article class="output-container-clean padding-2rem">
  <section class="card-sierra">
    <div class="card-sierra-img">
      <img src="portrait.jpg" alt="">
    </div>
    <span class="card-sierra-text">
      <div class="heading">
        <span>Specific Heading</span>
      </div>
      <div class="card-sierra-links">
        <a href="" class="card-sierra-link1">
          <i class="fa-solid fa-comment-sms"></i>
          Link1
        </a>
        <a href="" class="card-sierra-link2">
          <i class="ph-duotone ph-envelope-open"></i>
          Link2</a>
        <a href="" class="card-sierra-link3">
          <i class="ph ph-telegram-logo"></i>
          Link3
        </a>
      </div>
      <hr>
      <section class="card-sierra-subsection">
        <div class="card-sierra-subheading">
          Subheading Here
        </div>
        <div class="content">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </div>
        <div class="content">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </div>
      </section>
    </span>
    <div class="card-sierra-details">
      <div class="card-sierra-details-heading">
        Heading goes here
      </div>
      <div class="card-sierra-details-content">
        <div class="card-sierra-details-button-group">
          <div class="card-sierra-details-button-green">
            <i class="ph-bold ph-chat-centered-text"></i>
          </div>
          <div class="card-sierra-details-button-green-title">Message</div>
        </div>
        <div class="card-sierra-details-button-group">
          <div class="card-sierra-details-button-green">
            <i class="fa-solid fa-phone"></i>
          </div>
          <div class="card-sierra-details-button-green-title">Contact</div>
        </div>
        <div class="card-sierra-details-button-group">
          <div class="card-sierra-details-button-red">
            <i class="fa-solid fa-xmark"></i>
          </div>
          <div class="card-sierra-details-button-red-title">Cancel</div>
        </div>
      </div>
    </div>
  </section>
</article>