UHasselt Component Library

Card Contact 

<div class="card card-social ">
    <div class="contact-wrapper">
        <h2 class="heading title">
            Volgen op
        </h2>
    </div>
    <div class="information">
        <div class="linkedin"><a href="#" class="link " aria-label="" title="This is what a link looks like">

                <span class="text">LinkedIn</span>

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

                <span class="text">Twitter</span>

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

                <span class="text">Orcid</span>

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

                <span class="text">Researcherid</span>

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

                <span class="text">ResearchGate</span>

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

                <span class="text">Google Scholar</span>

            </a>
        </div>
    </div>
</div>
 
<div class="card card-social {{modifier}}">
    <div class="contact-wrapper">
        {{#if heading}}
        {{render '@heading' heading}}
        {{/if}}
    </div>
    <div class="information">
       {{#if wiw-nav-social/linkedin}}<div class="linkedin">{{render '@link' wiw-nav-social/linkedin merge=true}}</div>{{/if}}
            {{#if wiw-nav-social/twitter}}<div class="twitter">{{render '@link' wiw-nav-social/twitter merge=true}}</div>{{/if}}
            {{#if wiw-nav-social/orcid}}<div class="orcid">{{render '@link' wiw-nav-social/orcid merge=true}}</div>{{/if}}
            {{#if wiw-nav-social/researcherid}}<div class="researcherid">{{render '@link' wiw-nav-social/researcherid merge=true}}</div>{{/if}}
            {{#if wiw-nav-social/researchgate}}<div class="researchgate">{{render '@link' wiw-nav-social/researchgate merge=true}}</div>{{/if}}
            {{#if wiw-nav-social/googlescholar}}<div class="googlescholar">{{render '@link' wiw-nav-social/googlescholar merge=true}}</div>{{/if}}
    </div>
</div>
 
{
  "modifier": "",
  "heading": {
    "tag": "h2",
    "text": "Volgen op",
    "modifier": "title"
  },
  "wiw-nav-social": {
    "heading": {
      "text": "Volgen op"
    },
    "linkedin": {
      "text": "LinkedIn"
    },
    "twitter": {
      "text": "Twitter"
    },
    "orcid": {
      "text": "Orcid"
    },
    "researcherid": {
      "text": "Researcherid"
    },
    "researchgate": {
      "text": "ResearchGate"
    },
    "googlescholar": {
      "text": "Google Scholar"
    }
  }
}
  • Content: 
    .card-social {
    @apply pt-8 bg-white shadow-2xl;

    .contact-wrapper {
        @apply flex flex-col xl:flex-row justify-between mb-4;

        .title {
            @apply order-2 md:order-1 md:mb-4;
        }
    }

    .information {
        .info-wrap {
            @apply flex flex-col mb-2;

            .contact-label {
                @apply font-bold flex;
                width: 125px;

                .icon {
                    @apply mr-3 mt-1;
                }

                span.description {
                    width: 200px;
                }
            }

            span {
                overflow-wrap: anywhere;
            }
        }

        div {
            &::before {
                content: url(/assets/img/link-solid.svg);
                @apply w-[24px] h-[24px] mr-2;
            }
        }

        .linkedin {
            &::before {
                content: url(/assets/img/linkedin_icon.svg);
                @apply w-[24px] h-[24px] mr-2;
            }
        }
        .twitter {
            &::before {
                content: url(/assets/img/twitter_icon.svg);
                @apply w-[24px] h-[24px] mr-2;
            }
        }
        .orcid {
            &::before {
                content: url(/assets/img/orcid_icon.svg);
                @apply w-[24px] h-[24px] mr-2;
            }
        }
        .researcherid {
            &::before {
                content: url(/assets/img/researcherid_icon.svg);
                @apply w-[24px] h-[24px] mr-2;
            }
        }
        .researchgate {
            &::before {
                content: url(/assets/img/researchgate_icon.svg);
                @apply w-[24px] h-[24px] mr-2;
            }
        }
        .googlescholar {
            &::before {
                content: url(/assets/img/google_scholar_icon.svg);
                @apply w-[24px] h-[24px] mr-2;
            }
        }
    }

    &.large-image {
        .contact-wrapper {
            @apply flex-col md:flex-col;

            .title {
                @apply order-2;
            }

            .picture {
                @apply order-1 w-full h-auto -mt-8 mx-0 mb-6;
            }
        }
    }
}
  • URL: /components/raw/card-social/card-social.css
  • Filesystem Path: src\components\03-molecules\card-social\card-social.css
  • Size: 2.3 KB

No notes defined.