UHasselt Component Library

Wie is wie detail 

<div class="wrapper-info-vacancy col-span-12">
    <div class="left"></div>
    <div class="right">
        <div class="wrap-contact-info">
            <h1 class="heading ">
                The quick brown fox jumps over the lazy dog
            </h1>
            <div class='paragraph '>
                <p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
            </div>

            <a href="#" class="button button-black ">
                <span>
                    <span class="icon fal fa-envelope   " aria-hidden="true"></span>
                    <span class="text">
                        This is a CTA Button
                    </span>
                </span>
            </a>

        </div>
        <div class="wrap-card-contact">
            <div class="card card-contact ">
                <div class="contact-wrapper">
                    <h2 class="heading title">
                        Cynthia van Aubel - van der Veen
                    </h2>
                    <picture class="picture ">
                        <img class="picture-image " src="//placehold.co/100x100" alt="">
                    </picture>

                </div>
                <div class="information">
                    <div class="info-wrap">
                        <div class="contact-label">
                            <span class="icon fal fa-home   fa-fw" aria-hidden="true"></span>
                            <span class="description">Locatie:</span>
                        </div>

                        <span>Hasselt</span>
                    </div>
                    <div class="info-wrap">
                        <div class="contact-label">
                            <span class="icon fal fa-briefcase   fa-fw" aria-hidden="true"></span>
                            <span class="description">Functie:</span>
                        </div>
                        <span>Coördinator</span>
                    </div>
                    <div class="info-wrap">
                        <div class="contact-label">
                            <span class="icon fal fa-envelope   fa-fw" aria-hidden="true"></span>
                            <span class="description">E-mail:</span>
                        </div>
                        <span><a href="mailto:cynthia.vanaubel@uhasselt.be" class="link " aria-label="" title="Cynthia van Aubel - van der Veen">

                                <span class="text">cynthia.vanaubelvanderveen@uhasselt.be</span>

                            </a>
                        </span>
                    </div>
                    <div class="info-wrap">
                        <div class="contact-label">
                            <span class="icon fal fa-phone-alt   fa-fw" aria-hidden="true"></span>
                            <span class="description">Telefoon:</span>
                        </div>
                        <span><a href="tel:003211268173" class="link " aria-label="" title="+32 112 68 173">

                                <span class="text">+32 112 68 173</span>

                            </a>
                        </span>
                    </div>
                </div>
                <div class="btn-wrapper"> <a href="#" class="button button-red ">
                        <span>
                            <span class="text">
                                Meer weten over Cynthia
                            </span>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="wrapper-info-vacancy col-span-12">
    <div class="left"></div>
    <div class="right">
            <div class="wrap-contact-info">
                {{render '@heading'}}
                {{render '@paragraph'}}
                {{render '@button'}}
            </div>
            <div class="wrap-card-contact">
                {{render '@card-contact'}}
            </div>
    </div>
</div>
 
{
  "breadcrumbs": {
    "page": [
      {
        "isCurrent": false,
        "link": {
          "text": "Home"
        }
      },
      {
        "isCurrent": false,
        "link": {
          "text": "Wie is wie"
        }
      },
      {
        "isCurrent": true,
        "text": "Marlies van Bael"
      }
    ]
  },
  "wiw-profile-image": {
    "src": "https://picsum.photos/id/235/140/140",
    "sources": [
      {
        "mediaQuery": "(min-width: 1024px)",
        "src": "https://picsum.photos/id/235/140/140"
      },
      {
        "mediaQuery": "(min-width: 640px)",
        "src": "https://picsum.photos/id/235/140/140"
      }
    ]
  },
  "wiw-name": {
    "text": "Prof. dr. Marlies van Bael"
  },
  "wiw-functions-mandates": {
    "text": "Zap | Gewoon Hoogleraar"
  },
  "wiw-mandates": [
    {
      "icon": {
        "icon": "fa-caret-right",
        "style": "fas"
      },
      "level-1": {
        "text": "Faculteit Wetenschappen",
        "isExternal": true
      },
      "level-2": {
        "text": "Vakgroep chemie",
        "isExternal": true
      },
      "level-3": {
        "text": "Onderzoeksgroep Materiaalchemie",
        "isExternal": true
      }
    },
    {
      "icon": {
        "icon": "fa-caret-right",
        "style": "fas"
      },
      "level-1": {
        "text": "Insitituut voor Materiaalonderzoek",
        "isExternal": true
      }
    }
  ],
  "wiw-functions": {
    "heading": {
      "text": "Functies"
    },
    "function": [
      {}
    ]
  },
  "wiw-memberof": {
    "heading": {
      "text": "Beleidsfuncties en lidmaatschap raden"
    },
    "member": [
      {
        "link": {
          "text-before": "Voorzitter",
          "title": "Vakgroepraad CHEM",
          "text": "Vakgroepraad CHEM",
          "isExternal": true
        }
      },
      {
        "link": {
          "text-before": "Vice-voorzitter",
          "title": "Onderzoeksraad",
          "text": "Onderzoeksraad",
          "isExternal": true
        }
      },
      {
        "link": {
          "text-before": "Secretaris",
          "title": "Examencommissie Bachelor Chemie",
          "text": "Examencommissie Bachelor Chemie",
          "isExternal": true
        }
      }
    ]
  },
  "wiw-aboutme": {
    "heading": {
      "text": "Over mezelf"
    },
    "intro": {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo."
    },
    "read-more": {
      "text": "Lees verder",
      "iconAfter": {
        "icon": "fa-chevron-down",
        "style": "far"
      }
    },
    "download-cv": {
      "text": "Download CV",
      "iconBefore": {
        "icon": "fa-cloud-download-alt",
        "style": "fal"
      }
    }
  },
  "wiw-research": {
    "heading": {
      "text": "Onderzoek"
    },
    "keywords": [
      {
        "label": "Trefwoorden",
        "keyword": "Scheikunde"
      },
      {
        "label": "Disciplines",
        "keyword": "Vaste stofchemie, Chemie van oplossingen, Synthese van materialen, Nanomaterialen"
      }
    ]
  },
  "wiw-research-affiliates": {
    "heading": {
      "text": "Onderzoeksaffiliaties"
    },
    "affiliate": [
      {},
      {}
    ]
  },
  "wiw-supervised-phds": {
    "heading": {
      "text": "Begeleide doctoraten"
    },
    "phd": [
      {},
      {}
    ]
  },
  "wiw-other-research-activities": {
    "heading": {
      "text": "Andere onderzoeksactiviteiten"
    },
    "activity": [
      {
        "title": {
          "text": "Congressen en voordrachten"
        },
        "item": [
          {},
          {}
        ]
      },
      {
        "title": {
          "text": "Expert- en referee opdrachten"
        },
        "item": [
          {},
          {}
        ]
      }
    ]
  },
  "wiw-publications": {
    "heading": {
      "text": "Publicaties"
    },
    "tag": {
      "size": "tag-sm",
      "text": "Er zijn 306 publicaties gevonden"
    },
    "publication": [
      {},
      {},
      {}
    ]
  },
  "wiw-projects": {
    "heading": {
      "text": "Projecten"
    },
    "tag": {
      "size": "tag-sm",
      "text": "Er zijn 34 onderszoeksprojectens gevonden"
    },
    "project": [
      {},
      {}
    ]
  },
  "wiw-innovation-knowledge": {
    "heading": {
      "text": "Innovatie en kennistransfer"
    },
    "innovation": [
      {
        "title": {
          "text": "Octrooien"
        },
        "item": [
          {},
          {}
        ]
      },
      {
        "title": {
          "text": "Licenties"
        },
        "item": [
          {},
          {}
        ]
      },
      {
        "title": {
          "text": "Spin offs"
        },
        "item": [
          {},
          {}
        ]
      }
    ]
  },
  "wiw-service-society": {
    "heading": {
      "text": "Dienstverlening aan de samenleving"
    },
    "service": [
      {},
      {},
      {}
    ]
  },
  "wiw-educations": {
    "heading": {
      "text": "Onderwijs"
    },
    "education": [
      {
        "heading": {
          "text": "Betrokken bij volgende opleidingen"
        },
        "item": [
          {},
          {}
        ]
      }
    ],
    "courses": [
      {
        "heading": {
          "text": "Betrokken bij de volgende opleidingsonderdelen"
        }
      }
    ]
  },
  "wiw-spotlights": {
    "heading": {
      "text": "In de kijker"
    },
    "spotlight": [
      {},
      {}
    ]
  }
}
  • Content: 
    .wrapper-info-vacancy {
    @apply mt-9 lg:mt-0;
    @apply w-full lg:grid grid-cols-12 gap-10 mb-8;

    .left {
        @apply col-span-3;
    }

    .right {
        @apply col-span-9;
        @apply grid grid-cols-12;

        .wrap-contact-info {
            @apply col-span-12 lg:col-span-6 lg:h-full;
            @apply mb-9 lg:mr-9;

            .paragraph {
                @apply mb-9;
            }
        }

        .wrap-card-contact {
            @apply col-span-12 lg:col-span-6;

            .heading {
                @apply ml-9;
                @apply text-red;
            }

            a {
                .text:first-letter {
                    text-transform: lowercase !important;
                }
            }

            a {
                .text:first-letter {
                    text-transform: lowercase !important;
                }
            }
        }
    }
}
  • URL: /components/raw/vacancy-detail/vacancy-detail.css
  • Filesystem Path: src\components\05-templates\vacancy-detail\vacancy-detail.css
  • Size: 945 Bytes

No notes defined.