3+ Card Components - Vanilla CSS

Cards are versatile user interface elements used on websites to present information or content in a visually appealing and organized manner. They typically consist of a container that holds various types of content, such as text, images, buttons, or other elements. Cards help to break up content into digestible chunks, making it easier for users to scan and navigate through. In this collection, you'll find a variety of designs for card components that you can easily incorporate into your website's layout. Whether you need basic cards or more visually engaging styles, these components are designed to enhance the presentation of content and provide an engaging browsing experience for your website visitors.

Flip Cards

Elevate your website's visual appeal with engaging flip cards crafted using HTML and CSS. Learn how to add interactivity and dynamism to your content presentation and capture user attention.

Author: Joe

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />

<div class="cards">
  <label id="summary">
    <input type="checkbox" />
    <div class="card">
      <div class="front">
        <header>
          <h2>Summary</h2>
          <span class="material-symbols-outlined"> more_vert </span>
        </header>
        <var>21</var>
        <h3>Due Tasks</h3>
        <h4>Completed: 13</h4>
      </div>
      <div class="back">
        <header>
          <h2>Summary</h2>
          <span class="material-symbols-outlined"> close </span>
        </header>
        <p>More Information</p>
      </div>
    </div>
  </label>
  <label id="overdue">
    <input type="checkbox" />
    <div class="card">
      <div class="front">
        <header>
          <h2>Overdue</h2>
          <span class="material-symbols-outlined"> more_vert </span>
        </header>
        <var>17</var>
        <h3>Projects</h3>
        <h4>Yesterday: 9</h4>
      </div>
      <div class="back">
        <header>
          <h2>Overdue</h2>
          <span class="material-symbols-outlined"> close </span>
        </header>
        <p>More Information</p>
      </div>
    </div>
  </label>
  <label id="features">
    <input type="checkbox" />
    <div class="card">
      <div class="front">
        <header>
          <h2>Features</h2>
          <span class="material-symbols-outlined"> more_vert </span>
        </header>
        <var>38</var>
        <h3>Proposals</h3>
        <h4>Implemented: 6</h4>
      </div>
      <div class="back">
        <header>
          <h2>Features</h2>
          <span class="material-symbols-outlined"> close </span>
        </header>
        <p>More Information</p>
      </div>
    </div>
  </label>
</div>

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  color: #f7f7f7;
  background: #121212;
  font-family: "Euclid Circular A", "Poppins";
}

h2,
h3,
h4 {
  margin: 0;
  font-weight: 500;
}

.cards {
  display: flex;
  gap: 30px;
  margin: 0 10px;
}

.card {
  position: relative;
  perspective: 1000px;
  width: 300px;
  height: 300px;
}

.card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  margin-bottom: 26px;
}

.card header h2 {
  font-size: 20px;
}

.card .front,
.card .back {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backface-visibility: hidden;
  background: #1e1e1e;
  border-radius: 10px;
  padding: 36px 36px 44px 44px;
  transition: 0.6s;
  cursor: pointer;
}

.back {
  transform: rotateY(180deg);
}

input {
  position: absolute;
  scale: 0;
}

input:checked ~ .card .back {
  transform: rotateY(0);
}

input:checked ~ .card .front {
  transform: rotateY(-180deg);
}

.card var {
  font-style: normal;
  font-size: 80px;
  line-height: 1;
}

.card h3 {
  margin: 0 0 30px;
  font-weight: 500;
}

#summary :is(var, h3) {
  color: #3b82f6;
}

#overdue :is(var, h3) {
  color: #e56363;
}

#features :is(var, h3) {
  color: #25b697;
}

.card :is(h4, p) {
  opacity: 0.6;
  font-size: 20px;
}

.card p {
  margin-top: 76px;
}

```
No need of JavaScript
```

Pricing Card

Enhance your website's pricing presentation with pricing cards created using HTML and CSS. Learn how to showcase your pricing plans in an informative manner to attract and engage customers.

Author: Joe

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />


<div class="background"></div>
  <div class="grid">
    <div>
      <article class="card">
        <h2>Free</h2>
        <var><abbr>$</abbr>0<small>/MO</small></var>
        <ul>
          <li>
            <svg width="100" height="100">
              <use xlink:href="#myPath" />
          </svg>
            <p>10 user requests</p>
          </li>
          <li>
            <svg width="100" height="100">
              <use xlink:href="#myPath" />
          </svg>
            <p>3 design accounts</p>
          </li>
          <li>
            <svg width="100" height="100">
              <use xlink:href="#myPath" />
          </svg>
            <p>24/7 support</p>
          </li>
        </ul>
        <button>Choose Plan</button>
      </article>
    </div>
    <div class="primary">
      <article class="card">
        <h2>Elite</h2>
        <var><abbr>$</abbr>99<small>/MO</small></var>
        <ul>
          <li>
            <svg width="100" height="100">
              <use xlink:href="#myPath" />
          </svg>
            <p>10 user requests</p>
          </li>
          <li>
            <svg width="100" height="100">
              <use xlink:href="#myPath" />
          </svg>
            <p>3 design accounts</p>
          </li>
          <li>
            <svg width="100" height="100">
              <use xlink:href="#myPath" />
          </svg>
            <p>Email support</p>
          </li>
          <li>
            <svg width="100" height="100">
              <use xlink:href="#myPath" />
          </svg>
            <p>100 deployments</p>
          </li>
          <li>
            <svg width="100" height="100">
              <use xlink:href="#myPath" />
          </svg>
            <p>24/7 support</p>
          </li>
        </ul>
        <button class="btn-primary">Choose Plan</button>
      </article>
    </div>
    <div>
      <article class="card">
        <h2>Pro</h2>
        <var><abbr>$</abbr>49<small>/MO</small></var>
        <ul>
          <li>
            <svg width="100" height="100">
              <use xlink:href="#myPath" />
          </svg>
            <p>10 user requests</p>
          </li>
          <li>
            <svg width="100" height="100">
              <use xlink:href="#myPath" />
          </svg>
            <p>3 design accounts</p>
          </li>
          <li>
            <svg width="100" height="100">
              <use xlink:href="#myPath" />
          </svg>
            <p>Email support</p>
          </li>
        </ul>
        <button>Choose Plan</button>
      </article>
    </div>
  </div>

  <svg style="display: none;">
    <symbol viewBox="0 0 492 351" fill="none" id="myPath">
        <g clip-path="url(#clip0_84_341)">
            <path d="M34 175.365L175.42 316.785L458.233 33.9417" stroke="#F7F7F7" stroke-width="66.6667" stroke-linecap="round" stroke-linejoin="round"/>
        </g>
        <defs>
            <clipPath id="clip0_84_341">
                <rect width="492" height="350" fill="white" transform="translate(0 0.364502)"/>
            </clipPath>
        </defs>
    </symbol>
</svg>

* {
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  padding: 60px 15%;
  margin: 0;
  color: #f7f7f7;
  background: #121212;
  font-family: "Poppins";
}

.background {
  position: fixed;
  z-index: -1;
  top: -33vh;
  left: -100px;
  right: -100px;
  height: 60vmax;
  rotate: -4deg;
  background: #4f97ff;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  padding: 50px 50px 70px;
  background: #1e1e1e;
  font-size: 125%;
}

.primary {
  order: -1;
}

.primary .card var {
  font-size: 60px;
}

.grid {
  display: grid;
  place-items: center;
  gap: 20px;
  width: 100%;
}

.grid > div {
  width: 100%;
}

@media (width >= 768px) {
  body {
    height: 100vh;
    padding: 60px 20px;
  }

  .grid {
    grid-template-rows: 1fr 1fr;
    grid-template-columns: repeat(2, 1fr);
  }

  .grid > div {
    height: 100%;
  }

  .primary {
    order: -1;
    grid-column: 1 / 3;
  }

  .primary .card {
    max-width: 45vw;
    margin: 0 auto;
  }

  .background {
    top: -25vh;
  }
}

@media (width >= 980px) {
  .grid {
    grid-template-rows: 1fr;
    grid-template-columns: repeat(3, 1fr);
  }

  .grid > div {
    height: auto;
  }

  .primary {
    order: 0;
    grid-column: auto;
  }

  .background {
    top: -100px;
  }
}

p,
h2 {
  margin: 0;
}

.card var {
  color: #4087ed;
  font-weight: 400;
  font-size: 50px;
  font-style: normal;
  margin-bottom: 10px;
}

.card var small {
  font-size: 16px;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
}

ul li {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
}

ul li svg {
  width: 16px;
  height: auto;
}

.card button {
  display: grid;
  place-items: center;
  min-width: 200px;
  padding: 14px 0;
  border-radius: 6px;
  border: 2px solid #4087ed;
  background: transparent;
  color: #4087ed;
  font-size: inherit;
  font-family: inherit;
}

.card button.btn-primary {
  background: #4087ed;
  color: #f7f7f7;
}

```
No need of JavaScript
```

Profile Card

Elevate your website's aesthetics using HTML and CSS with a beautifully designed profile card. Learn how to showcase user information in an elegant and visually appealing format.

Author: Joe

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />


<div class="card">
  <img src="https://github.com/frontend-joe/css-components/blob/main/cards/card-1/image.jpg?raw=true" />
  <div>
    <h2>Kaye Morris</h2>
    <h3>UX Developer</h3>
    <p>
      Empowering users through captivating interfaces, turning ideas into
      pixel-perfect realities.
    </p>
    <button>Follow Account</button>
  </div>
</div>

* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  height: 100vh;
  background: #221d2d;
  color: #fdfcfd;
  font-family: "Poppins";
}

.card {
  display: flex;
  align-items: center;
  width: 75vw;
  max-width: 650px;
  padding: 50px 30px 50px 20px;
  background: #121017;
  border-radius: 24px;
}

.card img {
  max-width: 280px;
  width: 35vw;
  height: 300px;
  object-fit: cover;
  margin-left: -60px;
  margin-right: 30px;
  border-radius: inherit;
  box-shadow: 0 60px 40px rgb(0 0 0 / 8%);
}

.card h2 {
  font-size: 26px;
  font-weight: 400;
  margin-top: 0;
  margin-right: 30px;
  margin-bottom: 10px;
}

.card h3 {
  font-size: 16px;
  font-weight: 400;
  margin: 0;
  opacity: 0.75;
}

.card p {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 30px;
  opacity: 0.5;
}

.card button {
  border: 1px solid #f8f8f8;
  background: transparent;
  color: #f8f8f8;
  font-family: inherit;
  padding: 16px 26px;
  font-size: 16px;
  border-radius: 40px;
}

@media (width <= 600px) {
  .card {
    margin: 0 40px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 60px;
    width: 100%;
    text-align: center;
    flex-direction: column;
  }

  .card h2 {
    margin-right: 0;
    font-size: 26px;
  }

  .card img {
    margin: -100px 0 30px 0;
    width: 100%;
    max-width: 1000px;
    height: 250px;
  }

  .card p {
    max-width: 360px;
  }
}

@media (width <= 440px) {
  .card img {
    height: 45vw;
    width: 45vw;
    border-radius: 50%;
    margin: -140px 0 30px 0;
  }
}

```
No need of JavaScript
```

Simple Card

Elevate your website's visual appeal with our versatile HTML and CSS card components. Easily integrate customizable cards into your UI design to showcase content beautifully.

Author: Admin

Preview
Code

<div class="card">
<img src="https://via.placeholder.com/300" alt="Placeholder Image">
<div class="card-content">
  <h3>Card Title</h3>
  <p>This is a sample card. You can put any content you want here.</p>
  <a href="#">Read More</a>
</div>

.card {
  width: 300px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: 1px solid #ccc;
}

.card img {
  width: 100%;
  height: auto;
  display: block;
}

.card-content {
  padding: 20px;
}

.card h3 {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.card p {
  margin: 10px 0;
  color: #666;
}

.card a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.card a:hover {
  background-color: #0056b3;
}

```
No need of JavaScript
```