<a class="card-06" href="#">
<div class="card-06__head">
<div class="card-06__img"><img src="https://picsum.photos/400/200" width="400" height="200" alt="" /></div>
<p class="card-06__date">2020.10.01</p>
</div>
<p class="card-06__category">お知らせ</p>
<h3 class="card-06__title">タイトルが入ります</h3>
<p class="card-06__text">テキストが入ります。テキストが入ります。テキストが入ります。</p>
</a>
a.card-06(href=link)
.card-06__head
.card-06__img
img(src=img, width=width, height=height, alt='')
p.card-06__date #{ date }
p.card-06__category #{ category }
h3.card-06__title #{ title }
p.card-06__text #{ text }
{
"link": "#",
"img": "https://picsum.photos/400/200",
"width": 400,
"height": 200,
"date": "2020.10.01",
"category": "お知らせ",
"title": "タイトルが入ります",
"text": "テキストが入ります。テキストが入ります。テキストが入ります。"
}
$BLOCK_NAME: '.card-06';
// 変数
$color_black: #666;
$color_bg: #f4f3eb;
$color_overlay: rgba(0, 0, 0, 0.1);
$duration_default: 0.5s;
$easing_default: cubic-bezier(0.77, 0, 0.18, 1);
#{ $BLOCK_NAME } {
display: block;
max-width: 360px;
padding: 12px;
color: $color_black;
letter-spacing: 1.5px;
border-radius: 10px;
transition: background-color $duration_default $easing_default;
&:hover {
background: $color_bg;
}
&__head {
position: relative;
padding-right: 20px;
}
&__img {
position: relative;
overflow: hidden;
border-radius: 5px;
&::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
background: $color_overlay;
opacity: 0;
transition: opacity $duration_default $easing_default;
@at-root #{ $BLOCK_NAME }:hover & {
opacity: 1;
}
}
}
&__date {
position: absolute;
top: 0;
right: 0;
font-size: 12px;
line-height: 1;
writing-mode: vertical-rl;
}
&__category {
margin-top: 20px;
font-size: 11px;
color: rgba(102, 102, 102, 0.8);
}
&__title {
margin-top: 4px;
font-size: 18px;
}
&__text {
margin-top: 8px;
font-size: 14px;
}
}