<h3 class="linked-title linked-title--h3">
<a href="#" class="linked-title__link">
<span class="linked-title__link-text">Mauris nibh felis adipiscing varius adipiscing in lacinia vel tellus urna</span>
</a>
</h3>
{% set element = 'h' ~ headingLevel %}
<{{ element|default('h2') }} class="linked-title linked-title--{{ element }}">
<a href="{{ url }}" class="linked-title__link">
<span class="linked-title__link-text">{{ text | trim }}</span>
</a>
</{{ element|default('h2') }}>
{
"headingLevel": "3",
"text": "Mauris nibh felis adipiscing varius adipiscing in lacinia vel tellus urna",
"url": "#"
}
.linked-title
--backgroundColorActive alachua
--textColor blue500
--textColorActive black
&--h1
@extends $headline1
&--h2
@extends $headline2
&--h3
@extends $headline3
&--h4
@extends $headline4
&--h5
@extends $headline5
&--h6
@extends $headline6
display inline-flex
position relative
transition all 0.3s
&__link
color var(--textColor)
cursor pointer
position relative
text-decoration none
transition all 0.3s ease-in-out
&:before
content ''
background-color var(--backgroundColorActive)
bottom 0
left 100%
position absolute
right 0
top 100%
transform skewY(-3deg)
transition all 0.3s
&:focus
&:hover
&:active
color var(--textColorActive)
&:focus::before
&:hover::before
left 0
top 0
transform skewY(0deg)
&__link-text
position relative
No notes defined.