Web Components Library

Single Feature Split Left - Light

No notes defined.

  • Handle: @mtl-single-feature-split-left-light
  • Preview:
  • Filesystem Path: components/10-projects/mountaineer/02-modules/single-feature-split-left-light.hbs
  • Referenced by (1): @mtl-homepage 
<div class="flex flex-col sm:flex-row">

    <div class="w-full sm:w-1/2 flex flex-col justify-center p-2">

        <div class="border px-12 py-20">

            <h2 class="font-mtl-heading text-4xl uppercase text-cyan">
                Ready for Your Lake Louise Adventure?
            </h2>

            <p class="mt-4 text-gray-600 text-lg">
                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-cyan uppercase border border-cyan 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 class="w-full sm:w-1/2 relative">
        <img class="sm:absolute sm:inset-0 object-cover h-full w-full" src="/dist/images/temp/lake-louise-winter.jpg" alt="">
    </div>

</div>
 
{{!--{# Homepage Intro #}--}}
<div class="flex flex-col sm:flex-row">

    <div class="w-full sm:w-1/2 flex flex-col justify-center p-2">

        <div class="border px-12 py-20">

            <h2 class="font-mtl-heading text-4xl uppercase text-cyan">
                {{ heading }}
            </h2>

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

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

    </div>

    <div class="w-full sm:w-1/2 relative">
        <img class="sm:absolute sm:inset-0 object-cover h-full w-full"
             src="{{ image }}"
             alt=""
        >
    </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/lake-louise-winter.jpg"
}