Card displaying a title and a list of labels and values on each new line.

Example

---

Macro

{{ detailsCard({
    title: "Publication Info",
    items: [
      {
        label: "Published:",
        value: "24 June 2022"
      },
      {
        label: "Updated:",
        value: "24 July 2022"
      },
      {
        label: "Topic:",
        value: "<a href="#">Profession 1</a>, <a href="#">Topic 1</a>"
      },
      {
        label: "Estimated reading time:",
        value: "2 mins"
      }
    ]
}) }}
  

---

HTML

<div class="hee-card hee-card--details">
    <h3>Publication Info</h3>
    <div class="hee-card--details__item">
      <span>Published:</span> 24 June 2022
    </div>
    <div class="hee-card--details__item">
      <span>Updated:</span> 24 July 2022
    </div>
    <div class="hee-card--details__item">
      <span>Topic:</span>
      <a href="#">Profession 1</a>, <a href="#">Topic 1</a>
    </div>
    <div class="hee-card--details__item">
      <span>Estimated reading time:</span> 2 mins
    </div>
</div>