Main
Card--Person
You can find the content type data model in the Person specification.
Example
Macro
{{ personCard({
title: "Dr",
name: "Bobby Smith",
initials: "BS",
pronouns: "They/them",
jobTitle: "Content Editor",
department: "National Website Platform",
organisation: "NHS UK",
workAddress: {
line1: "2 Stephenson St",
line2: "",
line3: "",
city: "Birmingham",
county: "West Midlands",
postcode: "B1 2SE"
},
image: "",
email: "bobby.smithandthelongestemail@hee.co.uk",
telephone: "01162344444",
website: "http://nhs.uk/",
twitter: "nhsengland",
linkedIn: "nhs"
}) }}
HTML
<div class="hee-card hee-card--person">
<div class="hee-card__image">
<div class="hee-card__initials">
<span>BS</span>
</div>
</div>
<h2 class="hee-card__name" aria-label="Name"> Dr Bobby Smith </h2>
<span class="hee-card__pronouns">They/them</span>
<p class="hee-card__department" aria-label="Department">National Website Platform</p>
<p class="hee-card__organisation" aria-label="Organisation">NHS UK</p>
<hr>
<ul class="hee-card__contact">
<li class="hee-card__telephone" aria-label="Telephone"><a href="tel:01162344444;">01162344444</a></li>
<li class="hee-card__email" aria-label="Email"><a href="mailto:bobby.smithandthelongestemail@hee.co.uk;">bobby.smithandthelongestemail@hee.co.uk</a></li>
<li class="hee-card__website" aria-label="Website"><a href="http://nhs.uk/">http://nhs.uk/</a></li>
<li class="hee-card__twitter" aria-label="Twitter"><a href="https://twitter.com/nhsengland">@nhsengland</a></li>
</ul>
<p class="hee-card__address" aria-label="Address">
</p>
</div>