ETR Component Library

image-text-group 

<div class="image-text-group">
    <div class="image-text__outer mb-16">
        <div class="image-text py-20 border-solid border-b border-gray-light" data-aos="fade-up">
            <div class="image-text__inner mx-auto relative md:-mx-8 md:flex md:items-stretch md:space-between">
                <div class="image-text__image md:w-1/2 md:px-8 h-auto md:flex md:items-center">
                    <img src="https://images.unsplash.com/photo-1483736762161-1d107f3c78e1?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1567&amp;q&#x3D;80" alt="image caption" class="w-full">
                </div>
                <div class="image-text__text md:w-1/2 md:px-8 md:flex md:items-center">
                    <div class="image-text__text__inner py-4 md:py-0 md:pt-0 md:pb-0">
                        <h2 class="font-bold text-gray-darkest text-2xl sm:text-3xl md:text-4xl leading-tight">
                            <a href="#" class="hover:text-primary-light transition">
                          The World’s Most Beautiful Libraries
                          </a>
                        </h2>
                        <p class="mt-4 text-gray-darkest text-sm md:text-base leading-normal">The Stadtbibliothek Stuttgart is the public library of the city of Stuttgart. It is organized as a department of the city&#x27;s cultural office and comprises the central library, 17 city district libraries, and two bookmobiles.
                            In 2013, it received the national award as Library of the Year.</p>
                        <a href="#" class="inline-block mt-6 text-primary hover:text-primary-light transition text-sm md:text-base font-bold leading-tight tracking-wider uppercase">
                        Learn More
                      </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="image-text__outer mb-16">
        <div class="image-text py-20 border-solid border-b border-gray-light" data-aos="fade-up">
            <div class="image-text__inner mx-auto relative md:-mx-8 md:flex md:items-stretch md:space-between">
                <div class="image-text__image md:w-1/2 md:px-8 h-auto md:flex md:items-center">
                    <img src="https://images.unsplash.com/photo-1483736762161-1d107f3c78e1?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1567&amp;q&#x3D;80" alt="image caption" class="w-full">
                </div>
                <div class="image-text__text md:w-1/2 md:px-8 md:flex md:items-center">
                    <div class="image-text__text__inner py-4 md:py-0 md:pt-0 md:pb-0">
                        <h2 class="font-bold text-gray-darkest text-2xl sm:text-3xl md:text-4xl leading-tight">
                            <a href="#" class="hover:text-primary-light transition">
                          The World’s Most Beautiful Libraries
                          </a>
                        </h2>
                        <p class="mt-4 text-gray-darkest text-sm md:text-base leading-normal">The Stadtbibliothek Stuttgart is the public library of the city of Stuttgart. It is organized as a department of the city&#x27;s cultural office and comprises the central library, 17 city district libraries, and two bookmobiles.
                            In 2013, it received the national award as Library of the Year.</p>
                        <a href="#" class="inline-block mt-6 text-primary hover:text-primary-light transition text-sm md:text-base font-bold leading-tight tracking-wider uppercase">
                        Learn More
                      </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="image-text-group">
  {{#each imageText }}
    <div class="image-text__outer mb-16">
      {{> @image-text }}
    </div>
  {{/each}}
</div>
 
{
  "imageText": [
    {
      "image": {
        "source": "https://images.unsplash.com/photo-1483736762161-1d107f3c78e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80",
        "alt": "image caption"
      },
      "heading": "The World’s Most Beautiful Libraries",
      "copy": "The Stadtbibliothek Stuttgart is the public library of the city of Stuttgart. It is organized as a department of the city's cultural office and comprises the central library, 17 city district libraries, and two bookmobiles. In 2013, it received the national award as Library of the Year.",
      "link": {
        "url": "#",
        "text": "Learn More"
      },
      "animation": {
        "type": "fade-up"
      }
    },
    {
      "image": {
        "source": "https://images.unsplash.com/photo-1483736762161-1d107f3c78e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80",
        "alt": "image caption"
      },
      "heading": "The World’s Most Beautiful Libraries",
      "copy": "The Stadtbibliothek Stuttgart is the public library of the city of Stuttgart. It is organized as a department of the city's cultural office and comprises the central library, 17 city district libraries, and two bookmobiles. In 2013, it received the national award as Library of the Year.",
      "link": {
        "url": "#",
        "text": "Learn More"
      },
      "animation": {
        "type": "fade-up"
      }
    }
  ]
}
  • Content: 
    .image-text-group {
  .image-text__outer {
    &:nth-child(even) {
      .image-text__inner {
        @apply flex-row-reverse;
      }
    }
  }
}
  • URL: /components/raw/image-text-group/image-text-group.scss
  • Filesystem Path: components/05-layout-components/image-text-group/image-text-group.scss
  • Size: 147 Bytes

There are no notes for this item.