<section class="content-header   ">
    <div class="uhasselt-container">
        <div class="column ">
            <nav class="mol-breadcrumbs">
                <ol>
                    <li>
                        <a class="link " aria-label="" title="">

                            <span class="text">Home</span>

                        </a>
                        <span class="icon fal fa-slash  fa-sm " aria-hidden="true"></span>
                    </li>
                    <li>
                        <a class="link " aria-label="" title="">

                            <span class="text">Level 1</span>

                        </a>
                        <span class="icon fal fa-slash  fa-sm " aria-hidden="true"></span>
                    </li>
                    <li>
                        <a class="link " aria-label="" title="">

                            <span class="text">Level 2</span>

                        </a>
                        <span class="icon fal fa-slash  fa-sm " aria-hidden="true"></span>
                    </li>
                    <li>
                        Current page
                    </li>
                </ol>
            </nav>

            <h1 class="heading ">
                The quick brown fox jumps over the lazy dog
            </h1>

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

            <div class="button-wrap">

            </div>
        </div>
    </div>

</section>

<section class='py-12 bg-gray-300'>
    <div class='uhasselt-container'>
        <div>
            <div class="flex items-center pb-4">
                <div class="text-red mr-3">
                    <span class="icon fas fa-bell   " aria-hidden="true"></span>
                </div>

                <div class='paragraph '>Er zijn nog <strong>2</strong> ongelezen berichten.</div>

            </div>

            <div class='max-width-1100'>
                <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>
                <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>
                <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>
                <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>
                <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>
                <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>

                <ul class="pager">
                    <li>
                        <a href="#">
                            <span class="icon fal fa-long-arrow-left   " aria-hidden="true"></span>
                            Vorige
                        </a>
                    </li>

                    <li class="">
                        <a href="#">
                            1
                        </a>
                    </li>
                    <li class="">
                        <a href="#">
                            2
                        </a>
                    </li>
                    <li class="active">
                        <a href="#">
                            3
                        </a>
                    </li>
                    <li class="">
                        <a href="#">
                            4
                        </a>
                    </li>
                    <li class="">
                        <a href="#">
                            5
                        </a>
                    </li>
                    <li class="">
                        <a href="#">
                            6
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            Volgende
                            <span class="icon fal fa-long-arrow-right   " aria-hidden="true"></span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>
{{render '@content-header--content-header-white-noimg' content-header}}

<section class='py-12 bg-gray-300'>
    <div class='uhasselt-container'>
        <div>
            <div class="flex items-center pb-4">
                <div class="text-red mr-3">
                    {{render '@icon' this.icon}}
                </div>

                {{render '@paragraph' this.paragraph}}
            </div>

            <div
                class='max-width-1100'
            >
                {{#each events as |event|}}
                    {{render '@link-block--notification'}}
                {{/each}}

                 {{render '@pager'}}
            </div>
        </div>
    </div>
</section>
{
  "content-header": {
    "modifier": "",
    "image": false,
    "paragraph": true,
    "btn-red": false,
    "btn-white": false,
    "btn-black": false,
    "btn-white-border": false
  },
  "icon": {
    "icon": "fa-bell",
    "style": "fas",
    "modifier": ""
  },
  "paragraph": {
    "text": "Er zijn nog <strong>2</strong> ongelezen berichten.",
    "modifier": "",
    "isRichText": true
  },
  "events": [
    {},
    {},
    {},
    {},
    {},
    {}
  ]
}

No notes defined.