UHasselt Component Library

Link block: Innovation Knowledge 

<div class="link-block ">
    <div class="wrapper-link-block">

        <div class="title-wrap">

            <h4 class="heading ">
                Titel
            </h4>
        </div>

        <div>Interne partner</div>

        <div class="link-block-date">Start</div>

    </div>

</div>
 
<div class="link-block {{#if isLink}}js--clickable{{/if}}">
        <div class="wrapper-link-block">
            {{#if eyebrow}}
                <div class="link-block-eyebrow">
                    {{#if eyebrow.tag}}
                        <div class="link-block-eyebrow-tag">
                            {{render '@tag--tag-red-round'}}
                        </div>
                    {{/if}}

                    {{#if eyebrow.date}}
                        <div class="link-block-eyebrow-date">
                            {{eyebrow.date}}
                        </div>
                    {{/if}}
                </div>
            {{/if}}

            {{#if tag}}{{render '@tag--tag-grey-sm' tag merge=true}}{{/if}}

            <div class="title-wrap">
                {{#if number-id}}<span class="number-id">{{number-id}}</span>{{/if}}

                {{#if heading}}{{ render '@heading' @root.heading}}{{/if}}
            </div>

            {{#if type}}
                <div class="link-block-type">
                    {{#if type.icon}}
                        {{ render '@icon' type.icon  }}
                    {{/if}}

                    {{#if type.path}}
                        <div class="link-block-path">
                            {{type.path}}
                        </div>
                    {{/if}}
                </div>
            {{/if}}

            {{#if record-1}}<div>{{record-1}}</div>{{/if}}

            {{#if record-2}}<div>{{record-2}}</div>{{/if}}

            {{#if record-3}}<div>{{record-3}}</div>{{/if}}

            {{#if percentage}}
                <div class="link-block-percentage">
                    <div class="link-block-percentage-text">
                        {{percentage.text}}
                    </div>

                    <div class="link-block-percentage-number">
                        {{percentage.number}}%
                    </div>
                </div>
            {{/if}}

            {{#if record-bold}}
                <div class="link-block-record-bold">
                    {{record-bold}}
                </div>
            {{/if}}

            {{#if link-block-date}}
                <div class="link-block-date">{{link-block-date}}</div>
            {{/if}}

            {{#if button}}
                <div class="link-block-actions">
                    {{ render '@button' button merge=true}}
                </div>
            {{/if}}
        </div>

        {{#if isLink}}
            <a
                {{#if url}}
                    href="{{url}}"
                {{else}}
                    href="{{button.href}}"
                {{/if}}
                class="link-block-iconlink js--main-link"
                {{#if isExternal}}target="_blank" rel="noopener noreferrer"{{/if}}
            >
                {{ render '@icon' @root.icon-chev}}
            </a>
        {{/if}}
</div>
 
{
  "heading": {
    "text": "Titel",
    "tag": "h4"
  },
  "record-1": "Interne partner",
  "record-2": false,
  "record-3": false,
  "link-block-date": "Start",
  "number-id": false,
  "icon-chev": {
    "style": "fal",
    "icon": "fa-chevron-right",
    "size": "fa-lg"
  },
  "isLink": false,
  "url": "https://www.google.nl",
  "isExternalLink": false,
  "tag": false
}
  • Content: 
    .link-block {
    @apply max-w-full flex items-center p-6 mb-2;
    @apply border border-solid border-gray;

    background-color: white;

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

        padding-right: 16px;

        .tag {
            @apply mb-2;
        }

        .title-wrap {
            @apply flex;

            .number-id {
                @apply mr-4;
            }

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

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

    .link-block-eyebrow {
        display: flex;

        & > div {
            margin-right: 8px;
        }

        &:last-child {
            margin-right: 0;
        }
    }

    .link-block-percentage {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        @screen md {
            flex-wrap: no-wrap;
        }
    }

    .link-block-percentage-text {
        width: 100%;
        margin-right: 32px;

        @screen md {
            width: auto;
        }
    }

    .link-block-percentage-number {
        @apply bg-gray-300;

        display: block;
        padding: 4px 24px;
        border-top: 1px solid #e3e3e3;
        border-bottom: 1px solid #e3e3e3;
        margin-top: 8px;

        @screen md {
            margin: 0;
        }
    }

    .link-block-record-bold {
        margin-top: 16px;
        font-weight: 700;
    }

    .link-block-actions {
        margin-top: 24px;
    }

    .link-block-eyebrow-date {
        @apply text-black-400;
        font-size: 14px;
    }

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

    .link-block-type {
        @apply text-black-400 my-1;

        display: flex;

        .icon {
            align-items: flex-start;
            margin-top: 6px;
            margin-right: 8px;
        }

        .link-block-path {
            font-size: 15px;
        }
    }

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

        .link-block-iconlink .icon {
            transform: translateX(5px);
        }
    }
}
  • URL: /components/raw/link-block/link-block.css
  • Filesystem Path: src\components\03-molecules\link-block\link-block.css
  • Size: 2.3 KB

No notes defined.