UHasselt Component Library

Travel Info 

<div class="travel-info">
    <h2 class="heading text-red">
        Waar heb je les?
    </h2>
    <div class="grid grid-cols-2 gap-8">
        <div class="flex flex-col">
            <div>
                <div class='paragraph '>Aenean tempus placerat sem, in finibus nunc. Vivamus ac magna vel diam.</div>

            </div>
            <div class="flex-1">
                <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>
            <div class="card card-">
                <div class="card-container js--clickable">

                    <div class="card-wrapper">
                        <picture class="picture ">
                            <img class="picture-image " src="//placehold.co/480x264" alt="">
                        </picture>

                    </div>

                    <div class="heading-container">
                        <h2 class="heading title">
                            Campus Hasselt
                        </h2>

                    </div>

                    <div class="information">

                        <div class="info-row">
                            <div><span class="icon fal fa-map-marker-alt   fa-fw" aria-hidden="true"></span></div>
                            <span class="text">Campus Diepenbeek - gebouw D</span>
                        </div>

                        <div class="info-row">
                            <div><span class="icon fal fa-phone   fa-fw" aria-hidden="true"></span></div>
                            <span class="text"><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-black ">
                            <span>
                                <span class="icon fal fa-envelope   " aria-hidden="true"></span>
                                <span class="text">
                                    Meer info
                                </span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="travel-info">
    {{render '@heading--h2' heading merge=true}}
    <div class="grid grid-cols-2 gap-8">
        <div class="flex flex-col">
            <div>
                {{render '@paragraph' paragraph merge=true}}
            </div>
            <div class="flex-1">
                {{render '@map' map merge=true}}
            </div>
        </div>
        <div>
            {{render '@card' card merge=true}}
        </div>
    </div>
</div>
 
{
  "heading": {
    "modifier": "text-red",
    "text": "Waar heb je les?"
  },
  "paragraph": {
    "text": "Aenean tempus placerat sem, in finibus nunc. Vivamus ac magna vel diam."
  },
  "map": {},
  "card": {
    "modifier": "",
    "date-block": false,
    "heading": {
      "tag": "h2",
      "text": "Campus Hasselt",
      "modifier": "title"
    },
    "image": {
      "src": "//placehold.co/480x264"
    },
    "time": null,
    "date": null,
    "cta": {
      "text": "Meer info"
    },
    "quote": false,
    "no-media": false,
    "phone": {
      "icon": {
        "style": "fal",
        "icon": "fa-phone"
      },
      "text": "<a href=\"tel:0613246578\">0613246578</a>"
    }
  }
}
  • Content: 
    .travel-info
{
    .heading
    {
        @apply mb-6;
    }

    .paragraph
    {
        @apply mb-6;
    }

    .phone-link a
    {
        @apply text-red;
    }
}
  • URL: /components/raw/travel-info/travel-info.css
  • Filesystem Path: src\components\04-organisms\travel-info\travel-info.css
  • Size: 183 Bytes

No notes defined.