卡片 · Wicked Skunk

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

[hidecontent type="vip1"]

<div class="card">
  <span class="card__title">Subscribe to Premium</span>
  <p class="card__text">Subscribe to unlock new features and if eligible, receive a share of ads revenue.</p>
  <button class="card__button">Subscribe</button>
</div>
<style>
/* From Uiverse.io by Javierrocadev - Source: twitter.com - Tags: twitter, card, white card, round card */
.card {
  width: 350px;
  height: 160px;
  background: #f7f9f9;
  padding: 10px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
}

.card__title {
  font-size: 1.4em;
  font-weight: 800;
}

.card__text {
  font-weight: 500;
}

.card__button {
  cursor: pointer;
  background-color: rgb(15, 20, 25);
  color: #f7f9f9;
  font-size: 1.15em;
  border: none;
  padding: 5px 15px;
  border-radius: 15px;
}

.card__button:hover {
  background-color: #272C30;
}
</style>

[/hidecontent]