UHasselt Component Library

Article Detail 

<div class='tpl-article-detail'>
    <section class="content-header red hasimage ">
        <div class="uhasselt-container">
            <div class="column has-image">
                <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-black ">
                        <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-border ">
                        <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>

        <div class="wrap-image">
            <picture class="picture ">
                <img class="picture-image " src="https://picsum.photos/id/239/960/640" alt="Test" loading="lazy">
            </picture>

            <span class="triangle1"></span>
        </div>
    </section>

    <div class='uhasselt-container'>
        <div class='wrap-case-detail'>
            <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>

            <ul class="social vertical">
                <li><a class="facebook" href="https://www.facebook.com" target="_blank" aria-label="facebook"><span class="icon fab fa-facebook  fa-lg " aria-hidden="true"></span></a></li>
                <li><a class="instagram" href="https://www.instagram.com" target="_blank" aria-label="instagram"><span class="icon fab fa-instagram  fa-lg " aria-hidden="true"></span></a></li>
                <li><a class="twitter" href="https://www.twitter.com" target="_blank" aria-label="twitter"><span class="icon fab fa-twitter  fa-lg " aria-hidden="true"></span></a></li>
                <li><a class="youtube" href="https://www.youtube.com" target="_blank" aria-label="youtube"><span class="icon fab fa-youtube  fa-lg " aria-hidden="true"></span></a></li>
                <li><a class="linkedin" href="https://www.linkedin.com" target="_blank" aria-label="linkedin"><span class="icon fab fa-linkedin  fa-lg " aria-hidden="true"></span></a></li>
            </ul>
        </div>
        <div class='wrap-case-detail-info'>
            <div class='col-span-8 relative'>
                <h3 class="heading contact-title">
                    The quick brown fox jumps over the lazy dog
                </h3>
                <a href="#" class="link back-overview" aria-label="" title="This is what a link looks like">

                    <span class="text">This is what a link looks like</span>

                </a>

            </div>
            <div class='col-span-4'>
                <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>
 
<div class='tpl-article-detail'>
    {{render '@content-header'}}
    <div class='uhasselt-container'>
        <div class='wrap-case-detail'>
            {{render '@heading--h1'}}
            {{render '@paragraph'}}
            {{render '@social--black-vertical'}}
        </div>
        <div class='wrap-case-detail-info'>
            <div class='col-span-8 relative'>
                {{render '@heading--h3' contact-title merge=true}}
                {{render '@link' back-overview merge=true}}
            </div>
            <div class='col-span-4'>{{render '@card-contact'}}</div>
        </div>
    </div>
</div>
 
{
  "contact-title": {
    "modifier": "contact-title"
  },
  "back-overview": {
    "modifier": "back-overview"
  }
}
  • Content: 
    .tpl-article-detail {
    .content-header.hasimage {
        @apply mb-9;
    }

    .content-header .uhasselt-container .column {
        @apply relative;
        @apply py-12;

        &::after {
            @apply absolute hidden lg:block;
            content: url(/assets/img/down-arrow.svg);
            width: 24px;
            height: 192px;
            @apply left-6 md:left-14;
            bottom: 0;
            transform: translateY(calc(100% - 20px));
        }
    }

    .content-header .wrap-image {
        &::after {
            @apply hidden;
        }
    }

    .contact-title {
        @apply text-red;
        @apply font-semibold;
    }

    .wrap-case-detail {
        @apply max-w-6xl mr-auto ml-auto relative;
        @apply p-16 shadow-2xl my-16;

        .social {
            @apply lg:absolute;
            @apply lg:top-1/4;
            @apply lg:-right-16;
            @apply flex-row lg:flex-col;
            @apply items-end;

            li {
                @apply lg:text-center;
                @apply lg:w-12;
                @apply mr-4 lg:mr-0;
                @apply lg:mb-4;

                .resp-sharing-button svg {
                    @apply w-5 lg:w-7;
                    @apply lg:m-auto;
                }
            }

            .social-text {
                @apply text-sm;
            }
        }
    }

    .wrap-case-detail-info {
        @apply grid grid-cols-12 gap-16;
        @apply max-w-6xl my-16;
        @apply mr-auto;
        @apply ml-auto;
    }

    .back-overview {
        @apply absolute;
        @apply bottom-0;

        .icon {
            @apply mr-2;
        }

        .text {
            @apply underline;
        }
    }
}

.tpl-article-detail.has-tags
    .content-header
    .uhasselt-container
    .column::after {
    @apply hidden;
}
  • URL: /components/raw/article-detail/article-detail.css
  • Filesystem Path: src\components\05-templates\article-detail\article-detail.css
  • Size: 1.9 KB

No notes defined.