Web Components Library

Hero Ratio Image

No notes defined.

  • Handle: @hero-ratio-image
  • Preview:
  • Filesystem Path: components/02-components/hero-section/hero-ratio-image.hbs 
<div class="relative bg-black pb-full sm:pb-2/3 lg:pb-1/2">

     <img class="absolute h-full w-full object-cover" src="https://source.unsplash.com/random/2000x900" alt="">

     <div class="absolute bottom-0 left-0 right-0 py-6 bg-white bg-opacity-60 flex flex-col items-center justify-center">
         <p class="">TEXT thIS iS</p>
         <p class="text-sm">Subheading</p>
     </div>
 </div>
 
<div class="relative bg-black pb-full sm:pb-2/3 lg:pb-1/2">

        <img class="absolute h-full w-full object-cover" src="https://source.unsplash.com/random/2000x900" alt="">

{{!-- <div style="background: linear-gradient(180deg, rgba(2,0,36,0) 0%, rgba(0,0,0,0.6) 100%, rgba(0,212,255,1) 100%);" class=" absolute left-0 right-0 bottom-0 h-56"></div> --}}

    <div class="absolute bottom-0 left-0 right-0 py-6 bg-white bg-opacity-60 flex flex-col items-center justify-center">
        <p class="">TEXT thIS iS</p>
        <p class="text-sm">Subheading</p>
    </div>
</div>
 
/* No context defined. */