UHasselt Component Library

Link scroll up 

<a href="#" class="link-scroll-up " title="Scroll up">
    <span class="icon far fa-arrow-up   " aria-hidden="true"></span>

    <span class="text">
        Scroll up
    </span>
</a>
 
<a
  href="{{href}}"
  class="link-scroll-up {{modifier}}"
  title="{{title}}"
  {{#if external}}target="_blank" rel="noopener noreferrer"{{/if}}
>
  {{#if icon}}
    {{render '@icon' icon merge=true}}
  {{/if}}

  <span class="text">
    {{text}}
  </span>
</a>
 
{
  "modifier": "",
  "href": "#",
  "title": "Scroll up",
  "aria_label": "",
  "text": "Scroll up",
  "icon": {
    "icon": "fa-arrow-up",
    "style": "far"
  }
}
  • Content: 
    .link-scroll-up {
    display: block;
    width: 96px;

    .icon {
        @apply border-black;

        display: flex;
        align-items: center;
        justify-content: center;
        width: 96px;
        height: 96px;
        border: 2px solid;
        font-size: 38px;
        transition: color 250ms;
    }

    .text {
        display: block;
        width: 100%;
        margin-top: 8px;
        font-size: 16px;
        font-weight: 400;
        text-align: center;
        transition: color 250ms;
    }

    &:hover {
        .text,
        .icon {
            @apply text-red;
        }
    }
}
  • URL: /components/raw/link-scroll-up/link-scroll-up.css
  • Filesystem Path: src\components\02-atoms\link-scroll-up\link-scroll-up.css
  • Size: 645 Bytes

No notes defined.