ETR Component Library

card: Horizontal Reverse 

<div class="card card--horizontal-reverse flex flex-row-reverse mb-16 md:mb-12 w-full">
    <div class="card__image mb-4 md:mb-0 w-1/3 ml-6 md:h-auto">
        <figure class="m-0 w-full">
            <img class="w-full" 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="">
            <figcaption class="media-caption text-gray-darkest leading-tight text-sm mt-2">
                <span class="text-gray-dark text-2xs md:text-xs tracking-wide md:tracking-normal leading-none">Photographer Name</span>
                <span class="text-gray-dark text-2xs md:text-xs tracking-wide md:tracking-normal leading-none">/ Stock Image Company</span>
            </figcaption>
        </figure>
    </div>
    <div class="card__content w-2/3">
        <div class="card-content">
            <div class="label font-bold text-2xs md:text-xs text-gray-darker uppercase leading-tight tracking-wider">Architecture</div>
            <a href="#" class="card-content__heading-link">
                <h2 class="heading font-bold text-xl md:text-2xl text-black leading-tight mt-3">The World’s Most Beautiful Libraries</h2>
                <h3 class="subheading font-normal text-gray-darkest text-base md:text-lg leading-tight mt-3">The Stadtbibliothek Stuttgart is the public library of the city of Stuttgart.</h3>
            </a>
            <p class="description text-gray-darkest text-sm md:text-base leading-normal mt-3">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>
            <div class="mt-4">
                <ul class="comma-separated-list list-reset">
                    <li class="author inline text-gray-dark text-xs md:text-sm tracking-wide md:tracking-normal">Emily Dickinson</li>
                    <li class="author inline text-gray-dark text-xs md:text-sm tracking-wide md:tracking-normal">Walt Wiltman</li>
                    <li class="author inline text-gray-dark text-xs md:text-sm tracking-wide md:tracking-normal">Virginia Woolf</li>
                </ul>
            </div>
            <time class="date text-gray-dark text-base mt-4 block tracking-wide md:tracking-normal">  March 7, 2020</time>

        </div>
    </div>
</div>
 
<div class="card card--horizontal-reverse flex flex-row-reverse mb-16 md:mb-12 w-full">
  {{#if image}}
    <div class="card__image mb-4 md:mb-0 w-1/3 ml-6 md:h-auto">
      {{#with image}}
        {{> @image}}
      {{/with}}
    </div>
  {{/if}}
  <div class="card__content w-2/3">
    {{> @card-content}}
  </div>
</div>
 
{
  "link": {
    "url": "#"
  },
  "image": {
    "source": "https://images.unsplash.com/photo-1483736762161-1d107f3c78e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80",
    "caption": {
      "caption": null,
      "credit": "Stock Image Company",
      "photographer": "Photographer Name"
    }
  },
  "label": "Architecture",
  "heading": "The World’s Most Beautiful Libraries",
  "subheading": "The Stadtbibliothek Stuttgart is the public library of the city of Stuttgart.",
  "description": "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.",
  "author": [
    "Emily Dickinson",
    "Walt Wiltman",
    "Virginia Woolf"
  ],
  "date": {
    "month": "March",
    "day": "7",
    "year": "2020"
  },
  "modifier": "horizontal-reverse"
}

There are no notes for this item.