<div class="news-list-05__wrapper">
<h3 class="news-list-05__heading"><span>T<br />O<br />P<br />I<br />C<br />S</span></h3>
<ul class="news-list-05">
<li><a class="news-list-05__item" href="#"><span class="news-list-05__date">2021.01.01</span><span class="news-list-05__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</span></a></li>
<li><a class="news-list-05__item" href="#"><span class="news-list-05__date">2021.01.02</span><span class="news-list-05__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</span></a></li>
<li><a class="news-list-05__item" href="#"><span class="news-list-05__date">2021.01.03</span><span class="news-list-05__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</span></a></li>
</ul>
</div>
.news-list-05__wrapper
h3.news-list-05__heading
span T#[br]O#[br]P#[br]I#[br]C#[br]S
ul.news-list-05
each item in items
li
a.news-list-05__item(href=item.link)
span.news-list-05__date #{ item.date }
span.news-list-05__text #{ item.text }
{
"items": [
{
"link": "#",
"date": "2021.01.01",
"text": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
},
{
"link": "#",
"date": "2021.01.02",
"text": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
},
{
"link": "#",
"date": "2021.01.03",
"text": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
}
]
}
$BLOCK_NAME: '.news-list-05';
// 変数
$color_primary: #00a799;
$color_secondary: #2a706b;
$color_border: #f2f2f2;
$color_white: #fff;
$duration_default: 0.3s;
#{ $BLOCK_NAME } {
&__wrapper {
@include Mq(md) {
display: flex;
}
}
&__heading {
padding-bottom: 12px;
font-family: 'Metrophobic', sans-serif;
border-bottom: 1px solid $color_border;
@include Mq(md) {
display: flex;
align-items: center;
justify-content: center;
padding: 0 40px 0 0;
font-size: 11px;
line-height: 1.6;
text-align: center;
border-right: 1px solid $color_border;
border-bottom: none;
}
br {
display: none;
@include Mq(md) {
display: initial;
}
}
}
padding-top: 12px;
@include Mq(md) {
padding: 4px 0 4px 12px;
}
&__item {
display: flex;
flex-direction: column;
align-items: baseline;
margin-top: 12px;
font-size: 13px;
font-weight: 700;
line-height: 1.85;
color: $color_secondary;
letter-spacing: 0.05em;
@include Mq(md) {
flex-direction: row;
}
@at-root #{ $BLOCK_NAME } > li:first-child & {
margin-top: 0;
}
}
&__date {
font-family: 'Metrophobic', sans-serif;
font-weight: normal;
color: $color_primary;
transition: all $duration_default;
@include Mq(md) {
flex-shrink: 0;
width: 115px;
padding: 0 1em;
margin-right: 40px;
font-weight: bold;
line-height: 2.1;
text-align: center;
border-radius: 20px;
@at-root #{ $BLOCK_NAME }__item:hover & {
color: $color_white;
background: $color_primary;
}
}
}
&__text {
transition: color $duration_default;
@at-root #{ $BLOCK_NAME }__item:hover & {
color: $color_primary;
}
}
}