Stock Card

Listed

Charizard VSTAR

Crown Zenith: Galarian Gallery

bg-primary #131313 dark

Listed

Charizard VSTAR

Crown Zenith: Galarian Gallery

bg-dark #0e0e0e dark

Listed

Charizard VSTAR

Crown Zenith: Galarian Gallery

bg-raised #1c1b1b dark

Listed

Charizard VSTAR

Crown Zenith: Galarian Gallery

bg-card #2a2a2a dark

Listed

Charizard VSTAR

Crown Zenith: Galarian Gallery

bg-accent #266038 dark

<div class="stock-card">
				<div class="stock-card__image">
					<img src="https://camcom.dev/wp-content/themes/theme-factory/devhub/projects/nerdworks/images/trading-cards-pokemon-stack.jpg" alt="Pokémon TCG Charizard VSTAR card">
					<span class="stock-card__status">Listed</span>
				</div>
				<div class="stock-card__body">
					<h5 class="stock-card__name">Charizard VSTAR</h5>
					<p class="stock-card__set">Crown Zenith: Galarian Gallery</p>
					<div class="stock-card__footer">
						<span class="stock-card__price">$185.00</span>
						<span class="stock-card__identifier">ID: NW-4421</span>
					</div>
				</div>
			</div>

.stock-card {
background-color: #000000;
  border-radius: 12px;
  overflow: hidden;
}

.stock-card__image {
position: relative;
  height: 240px;
  overflow: hidden;
}

.stock-card__image img {
width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.stock-card:hover .stock-card__image img {
transform: scale(1.05);
}

.stock-card__status {
position: absolute;
  top: 20px;
  left: 20px;
  background-color: rgba(38, 96, 56, 0.9);
  color: #F8F9F8;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  border-radius: 4px;
}

.stock-card__body {
padding: 20px;
}

.stock-card__name {
font-weight: 700;
  color: #F8F9F8;
  margin-bottom: 4px;
}

.stock-card__set {
font-size: 14px;
  color: #9AA49A;
  margin-bottom: 20px;
}

.stock-card__footer {
display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid rgba(248, 249, 248, 0.1);
}

.stock-card__price {
font-family: monospace;
  font-weight: 700;
  color: #217E52;
}

.stock-card__identifier {
font-family: monospace;
  font-size: 11px;
  color: #9AA49A;
}

Charizard VSTAR

Charizard VSTAR

Charizard VSTAR

Charizard VSTAR

Charizard VSTAR

Origin