<ul class="news-list-06">
<li class="news-list-06__item"><a class="news-list-06__link"><span class="news-list-06__date">2021.01.03</span><span class="news-list-06__text">テキストが入ります。テキストが入ります。テキストが入ります。</span></a></li>
<li class="news-list-06__item"><a class="news-list-06__link"><span class="news-list-06__date">2021.01.02</span><span class="news-list-06__text">テキストが入ります。テキストが入ります。テキストが入ります。</span></a></li>
<li class="news-list-06__item"><a class="news-list-06__link"><span class="news-list-06__date">2021.01.01</span><span class="news-list-06__text">テキストが入ります。テキストが入ります。テキストが入ります。</span></a></li>
</ul>
ul.news-list-06
each item in items
li.news-list-06__item
a.news-list-06__link(href=link)
span.news-list-06__date #{ item.date }
span.news-list-06__text #{ item.text }
{
"items": [
{
"link": "#",
"date": "2021.01.03",
"text": "テキストが入ります。テキストが入ります。テキストが入ります。"
},
{
"link": "#",
"date": "2021.01.02",
"text": "テキストが入ります。テキストが入ります。テキストが入ります。"
},
{
"link": "#",
"date": "2021.01.01",
"text": "テキストが入ります。テキストが入ります。テキストが入ります。"
}
]
}
$BLOCK_NAME: '.news-list-06';
// 変数
$color_dash: #e2d2bd;
$color_bg: #fef5e5;
$color_date: #ac916b;
$color_text: #5c4c2c;
#{ $BLOCK_NAME } {
font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
&__item {
padding: 8px 0;
border-bottom: 1px dashed $color_dash;
&:first-child {
border-top: 1px dashed $color_dash;
}
}
&__link {
display: flex;
align-items: center;
padding: 24px 16px;
cursor: pointer;
background: transparent;
border: 1px dashed transparent;
border-radius: 10px;
transition: all 0.4s;
&:hover {
background: $color_bg;
border: 1px dashed $color_dash;
}
}
&__date {
flex-shrink: 0;
width: 90px;
font-size: 14px;
font-weight: 500;
color: $color_date;
}
&__text {
width: 100%;
overflow: hidden;
font-size: 14px;
font-weight: 400;
color: $color_text;
text-overflow: ellipsis;
white-space: nowrap;
}
}