Example

---

Macro - without image

  {{ listingItem({
    title: "Result item",
    href: "http://www.google.com",
    details: [
      {
        label: "Publications type:",
        value: "Briefing"
      },
      {
        label: "Publish date:",
        value: "07 September 2022"
      }
    ],
    summary: "Porttitor nulla pellentesque sit consequat, euismod sociis tempor, malesuada. Non senectus a placerat urna, nibh sed aliquam natoque. Diam gravida sit ullamcorper cras eu et mattis donec."
  }) }}
  

---

HTML - without image

<div class="hee-listing-item">
    <h3><a href="http://www.google.com">Result item</a></h3>
    <div class="hee-listing-item__details">
      <div class="hee-listing-item__details__row">
        <span class="hee-listing-item__details__label">Profession:</span>
        <span><a href="#">Medical</a></span>
      </div>
      <div class="hee-listing-item__details__row">
        <span class="hee-listing-item__details__label">Discipline:</span>
        <span><a href="#">Anaesthesia</a></span>
      </div>
      <div class="hee-listing-item__details__row">
        <span class="hee-listing-item__details__label">Duration:</span>
        <span><a href="#">24 months</a></span>
      </div>
    </div>
    <div class="hee-listing-item__summary"> Porttitor nulla pellentesque sit consequat, euismod sociis tempor, malesuada. Non senectus a placerat urna, nibh sed aliquam natoque. Diam gravida sit ullamcorper cras eu et mattis donec. </div>
  </div>

---

Macro - with image

  {{ listingItem({
    image: basePath + "/assets/images/training-programme-card.png",
    title: "Result item",
    href: "http://www.google.com",
    details: [
      {
        label: "Profession:",
        value: "<a href="#">Medical</a>"
      },
      {
        label: "Discipline:",
        value: "<a href="#">Anaesthesia</a>"
      },
      {
        label: "Duration:",
        value: "<a href="#">24 months</a>"
      }
    ],
    summary: "Porttitor nulla pellentesque sit consequat, euismod sociis tempor, malesuada. Non senectus a placerat urna, nibh sed aliquam natoque. Diam gravida sit ullamcorper cras eu et mattis donec."
  }) }}
  

---

HTML - without image

<div class="hee-listing-item has-image">
    <div class="hee-listing-item__image" style="background-image:url(/assets/images/training-programme-card.png);"></div>
    <h3><a href="http://www.google.com">Result item</a></h3>
    <div class="hee-listing-item__details">
      <div class="hee-listing-item__details__row">
        <span class="hee-listing-item__details__label">Profession:</span>
        <span><a href="#">Medical</a></span>
      </div>
      <div class="hee-listing-item__details__row">
        <span class="hee-listing-item__details__label">Discipline:</span>
        <span><a href="#">Anaesthesia</a></span>
      </div>
      <div class="hee-listing-item__details__row">
        <span class="hee-listing-item__details__label">Duration:</span>
        <span><a href="#">24 months</a></span>
      </div>
    </div>
    <div class="hee-listing-item__summary"> Porttitor nulla pellentesque sit consequat, euismod sociis tempor, malesuada. Non senectus a placerat urna, nibh sed aliquam natoque. Diam gravida sit ullamcorper cras eu et mattis donec. </div>
  </div>