UHasselt Component Library

Figures Facts 

<section class="org-figures-facts">
    <div class="uhasselt-container">
        <div class="wrapper">
            <div class="column">
                <h1 class="heading ">
                    Some facts and figures
                </h1>
                <div class='paragraph paragraph-intro'>Hasselt University is an innovative university which has a pronounced international orientation. It stands for excellence in education, top research in spearhead fields and active commitment to innovation and entrepreneurship. This is reflected by its ranking amongst the best 10% universities worldwide in U-Multirank 2019.</div>

            </div>
            <div class="column lg:col-span-2">
                <div class="ranked-wrap">
                    <div class="ranked">
                        <picture class="picture ">
                            <img class="picture-image " src="https://placehold.co/100x100" alt="">
                        </picture>

                        <h3><span class="icon fas fa-trophy   " aria-hidden="true"></span>Ranked 65th</h3>
                        <p>Hasselt University is ranked 65th in the Times Higher Education-ranking of universities younger than 50 years.</p>
                    </div>

                    <div class="ranked">
                        <picture class="picture ">
                            <img class="picture-image " src="https://placehold.co/100x100" alt="">
                        </picture>

                        <h3><span class="icon fas fa-trophy   " aria-hidden="true"></span>Ranked 65th</h3>
                        <p>Hasselt University is ranked 65th in the Times Higher Education-ranking of universities younger than 50 years.</p>
                    </div>

                </div>
                <div class="link-wrap">
                    <a href="#" class="link " aria-label="" title="This is what a link looks like">

                        <span class="text">More information about facts and figures</span>

                    </a>

                </div>
            </div>
        </div>
    </div>
</section>
 
<section class="org-figures-facts">
    <div class="uhasselt-container">
        <div class="wrapper">
            <div class="column">
                {{ render '@heading' heading merge=true }}
                {{ render '@paragraph--intro' paragraph merge=true }}
            </div>
            <div class="column lg:col-span-2">
                <div class="ranked-wrap">
                    {{ render '@ranked' }}
                    {{ render '@ranked' }}
                </div>
                <div class="link-wrap">
                    {{ render '@link' link merge=true}}
                </div>
            </div>
        </div>
    </div>
</section>
 
{
  "heading": {
    "text": "Some facts and figures"
  },
  "paragraph": {
    "text": "Hasselt University is an innovative university which has a pronounced international orientation. It stands for excellence in education, top research in spearhead fields and active commitment to innovation and entrepreneurship. This is reflected by its ranking amongst the best 10% universities worldwide in U-Multirank 2019."
  },
  "link": {
    "text": "More information about facts and figures"
  }
}
  • Content: 
    .org-figures-facts {
    @apply flex;
    @apply justify-center;
    @apply pt-12;
    @apply pb-40;
    @apply md:pb-56;
    @apply px-8;
    @apply relative;

    &:not(.no-margins) {
        @apply mb-16;
    }

    &:after {
        content: '';
        background: url(/assets/img/bg-figures-facts.svg) no-repeat bottom;
        @apply absolute;
        @apply bottom-0;
        @apply w-full;
        @apply h-screen;
        @apply z-0;
    }

    .wrapper {
        @apply grid;
        @apply gap-8;
        @apply md:gap-4;
        @apply md:grid-rows-none;
        @apply md:grid-cols-2;
        @apply md:gap-16;
        @apply lg:grid-cols-3;
        @apply relative;
        @apply z-10;

        .column {
            .heading {
                @apply mb-8;
            }

            .ranked-wrap {
                @apply grid;
                @apply grid-rows-2;
                @apply gap-8;
                @apply lg:grid-rows-none;
                @apply lg:grid-cols-2;
                @apply mb-8;
            }

            .link-wrap {
                @apply w-full;
                @apply md:text-right;

                .link {
                    @apply underline;
                }
            }
        }
    }
}
  • URL: /components/raw/figures-facts/figures-facts.css
  • Filesystem Path: src\components\04-organisms\figures-facts\figures-facts.css
  • Size: 1.3 KB

No notes defined.