UHasselt Component Library

Quote 

<div class="quote">
    <div class="quote-inner">
        <div class="text h3">Het is een erkenning voor ons onderzoeksteam dat zich al jaren inzet om de effecten van omgevingsfactoren op onze gezondheid in kaart te brengen.</div>
        <div class="person h4">Prof. dr. Tim Nawrot</div>
    </div>
    <span class="icon fas fa-quote-right   " aria-hidden="true"></span>
</div>
 
<div class="quote">
    <div class="quote-inner">
        <div class="text h3">{{text}}</div>
        <div class="person h4">{{person}}</div>
    </div>
    {{ render '@icon' icon }}
</div>
 
{
  "text": "Het is een erkenning voor ons onderzoeksteam dat zich al jaren inzet om de effecten van omgevingsfactoren op onze gezondheid in kaart te brengen.",
  "person": "Prof. dr. Tim Nawrot",
  "icon": {
    "style": "fas",
    "icon": "fa-quote-right"
  }
}
  • Content: 
    .quote
{
    @apply relative text-center;

    .quote-inner
    {
        @apply relative p-8 z-10 bg-red-100 bg-opacity-30;

        .text
        {
            @apply mb-8;
        }

        .person
        {
            @apply text-red;
        }
    }

    .icon
    {
        @apply absolute text-red-100 text-opacity-30 bottom-0 left-1/2 transform -translate-x-1/2;
        font-size: 120px;
    }
}
  • URL: /components/raw/quote/quote.css
  • Filesystem Path: src\components\03-molecules\quote\quote.css
  • Size: 432 Bytes

No notes defined.