UHasselt Component Library

Ranked 

<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">
    {{render '@image' image}}
    <h3>{{render '@icon' icon}}{{title}}</h3>
    <p>{{text}}</p>
</div>
 
{
  "icon": {
    "style": "fas",
    "icon": "fa-trophy"
  },
  "title": "Ranked 65th",
  "text": "Hasselt University is ranked 65th in the Times Higher Education-ranking of universities younger than 50 years.",
  "image": {
    "src": "https://placehold.co/100x100"
  }
}
  • Content: 
    .ranked {
    @apply relative p-6 shadow-2xl mt-12;

    h3 {
        @apply mb-4 mr-24;

        .icon {
            @apply mr-4;
        }
    }

    .picture {
        @apply absolute -top-12 right-8;
        clip-path: circle(50%);
    }
}
  • URL: /components/raw/ranked/ranked.css
  • Filesystem Path: src\components\03-molecules\ranked\ranked.css
  • Size: 260 Bytes

No notes defined.