<a class="service-list-02" href="#">
<div class="service-list-02__img"><img src="http://placehold.jp/350x350.png?text=ICON" /></div>
<p class="service-list-02__text">サービス一覧02</p>
</a>
a.service-list-02(href=link)
.service-list-02__img
img(src=img)
p.service-list-02__text #{ text }
{
"link": "#",
"img": "http://placehold.jp/350x350.png?text=ICON",
"text": "サービス一覧02"
}
$BLOCK_NAME: '.service-list-02';
// 変数
$color_white: #fff;
$color_gray: #f4f4f4;
$color_arrow: #faa49b;
$duration_default: 1s;
$easing_default: ease-out;
$shadow_default: 0 0 64px rgba(4, 9, 21, 0.13);
#{ $BLOCK_NAME } {
display: block;
padding: 40px;
text-align: center;
background: $color_gray;
border-radius: 32px;
transition: all $duration_default $easing_default;
&:hover {
background: $color_white;
box-shadow: $shadow_default;
}
&__img {
display: flex;
align-items: center;
width: 104px;
height: 91px;
margin: 0 auto 28px;
& > img {
width: 100%;
}
}
&__text {
position: relative;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size: 18px;
font-weight: 500;
line-height: 1.3;
&::after {
position: absolute;
top: 0;
bottom: 0;
left: 100%;
display: block;
width: 8px;
height: 8px;
margin: auto;
content: '';
border-top: 2px solid $color_arrow;
border-right: 2px solid $color_arrow;
transform: rotate(45deg);
}
}
}