ETR Component Library

card: Small 

<div class="card card--small flex justify-between flex-col items-start flex-grow px-6 py-8 lg:pt-8 min-h-0 mb-4">
    <div class="card-content">
        <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">It is organized as a department of the city&#x27;s cultural office.</h3>
        </a>

    </div>

    <div class="mt-3">
        <a href="www.expandtheroom.com" class="button button--default">
                Learn More
              </a>

    </div>
</div>
 
<div class="card card--small flex justify-between flex-col items-start flex-grow px-6 py-8 lg:pt-8 min-h-0 mb-4">
      {{> @card-content}}

      {{#if button}}
        <div class="mt-3">
          {{#with button}}
            {{> @button}}
          {{/with}}
        </div>
      {{/if}}
  </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": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
      "credit": "Getty Images"
    }
  },
  "label": null,
  "heading": "The World’s Most Beautiful Libraries",
  "subheading": "It is organized as a department of the city's cultural office.",
  "description": null,
  "author": null,
  "date": null,
  "modifier": "small",
  "caption": null,
  "button": {
    "text": "Learn More",
    "url": "www.expandtheroom.com"
  }
}

There are no notes for this item.