<a class="service-list-04" href="#">
<div class="service-list-04__img"><img src="http://placehold.jp/350x350.png?text=ICON" alt="" /></div>
<div class="service-list-04__body">
<h3 class="service-list-04__title">タイトルが入ります</h3>
<p class="service-list-04__copy">キャッチコピーが入ります。キャッチコピーが入ります。</p>
<p class="service-list-04__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>
</a>
a.service-list-04(href=link)
.service-list-04__img
img(src=img, alt='')
.service-list-04__body
h3.service-list-04__title #{ title }
p.service-list-04__copy #{ copy }
p.service-list-04__text #{ text }
{
"link": "#",
"img": "http://placehold.jp/350x350.png?text=ICON",
"title": "タイトルが入ります",
"copy": "キャッチコピーが入ります。キャッチコピーが入ります。",
"text": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
}
$BLOCK_NAME: '.service-list-04';
// 変数
$color_border: #dce0e3;
$color_gray: #939fa8;
#{ $BLOCK_NAME } {
display: flex;
padding: 35px 0;
border-top: 1px solid $color_border;
&__img {
flex-shrink: 0;
width: 90px;
padding: 8px 12px 0;
}
&__title {
font-family: 'Noto Sans JP', sans-serif;
font-size: 17px;
font-weight: 700;
color: $color_gray;
letter-spacing: 1.4px;
}
&__copy {
margin-top: 4px;
font-family: 'Noto Sans JP', sans-serif;
font-size: 17px;
font-weight: 700;
line-height: 1.6;
letter-spacing: 1.4px;
}
&__text {
margin-top: 12px;
font-size: 13px;
line-height: 1.8;
}
}