Press "Enter" to skip to content

How To Create a CSS Stacked Card Template | Card.css

Cards can be a convenient way to display content that includes different types of objects. Card.css is a CSS library for creating modern, responsive, stacked cards for profiles, products, articles, and more.

stacked cards css, card stack css, css card stack animation, css card hover effects, dashboard card design css, html css card layout, css cards, material design card css

How to make use of it:

1. Download the package and load the card.css within the doc.

<link rel=”stylesheet” href=”card.css” />

2. Create stacked cards on the web page.

<section class="card-list">
  <article class="card">
    <header class="card-header">
      <p>Sep 11th 2020</p>
      <h2>Never forget</h2>
    </header>
    <div class="card-author">
      <a class="author-avatar" href="#">
      // Add Image Here
      </a>
      <svg class="half-circle" viewBox="0 0 106 57">
        <path d="M102 4c0 27.1-21.9 49-49 49S4 31.1 4 4"></path>
      </svg>
      <div class="author-name">
        <div class="author-name-prefix">Author</div>
        Jeff Delaney
      </div>
    </div>
    <div class="tags">
      <a href="#">html</a>
      <a href="#">css</a>
      <a href="#">web-dev</a>
    </div>
  </article>
  <article class="card">
    <header class="card-header">
      <p>Sep 11th 2020</p>
      <h2>Card Tricks are fun!</h2>
    </header>
    <div class="card-author">
      <a class="author-avatar" href="#">
      // Add Image Here
      </a>
      <svg class="half-circle" viewBox="0 0 106 57">
        <path d="M102 4c0 27.1-21.9 49-49 49S4 31.1 4 4"></path>
      </svg>
      <div class="author-name">
        <div class="author-name-prefix">Pirate</div>
        Zheng Zhilong
      </div>
    </div>
    <div class="tags">
      <a href="#">html</a>
      <a href="#">css</a>
    </div>
  </article>
  <article class="card">
    <header class="card-header">
      <p>Sep 11th 2020</p>
      <h2>Card Tricks are fun!</h2>
    </header>
    <div class="card-author">
      <a class="author-avatar" href="#">
      // Add Image Here
      </a>
      <svg class="half-circle" viewBox="0 0 106 57">
        <path d="M102 4c0 27.1-21.9 49-49 49S4 31.1 4 4"></path>
      </svg>
      <div class="author-name">
        <div class="author-name-prefix">Pirate</div>
        Francis Drake
      </div>
    </div>
    <div class="tags">
      <a href="#">html</a>
      <a href="#">css</a>
    </div>
  </article>
  <article class="card">
    <header class="card-header">
      <p>Sep 11th 2020</p>
      <h2>Card Tricks are fun!</h2>
    </header>
    <div class="card-author">
      <a class="author-avatar" href="#">
      // Add Image Here
      </a>
      <svg class="half-circle" viewBox="0 0 106 57">
        <path d="M102 4c0 27.1-21.9 49-49 49S4 31.1 4 4"></path>
      </svg>
      <div class="author-name">
        <div class="author-name-prefix">Pirate</div>
        Edward Teach
      </div>
    </div>
    <div class="tags">
      <a href="#">html</a>
      <a href="#">css</a>
    </div>
  </article>
  <article class="card">
    <header class="card-header">
      <p>Sep 11th 2020</p>
      <h2>Card Tricks are fun!</h2>
    </header>
    <div class="card-author">
      <a class="author-avatar" href="#">
      // Add Image Here
      </a>
      <svg class="half-circle" viewBox="0 0 106 57">
        <path d="M102 4c0 27.1-21.9 49-49 49S4 31.1 4 4"></path>
      </svg>
      <div class="author-name">
        <div class="author-name-prefix">Pirate</div>
        William Kidd
      </div>
    </div>
    <div class="tags">
      <a href="#">html</a>
      <a href="#">css</a>
    </div>
  </article>
  <article class="card">
    <header class="card-header">
      <p>Sep 11th 2020</p>
      <h2>Card Tricks are fun!</h2>
    </header>
    <div class="card-author">
      <a class="author-avatar" href="#">
      // Add Image Here
      </a>
      <svg class="half-circle" viewBox="0 0 106 57">
        <path d="M102 4c0 27.1-21.9 49-49 49S4 31.1 4 4"></path>
      </svg>
      <div class="author-name">
        <div class="author-name-prefix">Pirate</div>
        William Kidd
      </div>
    </div>
    <div class="tags">
      <a href="#">html</a>
      <a href="#">css</a>
    </div>
  </article>
  <article class="card">
    <header class="card-header">
      <p>Sep 11th 2020</p>
      <h2>Card Tricks are fun!</h2>
    </header>
    <div class="card-author">
      <a class="author-avatar" href="#">
      // Add Image Here
      </a>
      <svg class="half-circle" viewBox="0 0 106 57">
        <path d="M102 4c0 27.1-21.9 49-49 49S4 31.1 4 4"></path>
      </svg>
      <div class="author-name">
        <div class="author-name-prefix">Pirate</div>
        William Kidd
      </div>
    </div>
    <div class="tags">
      <a href="#">html</a>
      <a href="#">css</a>
    </div>
  </article>
</section>

CSS Only Stacked Card Template, Stacked Card List Demo, Stacked Card List Plugin/Github


See Demo And Download

Official Website(fireship-io): Click Here

This superior jQuery/javascript plugin is developed by fireship-io. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.