UHasselt Component Library

Contact Block 

<section class='contact-block'>
    <div class='uhasselt-container'>
        <div class='lg:grid lg:grid-cols-2'>
            <div class='column'>
                <h1 class="heading ">
                    Campus Hasselt
                </h1>
                <div class='info-wrap'>
                    <div class='col'>
                        <span>
                            <span class="icon fal fa-phone-alt   " aria-hidden="true"></span>
                            <strong>
                                Tel:
                            </strong>
                        </span>
                        <span class=''>
                            <a href="tel:+32 11 26 81 11" class="link " aria-label="" title="Bellen naar +32 11 26 81 11">

                                <span class="text">+32 11 26 81 11</span>

                            </a>

                        </span>
                        <span>
                            <span class="icon fal fa-map-marker-alt   " aria-hidden="true"></span>
                            <strong>
                                Adres:
                            </strong>
                        </span>
                        <div class='address-wrap'>
                            <p>
                                Martelarenlaan 42
                            </p>
                            <p>
                                3500
                            </p>
                            <p>
                                Hasselt
                            </p>
                            <a href="#" class="link " aria-label="" title="Ga naar Bereikbaarheid + parking">

                                <span class="text">Wegbeschrijving: Bereikbaarheid + parking</span>

                            </a>

                        </div>
                        <span>
                            <span class="icon fal fa-home   " aria-hidden="true"></span>
                            <strong>
                                Openingstijden
                            </strong>
                        </span>
                        <span class=''>
                            Het onthaal is open van:</br>ma-do: 8.00 tot 17.30 u</br>vrij: 8.00 tot 16.30 u
                        </span>
                    </div>
                </div>
            </div>
            <div class='column'>
                <div class="map">
                    <iframe loading="lazy" allowfullscreen src="https://www.google.com/maps/embed/v1/place?key=AIzaSyA8wRAA9JABYaZ7DeWm5QW27XcD9eXcs90&q=UHasselt, Hasselt">
                    </iframe>
                </div>
            </div>
        </div>
    </div>
</section>
 
<section class='contact-block'>
    <div class='uhasselt-container'>
        <div class='lg:grid lg:grid-cols-2'>
            <div class='column'>
                {{render '@heading' heading merge=true}}
                <div class='info-wrap'>
                    <div class='col'>
                        <span>
                            {{render '@icon' icon-phone}}
                            <strong>
                                {{label-phone}}
                            </strong>
                        </span>
                        <span class=''>
                            {{render '@link' text-phone merge=true}}
                        </span>
                        <span>
                            {{render '@icon' icon-address}}
                            <strong>
                                {{label-address}}
                            </strong>
                        </span>
                        <div class='address-wrap'>
                            <p>
                                {{{text-street}}}
                            </p>
                            <p>
                                {{{text-postalcode}}}
                            </p>
                            <p>
                                {{{text-city}}}
                            </p>
                            {{render '@link' text-address-link merge=true}}
                        </div>
                        <span>
                            {{render '@icon' icon-time}}
                            <strong>
                                {{label-time}}
                            </strong>
                        </span>
                        <span class=''>
                            {{{text-time}}}
                        </span>
                    </div>
                </div>
            </div>
            <div class='column'>
                {{render '@map'}}
            </div>
        </div>
    </div>
</section>
 
{
  "heading": {
    "text": "Campus Hasselt"
  },
  "text-phone": {
    "href": "tel:+32 11 26 81 11",
    "title": "Bellen naar +32 11 26 81 11",
    "text": "+32 11 26 81 11"
  },
  "text-street": "Martelarenlaan 42",
  "text-postalcode": "3500",
  "text-city": "Hasselt",
  "text-address-link": {
    "href": "#",
    "title": "Ga naar Bereikbaarheid + parking",
    "text": "Wegbeschrijving: Bereikbaarheid + parking"
  },
  "text-time": "Het onthaal is open van:</br>ma-do: 8.00 tot 17.30 u</br>vrij: 8.00 tot 16.30 u",
  "label-phone": "Tel:",
  "label-address": "Adres:",
  "label-time": "Openingstijden",
  "icon-phone": {
    "icon": "fa-phone-alt",
    "style": "fal"
  },
  "icon-address": {
    "icon": "fa-map-marker-alt",
    "style": "fal"
  },
  "icon-time": {
    "icon": "fa-home",
    "style": "fal"
  }
}
  • Content: 
    .contact-block {
    @apply mb-16;

    .column {
        @apply mb-4 md:mb-0;
        @apply md:p-8;

        .heading {
            @apply mb-8;
        }

        .info-wrap {
            @apply grid grid-cols-1;

            a {
                @apply text-red underline;
            }

            .col {
                @apply grid grid-cols-1 gap-2 md:gap-6;
                @apply mb-3;

                @screen md {
                    grid-template-columns: auto 1fr;
                }

                .icon {
                    @apply w-7 leading-6;
                }

                strong {
                    @apply font-semibold;
                }
            }

            .address-wrap {
                @apply grid;
                @apply grid-cols-1;
            }
        }
    }
}
  • URL: /components/raw/contact-block/contact-block.css
  • Filesystem Path: src\components\04-organisms\contact-block\contact-block.css
  • Size: 849 Bytes

No notes defined.