UHasselt Component Library

Card Contact: Small Btn 

<div class="card card-contact small">
    <div class="contact-wrapper">
        <h2 class="heading title">
            Cynthia van Aubel - van der Veen
        </h2>
        <picture class="picture ">
            <img class="picture-image " src="//placehold.co/100x100" alt="">
        </picture>

    </div>
    <div class="information">
        <div class="info-wrap">
            <div class="contact-label">
                <span class="icon fal fa-home   fa-fw" aria-hidden="true"></span>
                <span class="description">Locatie:</span>
            </div>

            <span>Hasselt</span>
        </div>
        <div class="info-wrap">
            <div class="contact-label">
                <span class="icon fal fa-briefcase   fa-fw" aria-hidden="true"></span>
                <span class="description">Functie:</span>
            </div>
            <span>Coördinator</span>
        </div>
        <div class="info-wrap">
            <div class="contact-label">
                <span class="icon fal fa-envelope   fa-fw" aria-hidden="true"></span>
                <span class="description">E-mail:</span>
            </div>
            <span><a href="mailto:cynthia.vanaubel@uhasselt.be" class="link " aria-label="" title="Cynthia van Aubel - van der Veen">

                    <span class="text">cynthia.vanaubelvanderveen@uhasselt.be</span>

                </a>
            </span>
        </div>
        <div class="info-wrap">
            <div class="contact-label">
                <span class="icon fal fa-phone-alt   fa-fw" aria-hidden="true"></span>
                <span class="description">Telefoon:</span>
            </div>
            <span><a href="tel:003211268173" class="link " aria-label="" title="+32 112 68 173">

                    <span class="text">+32 112 68 173</span>

                </a>
            </span>
        </div>
    </div>
    <div class="btn-wrapper"> <a href="#" class="button button-red ">
            <span>
                <span class="text">
                    Meer weten over Cynthia
                </span>
            </span>
        </a>
    </div>
</div>
 
<div class="card card-contact {{modifier}}">
    <div class="contact-wrapper">
        {{#if heading}}
        {{render '@heading' heading}}
        {{/if}}
        {{#if image}}
        {{render '@image' image}}
        {{/if}}
    </div>
    <div class="information">
        {{#if location}}
        <div class="info-wrap">
            <div class="contact-label">
                {{render '@icon' location.icon}}
                <span class="description">{{location.description}}</span>
            </div>
            
            <span>{{location.text}}</span>
        </div>
        {{/if}}
        {{#if function}}
        <div class="info-wrap">
            <div class="contact-label">
                {{render '@icon' function.icon}}
                 <span class="description">{{function.description}}</span>
            </div>
            <span>{{function.text}}</span>
        </div>
        {{/if}}
        {{#if email}}
        <div class="info-wrap">
            <div class="contact-label">
                {{render '@icon' email.icon}}
                <span class="description">{{email.description}}</span>
            </div>
            <span>{{render '@link' @root.email}}</span>
        </div>
        {{/if}}
        {{#if phone}}
        <div class="info-wrap">
            <div class="contact-label">
                {{render '@icon' phone.icon}}
                <span class="description">{{phone.description}}</span>
            </div>
            <span>{{render '@link' @root.phone}}</span>
        </div>
        {{/if}}
    </div>
    {{#if cta}}
    <div class="btn-wrapper">{{render '@button' cta}}</div>
    {{/if}}
</div>
 
{
  "modifier": "small",
  "heading": {
    "tag": "h2",
    "text": "Cynthia van Aubel - van der Veen",
    "modifier": "title"
  },
  "image": {
    "src": "//placehold.co/100x100"
  },
  "location": {
    "icon": {
      "style": "fal",
      "modifier": "fa-fw",
      "icon": "fa-home"
    },
    "text": "Hasselt",
    "description": "Locatie:"
  },
  "function": {
    "icon": {
      "style": "fal",
      "modifier": "fa-fw",
      "icon": "fa-briefcase"
    },
    "text": "Coördinator",
    "description": "Functie:"
  },
  "email": {
    "icon": {
      "style": "fal",
      "modifier": "fa-fw",
      "icon": "fa-envelope"
    },
    "href": "mailto:cynthia.vanaubel@uhasselt.be",
    "title": "Cynthia van Aubel - van der Veen",
    "text": "cynthia.vanaubelvanderveen@uhasselt.be",
    "description": "E-mail:"
  },
  "phone": {
    "icon": {
      "style": "fal",
      "modifier": "fa-fw",
      "icon": "fa-phone-alt"
    },
    "href": "tel:003211268173",
    "title": "+32 112 68 173",
    "text": "+32 112 68 173",
    "description": "Telefoon:"
  },
  "cta": {
    "text": "Meer weten over Cynthia",
    "element": "a",
    "type": "",
    "title": "",
    "target": "",
    "href": "#",
    "id": "",
    "icon": false,
    "modifier": "red"
  }
}
  • Content: 
    .card-contact {
    @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 sm:w-1/2 text-red;
        }

        .picture {
            @apply order-1 md:order-2 ml-8 md:mr-8 mb-8 md:mb-0;
            width: 100px;
            height: 100px;
        }
    }

    .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;
            }
        }
    }

    &.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;
            }
        }
    }

    &.small {
        .contact-wrapper {
            @screen md {
                flex-direction: row;
            }

            .title {
                margin-bottom: 0;
            }

            .picture {
                @screen md {
                    order: 2;
                    flex-shrink: 0;
                    margin-right: 2rem;
                    margin-bottom: 0;
                    margin-left: 2rem;
                }
            }
        }
        .info-wrap {
            flex-direction: row;
        }
    }
}
  • URL: /components/raw/card-contact/card-contact.css
  • Filesystem Path: src\components\03-molecules\card-contact\card-contact.css
  • Size: 1.7 KB

No notes defined.