UHasselt Component Library

Link block 

<!-- All Fields -->
<div class="link-block js--clickable">
    <div class="wrapper-link-block">

        <span class="tag tag-gray tag-sm">
            This is a tag

        </span>

        <div class="title-wrap">
            <span class="number-id">3461</span>

            <h4 class="heading ">
                Titel van deze link blok
            </h4>
        </div>

        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

        <div class="link-block-date">1/03/2021 - 28/02/2025</div>

    </div>

    <a href="https://www.google.nl" class="link-block-iconlink js--main-link">
        <span class="icon fal fa-chevron-right  fa-lg " aria-hidden="true"></span>
    </a>
</div>


<!-- Research Affiliates -->
<div class="link-block js--clickable">
    <div class="wrapper-link-block">

        <div class="title-wrap">

            <h4 class="heading ">
                Onderzoeksgroep Materiaalchemie
            </h4>
        </div>

        <div>Lid</div>

        <div class="link-block-date">1 januari 2020 - heden</div>

    </div>

    <a href="https://www.google.nl" class="link-block-iconlink js--main-link">
        <span class="icon fal fa-chevron-right  fa-lg " aria-hidden="true"></span>
    </a>
</div>


<!-- Supervised Phds -->
<div class="link-block ">
    <div class="wrapper-link-block">

        <div class="title-wrap">

            <h4 class="heading ">
                Congressen en voordrachten
            </h4>
        </div>

        <div>John Doe voor de titel Doctor in de Chemie in 2020</div>

        <div>Begeleid als Co-promotor</div>

    </div>

</div>


<!-- Other Research Activities -->
<div class="link-block ">
    <div class="wrapper-link-block">

        <div class="title-wrap">

        </div>

        <div>Naam van congres of voordracht + datum / vrij in te vullen</div>

    </div>

</div>


<!-- Publication -->
<div class="link-block js--clickable">
    <div class="wrapper-link-block">

        <span class="tag tag-gray tag-sm">
            Journal contribution

        </span>

        <div class="title-wrap">

            <h4 class="heading ">
                A comparative study on the switching kinetics of W/VO2 powders and VO2 coatings and their implications for thermochromic glazing
            </h4>
        </div>

        <div>Gepubliceerd in 2021 in SOLAR ENERGY MATERIALS AND SOLAR CELLS, 224 (Art N° 110977), Volume 22, Pagina&#x27;s 8-12</div>

        <div>Auters CALVI, Lavinia ; Leufkens, Luc; Yeung, Cindy P.K.; Habets, Roberto... </div>

        <div>Aantal citaties 3 | Open access Ja | IF 32.503</div>

    </div>

    <a href="https://www.google.nl" class="link-block-iconlink js--main-link">
        <span class="icon fal fa-chevron-right  fa-lg " aria-hidden="true"></span>
    </a>
</div>


<!-- Project -->
<div class="link-block js--clickable">
    <div class="wrapper-link-block">

        <div class="title-wrap">

            <h4 class="heading ">
                Catalisti Moonshot cSBO project: SYN-CAT
            </h4>
        </div>

        <div class="link-block-date">1/03/2021 - 28/02/2025</div>

    </div>

    <a href="https://www.google.nl" class="link-block-iconlink js--main-link">
        <span class="icon fal fa-chevron-right  fa-lg " aria-hidden="true"></span>
    </a>
</div>


<!-- 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>


<!-- Service Society -->
<div class="link-block ">
    <div class="wrapper-link-block">

        <div class="title-wrap">

            <h4 class="heading ">
                Cost Action MP0904 Simufer
            </h4>
        </div>

        <div>Lid managemetn comité namens België</div>

        <div class="link-block-date">02.03.2017 - 05.03.2021</div>

    </div>

</div>


<!-- Education -->
<div class="link-block js--clickable">
    <div class="wrapper-link-block">

        <div class="title-wrap">

            <h4 class="heading ">
                Master in Chemie
            </h4>
        </div>

    </div>

    <a href="https://www.google.nl" class="link-block-iconlink js--main-link">
        <span class="icon fal fa-chevron-right  fa-lg " aria-hidden="true"></span>
    </a>
</div>


<!-- Courses -->
<div class="link-block js--clickable">
    <div class="wrapper-link-block">

        <div class="title-wrap">
            <span class="number-id">3461</span>

            <h4 class="heading ">
                Basisvaardigheden in de chemie
            </h4>
        </div>

        <div>Lid van het onderwijsteam</div>

    </div>

    <a href="https://www.google.nl" class="link-block-iconlink js--main-link">
        <span class="icon fal fa-chevron-right  fa-lg " aria-hidden="true"></span>
    </a>
</div>


<!-- Search -->
<div class="link-block js--clickable">
    <div class="wrapper-link-block">

        <div class="title-wrap">

            <h4 class="heading text-red">
                personeelsadministratie
            </h4>
        </div>

        <div class="link-block-type">
            <span class="icon fal fa-chevron-right  fa-xs " aria-hidden="true"></span>

            <div class="link-block-path">
                Personeelsadministratie / verlof
            </div>
        </div>

        <div>Uitleg over die pagina en waarover het juist gaat. Dit mag op meerdere lijnen, maar beperk het tot maximum 3. Zorg dat de tekst pas stope na een leesteken</div>

    </div>

    <a href="#" class="link-block-iconlink js--main-link">
        <span class="icon fal fa-chevron-right  fa-lg " aria-hidden="true"></span>
    </a>
</div>


<!-- Notification -->
<div class="link-block js--clickable">
    <div class="wrapper-link-block">
        <div class="link-block-eyebrow">
            <div class="link-block-eyebrow-tag">
                <span class="tag tag-sm tag-red tag-round tag-sm">
                    This is a tag

                </span>

            </div>

            <div class="link-block-eyebrow-date">
                1/03/2021
            </div>
        </div>

        <div class="title-wrap">

            <h4 class="heading text-red">
                Nieuwe Vacature: Administratief bediende contractbeheer - 100%
            </h4>
        </div>

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

            <div class="link-block-path">
                Personeelsadministratie / Vacture
            </div>
        </div>

        <div>Uitleg over die pagina en waarover het juist gaat. Dit mag op meerdere lijnen, maar beperk het tot maximum 3. Zorg dat de tekst pas stope na een leesteken</div>

    </div>

    <a href="#" class="link-block-iconlink js--main-link">
        <span class="icon fal fa-chevron-right  fa-lg " aria-hidden="true"></span>
    </a>
</div>


<!-- Job Offer -->
<div class="link-block js--clickable">
    <div class="wrapper-link-block">

        <div class="title-wrap">

            <h2 class="heading ">
                Administratief medewerker contractbeheer
            </h2>
        </div>

        <div class="link-block-percentage">
            <div class="link-block-percentage-text">
                Bijzonder academisch personeel (BAP)
            </div>

            <div class="link-block-percentage-number">
                100%
            </div>
        </div>

        <div class="link-block-record-bold">
            Uiterste sollicitatiedatum: 25/11/2019
        </div>

        <div class="link-block-actions">
            <a href="#" class="button button-red ">
                <span>
                    <span class="text">
                        Meer info en solliciteren
                    </span>
                </span>
            </a>

        </div>
    </div>

    <a href="#" class="link-block-iconlink js--main-link">
        <span class="icon fal fa-chevron-right  fa-lg " aria-hidden="true"></span>
    </a>
</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>
 
/* All Fields */
{
  "heading": {
    "text": "Titel van deze link blok",
    "tag": "h4"
  },
  "record-1": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
  "record-2": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
  "record-3": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
  "link-block-date": "1/03/2021 - 28/02/2025",
  "number-id": "3461",
  "icon-chev": {
    "style": "fal",
    "icon": "fa-chevron-right",
    "size": "fa-lg"
  },
  "isLink": true,
  "url": "https://www.google.nl",
  "isExternalLink": false,
  "tag": true
}


/* Research Affiliates */
{
  "heading": {
    "text": "Onderzoeksgroep Materiaalchemie",
    "tag": "h4"
  },
  "record-1": "Lid",
  "record-2": false,
  "record-3": false,
  "link-block-date": "1 januari 2020 - heden",
  "number-id": false,
  "icon-chev": {
    "style": "fal",
    "icon": "fa-chevron-right",
    "size": "fa-lg"
  },
  "isLink": true,
  "url": "https://www.google.nl",
  "isExternalLink": false,
  "tag": false
}


/* Supervised Phds */
{
  "heading": {
    "text": "Congressen en voordrachten",
    "tag": "h4"
  },
  "record-1": "John Doe voor de titel Doctor in de Chemie in 2020",
  "record-2": "Begeleid als Co-promotor",
  "record-3": false,
  "link-block-date": false,
  "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
}


/* Other Research Activities */
{
  "heading": false,
  "record-1": "Naam van congres of voordracht + datum / vrij in te vullen",
  "record-2": false,
  "record-3": false,
  "link-block-date": false,
  "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
}


/* Publication */
{
  "heading": {
    "text": "A comparative study on the switching kinetics of W/VO2 powders and VO2 coatings and their implications for thermochromic glazing",
    "tag": "h4"
  },
  "record-1": "Gepubliceerd in 2021 in SOLAR ENERGY MATERIALS AND SOLAR CELLS, 224 (Art N° 110977), Volume 22, Pagina's 8-12",
  "record-2": "Auters CALVI, Lavinia ; Leufkens, Luc; Yeung, Cindy P.K.; Habets, Roberto... ",
  "record-3": "Aantal citaties 3 | Open access Ja | IF 32.503",
  "link-block-date": false,
  "number-id": false,
  "icon-chev": {
    "style": "fal",
    "icon": "fa-chevron-right",
    "size": "fa-lg"
  },
  "isLink": true,
  "url": "https://www.google.nl",
  "isExternalLink": false,
  "tag": {
    "text": "Journal contribution"
  }
}


/* Project */
{
  "heading": {
    "text": "Catalisti Moonshot cSBO project: SYN-CAT",
    "tag": "h4"
  },
  "record-1": false,
  "record-2": false,
  "record-3": false,
  "link-block-date": "1/03/2021 - 28/02/2025",
  "number-id": false,
  "icon-chev": {
    "style": "fal",
    "icon": "fa-chevron-right",
    "size": "fa-lg"
  },
  "isLink": true,
  "url": "https://www.google.nl",
  "isExternalLink": false,
  "tag": false
}


/* Innovation Knowledge */
{
  "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
}


/* Service Society */
{
  "heading": {
    "text": "Cost Action MP0904 Simufer",
    "tag": "h4"
  },
  "record-1": "Lid managemetn comité namens België",
  "record-2": false,
  "record-3": false,
  "link-block-date": "02.03.2017 - 05.03.2021",
  "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
}


/* Education */
{
  "heading": {
    "text": "Master in Chemie",
    "tag": "h4"
  },
  "record-1": false,
  "record-2": false,
  "record-3": false,
  "link-block-date": false,
  "number-id": false,
  "icon-chev": {
    "style": "fal",
    "icon": "fa-chevron-right",
    "size": "fa-lg"
  },
  "isLink": true,
  "url": "https://www.google.nl",
  "isExternalLink": false,
  "tag": false
}


/* Courses */
{
  "heading": {
    "text": "Basisvaardigheden in de chemie",
    "tag": "h4"
  },
  "record-1": "Lid van het onderwijsteam",
  "record-2": false,
  "record-3": false,
  "link-block-date": false,
  "number-id": "3461",
  "icon-chev": {
    "style": "fal",
    "icon": "fa-chevron-right",
    "size": "fa-lg"
  },
  "isLink": true,
  "url": "https://www.google.nl",
  "isExternalLink": false,
  "tag": false
}


/* Search */
{
  "heading": {
    "text": "personeelsadministratie",
    "tag": "h4",
    "modifier": "text-red"
  },
  "record-1": "Uitleg over die pagina en waarover het juist gaat. Dit mag op meerdere lijnen, maar beperk het tot maximum 3. Zorg dat de tekst pas stope na een leesteken",
  "record-2": false,
  "record-3": false,
  "link-block-date": false,
  "number-id": false,
  "icon-chev": {
    "style": "fal",
    "icon": "fa-chevron-right",
    "size": "fa-lg"
  },
  "isLink": true,
  "url": "#",
  "isExternalLink": false,
  "tag": false,
  "type": {
    "icon": {
      "style": "fal",
      "icon": "fa-chevron-right",
      "size": "fa-xs"
    },
    "path": "Personeelsadministratie / verlof"
  }
}


/* Notification */
{
  "heading": {
    "text": "Nieuwe Vacature: Administratief bediende contractbeheer - 100%",
    "tag": "h4",
    "modifier": "text-red"
  },
  "record-1": "Uitleg over die pagina en waarover het juist gaat. Dit mag op meerdere lijnen, maar beperk het tot maximum 3. Zorg dat de tekst pas stope na een leesteken",
  "record-2": false,
  "record-3": false,
  "link-block-date": false,
  "number-id": false,
  "icon-chev": {
    "style": "fal",
    "icon": "fa-chevron-right",
    "size": "fa-lg"
  },
  "isLink": true,
  "url": "#",
  "isExternalLink": false,
  "tag": false,
  "type": {
    "icon": false,
    "path": "Personeelsadministratie / Vacture"
  },
  "eyebrow": {
    "date": "1/03/2021",
    "tag": {
      "text": "Nieuw",
      "modifier": "tag-red-round",
      "size": "tag-sm"
    }
  }
}


/* Job Offer */
{
  "heading": {
    "text": "Administratief medewerker contractbeheer",
    "tag": "h2"
  },
  "record-1": false,
  "record-2": false,
  "record-3": false,
  "link-block-date": false,
  "number-id": false,
  "icon-chev": {
    "style": "fal",
    "icon": "fa-chevron-right",
    "size": "fa-lg"
  },
  "isLink": true,
  "url": false,
  "isExternalLink": false,
  "tag": false,
  "record-bold": "Uiterste sollicitatiedatum: 25/11/2019",
  "percentage": {
    "text": "Bijzonder academisch personeel (BAP)",
    "number": "100"
  },
  "button": {
    "text": "Meer info en solliciteren",
    "element": "a",
    "iconBefore": false,
    "modifier": "red",
    "href": "#"
  }
}
  • 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.