<a class="card" href="">
		<div class="card__img">
			<img src="https://haniwaman.com/parts/wp-content/uploads/2018/02/cat.jpg">
		</div>
		<div class="card__body">
			<time class="card__time">2020.11.30</time>
			<h2 class="card__title">タイトル</h2>
			<div class="card__excerpt">抜粋が入ります。抜粋が入ります。抜粋が入ります。抜粋が入ります。</div>
		</div>
</a>
/* 例) a でも div でも同様に機能すること */
.card {
	display: inline-block;
	text-decoration: none;
	border: 1px solid #ddd;
  color: inherit;
}

/* 例) div でも figure でも同様に機能すること */
.card__img {
	text-align: center;
}

.card__img img {
	vertical-align: bottom;
  max-width: 100%;
  height: auto;
}

.card__body {
	padding: 16px 12px;
}

/* 例) time でも div でも同様に機能すること */
.card__time {
	font-size: 13px;
  display: inline-block;
}

/* 例) h2 でも h3 でも div でも同様に機能すること */
.card__title {
	font-size: 18px;
  font-weight: 700;
	margin-top: 4px;
}

.card__excerpt {
	font-size: 14px;
	margin-top: 4px;
  line-height: 1.6;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.