Design Seeds Boiler - Component Library

Arrows 

<div class="arrow arrow__fwd"> <!--fwd or back-->
    <span class="arrow__link" href="#"><svg viewBox="0 0 20 20" class="a-icon__svg svg-icon__arrow-dims">
            <use xlink:href="#icon__arrow"></use>
        </svg></span>
</div>
 
<div class="arrow arrow__{{dir | default('fwd') }}"> <!--fwd or back-->
    <span class="arrow__link"  href="#"><svg viewBox="0 0 20 20" class="a-icon__svg svg-icon__arrow-dims">
        <use xlink:href="#icon__arrow"></use>
    </svg></span>
</div>
 
/* No context defined. */
  • Content: 
    .arrow {
    stroke: none;
    
    background-color: #ea5d4e;
    border-radius: 40px;
    border: 1px solid #ffffff;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;


    &__link{
        color: #ffffff;
    }

    svg {
        width: 15px;
        height: 15px;
    }

    &__back {
        transform: rotate(180deg) !important;
    }
}
  • URL: /components/raw/arrows/arrows.scss
  • Filesystem Path: components/arrows/arrows.scss
  • Size: 400 Bytes

No notes defined.