<div class='tpl-article-overview'>
    <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">

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

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

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

    </section>

    <div class='bg-gray-300 py-16'>
        <div class='uhasselt-container'>
            <div class='grid grid-cols-12 gap-16'>
                <div class='col-span-12'>
                    <div class="card-list list-simple">
                        <div class="card-list-item js--clickable">
                            <div class="wrapper">

                                <div class="information">
                                    <span class="date">9 september 2020</span>
                                    <h3 class="heading title">
                                        Lorem ipsum dolor sit amet
                                    </h3>
                                    <span><span class="icon fal fa-clock   fa-fw" aria-hidden="true"></span> 14:00 uur - 19.00 uur</span>
                                    <span><span class="icon fal fa-map-marker-alt   fa-fw" aria-hidden="true"></span> Campus Diepenbeek - gebouw D</span>
                                </div>
                            </div>
                            <a href="#" class="link " aria-label="" title="This is what a link looks like">

                                <span class="text">Bekijk de volledige agenda</span>

                            </a>

                        </div>
                    </div>
                    <div class="card-list list-simple">
                        <div class="card-list-item js--clickable">
                            <div class="wrapper">

                                <div class="information">
                                    <span class="date">9 september 2020</span>
                                    <h3 class="heading title">
                                        Lorem ipsum dolor sit amet
                                    </h3>
                                    <span><span class="icon fal fa-clock   fa-fw" aria-hidden="true"></span> 14:00 uur - 19.00 uur</span>
                                    <span><span class="icon fal fa-map-marker-alt   fa-fw" aria-hidden="true"></span> Campus Diepenbeek - gebouw D</span>
                                </div>
                            </div>
                            <a href="#" class="link " aria-label="" title="This is what a link looks like">

                                <span class="text">Bekijk de volledige agenda</span>

                            </a>

                        </div>
                    </div>
                    <div class="card-list list-simple">
                        <div class="card-list-item js--clickable">
                            <div class="wrapper">

                                <div class="information">
                                    <span class="date">9 september 2020</span>
                                    <h3 class="heading title">
                                        Lorem ipsum dolor sit amet
                                    </h3>
                                    <span><span class="icon fal fa-clock   fa-fw" aria-hidden="true"></span> 14:00 uur - 19.00 uur</span>
                                    <span><span class="icon fal fa-map-marker-alt   fa-fw" aria-hidden="true"></span> Campus Diepenbeek - gebouw D</span>
                                </div>
                            </div>
                            <a href="#" class="link " aria-label="" title="This is what a link looks like">

                                <span class="text">Bekijk de volledige agenda</span>

                            </a>

                        </div>
                    </div>
                    <div class="card-list list-simple">
                        <div class="card-list-item js--clickable">
                            <div class="wrapper">

                                <div class="information">
                                    <span class="date">9 september 2020</span>
                                    <h3 class="heading title">
                                        Lorem ipsum dolor sit amet
                                    </h3>
                                    <span><span class="icon fal fa-clock   fa-fw" aria-hidden="true"></span> 14:00 uur - 19.00 uur</span>
                                    <span><span class="icon fal fa-map-marker-alt   fa-fw" aria-hidden="true"></span> Campus Diepenbeek - gebouw D</span>
                                </div>
                            </div>
                            <a href="#" class="link " aria-label="" title="This is what a link looks like">

                                <span class="text">Bekijk de volledige agenda</span>

                            </a>

                        </div>
                    </div>
                    <div class="card-list list-simple">
                        <div class="card-list-item js--clickable">
                            <div class="wrapper">

                                <div class="information">
                                    <span class="date">9 september 2020</span>
                                    <h3 class="heading title">
                                        Lorem ipsum dolor sit amet
                                    </h3>
                                    <span><span class="icon fal fa-clock   fa-fw" aria-hidden="true"></span> 14:00 uur - 19.00 uur</span>
                                    <span><span class="icon fal fa-map-marker-alt   fa-fw" aria-hidden="true"></span> Campus Diepenbeek - gebouw D</span>
                                </div>
                            </div>
                            <a href="#" class="link " aria-label="" title="This is what a link looks like">

                                <span class="text">Bekijk de volledige agenda</span>

                            </a>

                        </div>
                    </div>
                    <div class="card-list list-simple">
                        <div class="card-list-item js--clickable">
                            <div class="wrapper">

                                <div class="information">
                                    <span class="date">9 september 2020</span>
                                    <h3 class="heading title">
                                        Lorem ipsum dolor sit amet
                                    </h3>
                                    <span><span class="icon fal fa-clock   fa-fw" aria-hidden="true"></span> 14:00 uur - 19.00 uur</span>
                                    <span><span class="icon fal fa-map-marker-alt   fa-fw" aria-hidden="true"></span> Campus Diepenbeek - gebouw D</span>
                                </div>
                            </div>
                            <a href="#" class="link " aria-label="" title="This is what a link looks like">

                                <span class="text">Bekijk de volledige agenda</span>

                            </a>

                        </div>
                    </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>
    </div>
</div>
<div class='tpl-article-overview'>
    {{render '@content-header--content-header-white-noimg'}}
    <div class='bg-gray-300 py-16'>
        <div class='uhasselt-container'>
            <div class='grid grid-cols-12 gap-16'>
                <div class='col-span-12'>
                    {{render '@card-list--list-simple'}}
                    {{render '@card-list--list-simple'}}
                    {{render '@card-list--list-simple'}}
                    {{render '@card-list--list-simple'}}
                    {{render '@card-list--list-simple'}}
                    {{render '@card-list--list-simple'}}
                    {{render '@pager'}}
                </div>
            </div>
        </div>
    </div>
</div>
/* No context defined. */
  • Content:
    .tpl-article-overview {
    }
    
    .dt-articleoverview {
        .card {
            @apply h-full;
    
            .card-container {
                @apply h-full relative pb-24;
            }
    
            .btn-wrapper {
                @apply absolute bottom-0;
            }
        }
    }
    
  • URL: /components/raw/article-overview/article-overview.css
  • Filesystem Path: src\components\05-templates\article-overview\article-overview.css
  • Size: 259 Bytes

No notes defined.