UHasselt Component Library

Link block spotlight 

<div class="link-block-spotlight js--clickable">
    <div class="wrapper-link-block-spotlight">
        <div class="title-wrap">
            <span class="tag tag-gray tag-sm">
                Blog

            </span>

            <div class="link-block-date">02.03.2017</div>
            <h4 class="heading ">
                Titel van het blogbericht
            </h4>
        </div>
        <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.</p>
    </div>
    <a href="https://www.google.nl" class="js--main-link">
        <span class="icon fal fa-chevron-right  fa-lg " aria-hidden="true"></span>
    </a>
</div>
 
<div class="link-block-spotlight {{#if isLink}}js--clickable{{/if}}">
        <div class="wrapper-link-block-spotlight">
            <div class="title-wrap">
                {{#if tag}}{{render '@tag--tag-grey-sm' tag merge=true}}{{/if}}
                {{#if link-block-date}}<div class="link-block-date">{{link-block-date}}</div>{{/if}}
                {{#if heading}}{{ render '@heading' @root.heading}}{{/if}}
            </div>
            {{#if text}}<p class="text">{{text}}</p>{{/if}}            
        </div>
        {{#if isLink}}
            <a href="{{url}}" class="js--main-link" {{#if isExternal}}target="_blank" rel="noopener noreferrer"{{/if}}>
            {{ render '@icon' @root.icon-chev}}
            </a>
        {{/if}}
</div>
 
{
  "tag": {
    "text": "Blog"
  },
  "heading": {
    "text": "Titel van het blogbericht",
    "tag": "h4"
  },
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.",
  "link-block-date": "02.03.2017",
  "icon-chev": {
    "style": "fal",
    "icon": "fa-chevron-right",
    "size": "fa-lg"
  },
  "isLink": true,
  "url": "https://www.google.nl"
}
  • Content: 
    .link-block-spotlight {
    @apply max-w-full flex items-center p-4 mb-2;
    @apply border border-solid border-gray;

    .wrapper-link-block-spotlight {
        @apply w-full;

        .title-wrap {
            @apply flex gap-4;

            .tag {
                @apply mb-2;
            }

            .link-block-date {
                @apply text-black-500;
            }

            h4.heading {
                @apply font-semibold m-0;
            }
        }

        p.text {
            @apply m-0;
        }
    }

    .icon {
        @apply text-red;
        transition: all 0.3s ease;
    }

    .js--clickable {
        cursor: pointer;
    }
}
.link-block-spotlight.js--clickable {
    &:hover {
        @apply no-underline shadow-md;

        .fa-chevron-right {
            transform: translateX(5px);
        }
    }
}
  • URL: /components/raw/link-block-spotlight/link-block-spotlight.css
  • Filesystem Path: src\components\03-molecules\link-block-spotlight\link-block-spotlight.css
  • Size: 888 Bytes

No notes defined.