<a class="card-07" href="#">
<div class="card-07__img"><img src="https://picsum.photos/400/200" width="400" height="200" alt="" /></div>
<div class="card-07__body">
<p class="card-07__date">2021.01.01</p>
<h3 class="card-07__title">タイトルが入ります。タイトルが入ります。</h3><svg class="card-07__arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.95 4.93">
<path d="M0 4.43h20.17"></path>
<path d="M14.63 0v4.88h7.32L14.63 0z"></path>
</svg>
</div>
</a>
a.card-07(href=link)
.card-07__img
img(src=img, width=width, height=height, alt='')
.card-07__body
p.card-07__date #{ date }
h3.card-07__title #{ title }
svg.card-07__arrow(xmlns='http://www.w3.org/2000/svg', viewBox='0 0 21.95 4.93')
path(d='M0 4.43h20.17')
path(d='M14.63 0v4.88h7.32L14.63 0z')
{
"link": "#",
"img": "https://picsum.photos/400/200",
"width": 400,
"height": 200,
"date": "2021.01.01",
"title": "タイトルが入ります。タイトルが入ります。"
}
$BLOCK_NAME: '.card-07';
// 変数
$color_primary: #c3a348;
$color_white: #fff;
$color_black: #111;
#{ $BLOCK_NAME } {
position: relative;
display: block;
max-width: 360px;
letter-spacing: 1.8px;
background: $color_white;
&::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
content: '';
background: $color_primary;
transition: transform 0.3s ease;
}
&:hover::before {
transform: translate(5px, 5px);
}
&__body {
padding: 30px 30px 10px;
}
&__date {
font-family: 'Crimson Text', serif;
font-size: 15px;
line-height: 2;
}
&__title {
font-family: '游明朝', YuMincho, serif;
font-size: 18px;
line-height: 1.8;
}
&__arrow {
display: block;
width: 20px;
margin: 30px 0 15px auto;
& > path:nth-child(1) {
fill: none;
stroke: $color_black;
stroke-miterlimit: 10;
}
& > path:nth-child(2) {
fill: $color_black;
}
}
}