UHasselt Component Library

Content Card Big: Vacatures Detail 

<div class="content-card-big w-full">
    <div class="text-red">
        <h3 class="heading ">
            The quick brown fox jumps over the lazy dog
        </h3>
    </div>

    <div class='paragraph paragraph-intro'>
        <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>

    <p class="mb-8">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non leo vel massa iaculis euismod sit amet eget nibh. Nulla faucibus diam dolor, vel auctor sapien fermentum sed. Phasellus non dolor vel quam tristique consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec posuere lobortis nibh, eget iaculis risus. In eu risus sem. Fusce lacinia gravida tortor. Quisque sed ipsum risus. Nam pellentesque consequat consequat. Curabitur imperdiet ac nibh vel ullamcorper. Etiam bibendum pharetra ultrices. Duis consequat odio vitae vehicula dignissim.
        Pellentesque dignissim, magna maximus pulvinar dignissim, magna dui semper purus, ac laoreet ex tellus sit amet sapien. Morbi eu lobortis justo. Cras tristique ut libero vel fermentum. Fusce neque quam, bibendum non malesuada nec, interdum vel turpis. Aenean interdum pulvinar enim ac convallis. Pellentesque rhoncus est a purus semper auctor. Integer faucibus tristique suscipit. Suspendisse eleifend diam ac tellus condimentum lobortis. Aenean sit amet luctus sem. Donec quis justo sem.
    </p>

    <div class="text-red">
        <h3 class="heading ">
            The quick brown fox jumps over the lazy dog
        </h3>
    </div>

    <p class="mb-8">
        Donec diam nibh, finibus non volutpat at, lacinia non ipsum. Mauris sem massa, dignissim in tristique at, pharetra ac urna. Donec diam tellus, faucibus quis venenatis malesuada, pretium non urna. Sed et condimentum enim. Morbi vehicula accumsan enim. Praesent eget mattis odio. Nunc eu augue condimentum elit porta bibendum.
        Suspendisse interdum blandit libero, nec elementum mi eleifend eu. Nunc ultricies gravida erat ac condimentum. Aliquam placerat nec arcu id luctus. Pellentesque quis sem in magna cursus gravida id sit amet lorem. In a metus viverra, porta magna et, commodo libero. Sed convallis sagittis neque, sit amet convallis dolor imperdiet in. Donec mattis sem at semper dapibus. Proin vel consectetur lectus. Aliquam erat volutpat. Nullam nec sapien a mi rutrum laoreet quis id justo.
    </p>

    <div class="image-slider">
        <div class="image-slider-wrapper">
            <div class="swiper-container image-slider-main" data-slides-per-view="1" data-loop="true" data-loop-additional-slides="0">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="slide-image">
                            <img src="https://picsum.photos/id/231/960/540" alt="" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-image">
                            <img src="https://picsum.photos/id/232/960/540" alt="" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-video">
                            <iframe src="https://www.youtube.com/embed/D-HIYP7Jo7Y" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
                            </iframe>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-image">
                            <img src="https://picsum.photos/id/234/960/540" alt="" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-image">
                            <img src="https://picsum.photos/id/235/960/540" alt="" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-image">
                            <img src="https://picsum.photos/id/236/960/540" alt="" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-image">
                            <img src="https://picsum.photos/id/237/960/540" alt="" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-image">
                            <img src="https://picsum.photos/id/238/960/540" alt="" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-image">
                            <img src="https://picsum.photos/id/239/960/540" alt="" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-image">
                            <img src="https://picsum.photos/id/2/960/540" alt="" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="swiper-pagination"></div>

            <div class="swiper-prev">
                <a href="#" class="prev-next prev-next-prev">
                    <span class="icon fal fa-angle-left  fa-2x " aria-hidden="true"></span>
                </a>

            </div>

            <div class="swiper-next">
                <a href="#" class="prev-next prev-next-next">
                    <span class="icon fal fa-angle-right  fa-2x " aria-hidden="true"></span>
                </a>

            </div>
        </div>

        <div class="swiper-container image-slider-thumbs" data-slides-per-view="5" data-loop="true">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="slide-image">
                        <img src="https://picsum.photos/id/231/960/540" alt="" />
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="slide-image">
                        <img src="https://picsum.photos/id/232/960/540" alt="" />
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="slide-image">
                        <img src="http://i3.ytimg.com/vi/D-HIYP7Jo7Y/maxresdefault.jpg" alt="" />
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="slide-image">
                        <img src="https://picsum.photos/id/234/960/540" alt="" />
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="slide-image">
                        <img src="https://picsum.photos/id/235/960/540" alt="" />
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="slide-image">
                        <img src="https://picsum.photos/id/236/960/540" alt="" />
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="slide-image">
                        <img src="https://picsum.photos/id/237/960/540" alt="" />
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="slide-image">
                        <img src="https://picsum.photos/id/238/960/540" alt="" />
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="slide-image">
                        <img src="https://picsum.photos/id/239/960/540" alt="" />
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="slide-image">
                        <img src="https://picsum.photos/id/2/960/540" alt="" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="content-card-big w-full">
    {{#if content-block-head}}
        <div class="text-red">
            {{render '@heading--h3'}}
        </div>

        {{render '@paragraph--intro'}}

        <p class="mb-8">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non leo vel massa iaculis euismod sit amet eget nibh. Nulla faucibus diam dolor, vel auctor sapien fermentum sed. Phasellus non dolor vel quam tristique consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec posuere lobortis nibh, eget iaculis risus. In eu risus sem. Fusce lacinia gravida tortor. Quisque sed ipsum risus. Nam pellentesque consequat consequat. Curabitur imperdiet ac nibh vel ullamcorper. Etiam bibendum pharetra ultrices. Duis consequat odio vitae vehicula dignissim.
            Pellentesque dignissim, magna maximus pulvinar dignissim, magna dui semper purus, ac laoreet ex tellus sit amet sapien. Morbi eu lobortis justo. Cras tristique ut libero vel fermentum. Fusce neque quam, bibendum non malesuada nec, interdum vel turpis. Aenean interdum pulvinar enim ac convallis. Pellentesque rhoncus est a purus semper auctor. Integer faucibus tristique suscipit. Suspendisse eleifend diam ac tellus condimentum lobortis. Aenean sit amet luctus sem. Donec quis justo sem.
        </p>
    {{/if}}

    {{#if content-block-title-red}}
        <div class="text-red">
            {{render '@heading--h3'}}
        </div>

        <p class="mb-8">
            Donec diam nibh, finibus non volutpat at, lacinia non ipsum. Mauris sem massa, dignissim in tristique at, pharetra ac urna. Donec diam tellus, faucibus quis venenatis malesuada, pretium non urna. Sed et condimentum enim. Morbi vehicula accumsan enim. Praesent eget mattis odio. Nunc eu augue condimentum elit porta bibendum.
            Suspendisse interdum blandit libero, nec elementum mi eleifend eu. Nunc ultricies gravida erat ac condimentum. Aliquam placerat nec arcu id luctus. Pellentesque quis sem in magna cursus gravida id sit amet lorem. In a metus viverra, porta magna et, commodo libero. Sed convallis sagittis neque, sit amet convallis dolor imperdiet in. Donec mattis sem at semper dapibus. Proin vel consectetur lectus. Aliquam erat volutpat. Nullam nec sapien a mi rutrum laoreet quis id justo.
        </p>
    {{/if}}

    {{#if content-block-title-black}}
        <div class="mb-8">
            {{render '@heading--h3'}}
        </div>

        <div class="mb-8">
            {{render '@paragraph'}}
        </div>
    {{/if}}

    {{#if content-split-quote}}
        <div class="flex flex-col lg:flex-row mb-8">
            <div class="block w-full lg:w-2/3">
                {{render '@heading--h3'}}

                <p class="mb-8">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non leo vel massa iaculis euismod sit amet eget nibh. Nulla faucibus diam dolor, vel auctor sapien fermentum sed. Phasellus non dolor vel quam tristique consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec posuere lobortis nibh, eget iaculis risus. In eu risus sem. Fusce lacinia gravida tortor. Quisque sed ipsum risus. Nam pellentesque consequat consequat. Curabitur imperdiet ac nibh vel ullamcorper. Etiam bibendum pharetra ultrices. Duis consequat odio vitae vehicula dignissim.
                    Pellentesque dignissim, magna maximus pulvinar dignissim, magna dui semper purus, ac laoreet ex tellus sit amet sapien. Morbi eu lobortis justo. Cras tristique ut libero vel fermentum. Fusce neque quam, bibendum non malesuada nec, interdum vel turpis. Aenean interdum pulvinar enim ac convallis. Pellentesque rhoncus est a purus semper auctor. Integer faucibus tristique suscipit. Suspendisse eleifend diam ac tellus condimentum lobortis. Aenean sit amet luctus sem. Donec quis justo sem.
                </p>
            </div>

            <div class="block lg:ml-16 w-full lg:w-1/3">
                {{render '@quote'}}
            </div>
        </div>
    {{/if}}

    {{#if image-slider}}
        {{render '@image-slider--image-slider-with-thumbnails'}}
    {{/if}}
</div>
 
{
  "modifier": "",
  "content-block-head": true,
  "content-block-title-red": true,
  "content-block-title-black": false,
  "content-split-quote": false,
  "image-slider": true
}

No notes defined.