Web Components Library

Single Feature Split Right - Dark

No notes defined.

<div class="flex flex-col sm:flex-row h-full w-full">

    <div class="w-full sm:w-1/3 md:w-1/2 relative">
        <img class="sm:absolute sm:inset-0 object-cover h-full w-full" src="/dist/images/temp/MountaineerLodge_DEC-8-Large.jpeg" alt="">
    </div>

    <div class="w-full sm:w-2/3 md:w-1/2 flex flex-col justify-center p-2 bg-cyan h-full">

        <div class="border px-8 py-8 sm:py-20 flex flex-col justify-center flex-grow">

            <h2 class="font-mtl-heading text-2xl sm:text-3xl md:text-4xl uppercase text-white">
                Ready for Your Lake Louise Adventure?
            </h2>

            <p class="mt-4 text-lg text-white">
                Mountaineer Lodge is the place to stay in Lake Louise for mountain adventurers and relaxation artists.
            </p>

            <p class="mt-6">
                <a class="inline-block py-2.5 px-3.5 text-white uppercase border border-white hover:bg-gray-900 hover:text-white focus:bg-gray-800 focus:outline-none focus:shadow-outline" href="">
                    Tour the Hotel
                </a>
            </p>
        </div>

    </div>

</div>
 
{{!--{# Homepage content carousel #}--}}

<div class="flex flex-col sm:flex-row h-full w-full">

    <div class="w-full sm:w-1/3 md:w-1/2 relative">
        <img class="sm:absolute sm:inset-0 object-cover h-full w-full"
             src="/dist/images/temp/MountaineerLodge_DEC-8-Large.jpeg"
             alt=""
        >
    </div>

    <div class="w-full sm:w-2/3 md:w-1/2 flex flex-col justify-center p-2 bg-cyan h-full">

        <div class="border px-8 py-8 sm:py-20 flex flex-col justify-center flex-grow">

            <h2 class="font-mtl-heading text-2xl sm:text-3xl md:text-4xl uppercase text-white">
              {{ heading }}
            </h2>

            <p class="mt-4 text-lg text-white">
              {{ text }}
            </p>

            <p class="mt-6">
                <a class="inline-block py-2.5 px-3.5 text-white uppercase border border-white hover:bg-gray-900 hover:text-white focus:bg-gray-800 focus:outline-none focus:shadow-outline"
                   href=""
                >
                  {{ buttonText }}
                </a>
            </p>
        </div>

    </div>

</div>
 
{
  "heading": "Ready for Your Lake Louise Adventure?",
  "text": "Mountaineer Lodge is the place to stay in Lake Louise for mountain adventurers and relaxation artists.",
  "buttonText": "Tour the Hotel",
  "image": "/dist/images/temp/MountaineerLodge_DEC-8-Large.jpeg"
}