<a class="card-02" href="#">
<p class="card-02__tag">タグが入ります</p>
<p class="card-02__icon"><img src="http://placehold.jp/350x350.png?text=ICON" width="350" height="350" alt="" /></p>
<p class="card-02__heading">見出しが入ります</p>
<p class="card-02__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
<div class="card-02__button"></div>
</a>
a.card-02(href=link)
p.card-02__tag #{ tag }
p.card-02__icon
img(src=img, width=width, height=height alt='')
p.card-02__heading #{ heading }
p.card-02__text #{ text }
.card-02__button
{
"link": "#",
"tag": "タグが入ります",
"img": "http://placehold.jp/350x350.png?text=ICON",
"width": 350,
"height": 350,
"heading": "見出しが入ります",
"text": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
}
$BLOCK_NAME: '.card-02';
// 変数
$color_primary: #dd2e1e;
$color_secondary: #b32619;
$color_white: #fff;
$transition_button: 0.4s;
$transition_arrow: 0.3s;
$easing_button: cubic-bezier(0.68, -0.55, 0.265, 1.55);
#{ $BLOCK_NAME } {
position: relative;
display: block;
max-width: 360px;
padding: 35px 40px 60px 40px;
text-align: center;
&__tag {
display: inline-block;
padding: 8px;
font-size: 13px;
font-weight: bold;
color: $color_white;
letter-spacing: 0.18em;
background: $color_secondary;
border-radius: 2px;
}
&__icon {
width: 80px;
height: 80px;
margin: 25px auto 30px;
}
&__heading {
padding-bottom: 20px;
font-size: 22px;
font-weight: bold;
color: $color_primary;
}
&__text {
font-size: 13px;
line-height: 2;
letter-spacing: 0.02em;
}
&__button {
position: absolute;
right: 0;
bottom: 0;
width: 90px;
height: 90px;
overflow: hidden;
&::before {
display: block;
width: 100%;
height: 100%;
content: '';
background: $color_primary;
border-radius: 50%;
transition: all $transition_button $easing_button;
transform: translate(50%, 50%) scale(0.8);
}
&::after {
position: absolute;
right: 8px;
bottom: 8px;
display: block;
width: 8px;
height: 8px;
color: $color_white;
content: '';
border-top: 2px solid;
border-right: 2px solid;
transition: all $transition_arrow ease;
transform: rotate(45deg);
}
}
&:hover &__button {
&::before {
transform: translate(50%, 50%) scale(1.3);
transform-origin: 70% 70%;
}
&::after {
transform: rotate(45deg) translate(-150%, 20%) scale(1.2);
}
}
}