<a class="card-09" href="#">
<div class="card-09__head">
<div class="card-09__tag">カード09</div>
<div class="card-09__img"><img src="https://picsum.photos/400/200" width="400" height="200" /></div>
</div>
<div class="card-09__body">
<h3 class="card-09__title">タイトルがはいります</h3>
<p class="card-09__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>
</a>
a.card-09(href=link)
.card-09__head
.card-09__tag #{ tag }
.card-09__img
img(src=img, width=400, height=200)
.card-09__body
h3.card-09__title #{ title }
p.card-09__text #{ text }
{
"link": "#",
"tag": "カード09",
"img": "https://picsum.photos/400/200",
"title": "タイトルがはいります",
"text": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
}
$BLOCK_NAME: '.card-09';
// 変数
$color_primary: #0dcc51;
$color_white: #fff;
$color_black: #222;
$duration_default: 0.3s;
$easing_tag: cubic-bezier(0.5, -2, 0.5, 2);
$easing_img: cubic-bezier(0.5, 0, 0, 1);
#{ $BLOCK_NAME } {
display: block;
max-width: 360px;
font-family: 'Roboto', 'Noto Sans JP', sans-serif;
&__tag {
display: inline-block;
padding: 5px 50px 30px;
font-size: 16px;
font-weight: 900;
color: $color_white;
background-color: $color_primary;
border-radius: 20px 20px 0 0;
transition: transform $duration_default $easing_tag;
@at-root #{ $BLOCK_NAME }:hover & {
transform: translateY(-5px);
}
}
&__img {
margin-top: -30px;
overflow: hidden;
background-color: #eee;
border-radius: 20px;
& > img {
transition: transform $duration_default $easing_img;
@at-root #{ $BLOCK_NAME }:hover & {
transform: scale(1.1);
}
}
}
&__body {
margin-top: 20px;
}
&__title {
margin-bottom: 20px;
font-size: 26px;
font-weight: 900;
color: $color_primary;
}
&__text {
font-size: 14px;
color: $color_black;
}
}