Custom theme (replace with client name)

Linked Title 

<h2 class="linked-title linked-title--">
    <a href="#" class="linked-title__link">
        Mauris nibh felis adipiscing varius adipiscing in lacinia vel tellus urna
        <span class="linked-title__link-icon">
            <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
                <path class="_mark right-chevron__shape" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z" />
            </svg>

        </span>
    </a>
</h2>
 
<{{ element|default('h2') }} class="linked-title linked-title--{{ background }}">
    <a href="{{ url }}" class="linked-title__link">
        {{ text | trim }}
        <span class="linked-title__link-icon">
            {% include 'bits/icons/right-chevron.twig' %}
        </span>
    </a>
</{{ element|default('h2') }}>
 
{
  "text": "Mauris nibh felis adipiscing varius adipiscing in lacinia vel tellus urna",
  "url": "#"
}
  • Content: 
    .linked-title
    --iconFillColor charcoal
    --textColor charcoal
    --textColorActive charcoal

    &--dark
        --iconFillColor white
        --textColor white
        --textColorActive white

    &__link
        color var(--textColor)
        text-decoration none

        &:focus
        &:hover
        &:active
            color var(--textColorActive)

            .linked-title__link-icon svg
                transform translate(4px, 0)

    &__link-icon
        display inline
        white-space nowrap

        & svg
            transition all 0.3s

            & .right-chevron__shape
                fill var(--iconFillColor)
  • URL: /components/raw/linked-title/linked-title.styl
  • Filesystem Path: patterns/bits/linked-title/linked-title.styl
  • Size: 645 Bytes

No notes defined.