卡片 · Sweet Seahorse

类型：组件　·　分类：卡片　·　收录：2026-09-19　·　源码：会员可见

[hidecontent type="vip1"]

<div class="card">
  <div class="card-border-top">
  </div>
  <div class="img">
  </div>
  <span> Person</span>
  <p class="job"> Job Title</p>
  <button> Click
  </button>
</div>
<style>
/* From Uiverse.io by Alaner-xs - Tags: gradient, card */
.card {
  width: 190px;
  height: 254px;
  background-image: linear-gradient(144deg,#8608b4, #492fed 60%,#bd6fda);
  border: none;
  border-radius: 10px;
  padding-top: 10px;
  position: relative;
  margin: auto;
  font-family: inherit;
}

.card span {
  font-weight: 600;
  color: white;
  text-align: center;
  display: block;
  padding-top: 10px;
  font-size: 1.3em;
}

.card .job {
  font-weight: 400;
  color: white;
  display: block;
  text-align: center;
  padding-top: 5px;
  font-size: 1em;
}

.card .img {
  width: 70px;
  height: 70px;
  background: #e8e8e8;
  border-radius: 100%;
  margin: auto;
  margin-top: 20px;
}

.card button {
  padding: 8px 25px;
  display: block;
  margin: auto;
  border-radius: 8px;
  border: none;
  margin-top: 30px;
  background: #e8e8e8;
  color: #111111;
  font-weight: 600;
}

.card button:hover {
  background: #212121;
  color: #ffffff;
}
</style>

[/hidecontent]