<div class="card-03__wrapper">
<div class="card-03">
<div class="card-03__body">
<div class="card-03__icon"><img src="https://picsum.photos/id/1000/200/200" alt="" /></div>
<p class="card-03__heading">見出しが入ります</p>
<p class="card-03__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>
<div class="card-03__foot">
<div class="card-03__buttons"><a class="card-03__button" href="#"><span>アドオン</span></a><a class="card-03__button" href="#"><span>インテグレーション</span></a></div>
</div>
</div>
</div>
.card-03__wrapper
.card-03
.card-03__body
.card-03__icon
img(src=icon, alt='')
p.card-03__heading #{ heading }
p.card-03__text #{ text }
.card-03__foot
.card-03__buttons
a.card-03__button(href=link)
span アドオン
a.card-03__button(href=link)
span インテグレーション
{
"link": "#",
"icon": "https://picsum.photos/id/1000/200/200",
"heading": "見出しが入ります",
"text": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
}
$BLOCK_NAME: '.card-03';
// 変数
$gray_light: #e7eafa;
#{ $BLOCK_NAME } {
&__wrapper {
padding: 40px 40px 80px;
background: #EFF4F7;
}
display: flex;
flex-direction: column;
width: 300px;
border-radius: 20px;
background: #fff;
box-shadow: 0 6px 0 $gray_light, 15px 30px 68px rgba(156, 160, 185, .56);
overflow: hidden;
&__body {
flex-grow: 1;
padding: 32px;
}
&__icon {
width: 45px;
height: 45px;
border-radius: 50%;
overflow: hidden;
> {
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
&__heading {
font-size: 18px;
font-weight: bold;
margin-top: 12px;
color: rgb(9, 30, 66);
}
&__text {
font-size: 14px;
margin-top: 12px;
color: rgba(9, 30, 66, .8);
}
&__foot {
border-top: 1px solid $gray_light;
}
&__buttons {
display: flex;
align-items: center;
}
&__button {
width: 50%;
padding: 12px;
font-size: 12px;
text-align: center;
transition: all .2s;
& + & {
border-left: 1px solid $gray_light;
}
> span {
position: relative;
display: inline-block;
&::after {
position: absolute;
display: block;
width: 4px;
height: 4px;
background: #F5A623;
border-radius: 50%;
top: -2px;
left: -8px;
content: '';
}
}
&:hover {
background: #456BED;
color: #fff;
}
}
}