UHasselt Component Library

Personal info 

<div class='personal-info'>
    <div class='personal-info-head'>
        <span class="icon far fa-heart   " aria-hidden="true"></span>
        <p class='personal-info-head-title'>Andries Ghesquiere</p>
    </div>
    <p class='personal-info-paragraph'>Is vandaag 47 jaar geworden</p>
</div>
 
<div class='personal-info'>
    <div class='personal-info-head'>
        {{render '@icon' icon}}
        <p class='personal-info-head-title'>{{name}}</p>
    </div>
    <p class='personal-info-paragraph'>{{text}}</p>
</div>
 
{
  "icon": {
    "style": "far",
    "icon": "fa-heart"
  },
  "name": "Andries Ghesquiere",
  "text": "Is vandaag 47 jaar geworden"
}
  • Content: 
    .personal-info {
    .personal-info-head {
        @apply text-red;

        display: flex;
        align-items: center;
        font-size: 20px;
        font-weight: 600;

        .personal-info-head-title {
            margin-left: 8px;
        }
    }

    .personal-info-paragraph {
        font-size: 20px;
        font-weight: 400;

        margin-top: 4px;
    }
}
  • URL: /components/raw/personal-info/personal-info.css
  • Filesystem Path: src\components\03-molecules\personal-info\personal-info.css
  • Size: 393 Bytes

No notes defined.