Card which summarises content for website visitors, by displaying a list of vertically aligned labels and corresponding values, in the right hand sidebar.

Example

---

Macro

{{ summaryCard({
  title: "Programme summary",
  items: [
    {
      label: "Training programme",
      value: "Core Training Surgery"
    },
    {
      label: "Training type",
      url: "http://www.randomurlhere.com",
      value: "Core Training"
    },
    {
      label: "Professions",
      url: "http://www.randomurlhere.com",
      value: "Medical"
    },
    {
      label: "Fill rate",
      value: "100%"
    }
  ]
}) }}
  

---

HTML

<div class="hee-card hee-card--summary">
    <h3 class="hee-card--summary__heading">Programme summary</h3>
    <ul class="hee-card--summary__list">
      <li class="hee-card--summary__item">
        <span class="hee-card--summary__item__label">Training programme</span>
        <span class="hee-card--summary__item__value"> Core Training Surgery </span>
      </li>
      <li class="hee-card--summary__item">
        <span class="hee-card--summary__item__label">Training type</span>
        <span class="hee-card--summary__item__value">
          <a class="hee-card--summary__item__link" href="http://www.randomurlhere.com">Core Training</a>
        </span>
      </li>
      <li class="hee-card--summary__item">
        <span class="hee-card--summary__item__label">Professions</span>
        <span class="hee-card--summary__item__value"> Medical </span>
      </li>
      <li class="hee-card--summary__item">
        <span class="hee-card--summary__item__label">Fill rate</span>
        <span class="hee-card--summary__item__value"> 100% </span>
      </li>
    </ul>
</div>