UHasselt Component Library

Personal Info List 

<div class='personal-info-list'>
    <div class='personal-info-list-heading'>
        <div class='personal-info-list-heading-icon'>
            <span class="icon fas fa-user-alt   " aria-hidden="true"></span>
        </div>

        <div class='personal-info-list-heading-h3'>
            <h3 class="heading ">
                The quick brown fox jumps over the lazy dog
            </h3>
        </div>
    </div>

    <div class='personal-info-list-item'>
        <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>
    <div class='personal-info-list-item'>
        <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>
    <div class='personal-info-list-item'>
        <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>
    <div class='personal-info-list-item'>
        <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>
    <div class='personal-info-list-item'>
        <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>
    <div class='personal-info-list-item'>
        <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>
</div>
 
<div class='personal-info-list'>
    <div class='personal-info-list-heading'>
        <div class='personal-info-list-heading-icon'>
            {{render '@icon' icon}}
        </div>

        <div class='personal-info-list-heading-h3'>
            {{render '@heading--h3'}}
        </div>
    </div>

    {{#each personal-info-cards}}
        <div class='personal-info-list-item'>
            {{render '@personal-info'}}
        </div>
    {{/each}}
</div>
 
{
  "personal-info-cards": [
    {},
    {},
    {},
    {},
    {},
    {}
  ],
  "icon": {
    "style": "fas",
    "icon": "fa-user-alt"
  }
}
  • Content: 
    .personal-info-list {
    .personal-info-list-heading {
        display: flex;
        align-items: center;
        padding-bottom: 24px;

        border-bottom: 1px solid #e3e3e3;

        .personal-info-list-heading-icon {
            @apply text-red;
        }

        .personal-info-list-heading-h3 {
            margin-left: 16px;

            .heading {
                margin: 0;
            }
        }
    }

    .personal-info-list-item {
        margin: 24px 0;
    }
}
  • URL: /components/raw/personal-info-list/personal-info-list.css
  • Filesystem Path: src\components\04-organisms\personal-info-list\personal-info-list.css
  • Size: 507 Bytes

No notes defined.