<div class="cta ">
<div class="cta__container">
<h3 class="h2 cta__text">
Got a project you dream of realizing?
<a href="#" class="button button--text cta__button">
<span class="button__inner">
<span class="button__text">Get in touch</span>
</span>
</a>
<a href="#" class="cta__link"><svg class="icon cta__link-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-top-right-long-54"></use>
</svg>
<span class="cta__link-inner">Get in touch</span></a>
</h3>
</div>
</div>
<div class="cta {{ modifier }} {{ class }}">
<div class="cta__container">
<h3 class="h2 cta__text">
{% if data.text %}
{{ data.text }}
{% endif %}
{% if data.button %}
{% include '@button' with {modifier:'button--text', class:'cta__button', data: data.button} %}
<a href="{{ data.button.link }}" class="cta__link">{% include '@icon' with {class: 'cta__link-icon', modifier: '', name: 'arrow-top-right-long-54'} %}<span class="cta__link-inner">{{ data.button.text }}</span></a>
{% endif %}
</h3>
</div>
</div>
{
"language": "en-US",
"data": {
"text": "Got a project you dream of realizing?",
"button": {
"text": "Get in touch",
"link": "#"
}
}
}
.cta__container {
position: relative;
}
.cta__text {
color: $color-text-03;
width: 100%;
@include bp(sm-min) {
max-width: 705px;
margin-right: 50px;
}
}
.cta__link-inner {
@include visually-hidden;
}
.cta__link-icon {
color: $color-text-03;
display: none;
position: absolute;
right: 0;
top: 43px;
transition-timing-function: $transition-easing-out;
transition-duration: $transition-duration;
@include bp(md-min) {
display: inline-block;
font-size: $font-size-h2-lg;
}
.cta__button:hover + .cta__link &,
&:hover {
transform: rotate(45deg);
transition-timing-function: $transition-easing-in;
}
}
.cta__button {
color: $color-text-03;
font-size: $font-size-h2-xs;
line-height: inherit;
vertical-align: top;
@include bp(sm-min) {
font-size: $font-size-h2-lg;
}
}
import './cta.scss';