For marking up a persons details, we will use the microformats 2 markup scheme. This uses an h- prefix on class names to make the data available to parsers. This is an exception to the c- prefix used on other components.
The basic hCard has a name, an email and/or a telephone:
Chris Marsh
<div class="h-card">
<p class="h-card__name p-name">Chris Marsh</p>
<p class="h-card__email"><i class="c-icon c-icon--envelope"></i> <a class="u-email" href="mailto:chris.marsh@york.ac.uk">chris.marsh@york.ac.uk</a></p>
</div>
You can also add in an image, a bio and a url:
Chris Marsh
Chris is a front-end developer at the University of York. He's been developing websites for over ten years and started working at the university in early 2015.
<div class="h-card">
<figure class="c-figure h-card__figure">
<img class="c-figure__image u-photo" src="/media/chris.jpg" alt="Chris Marsh" />
</figure>
<p class="h-card__name p-name">Chris Marsh</p>
<p class="h-card__email"><i class="c-icon c-icon--envelope"></i> <a class="u-email" href="mailto:chris.marsh@york.ac.uk">chris.marsh@york.ac.uk</a></p>
<div class="h-card__bio">
<p>Chris is a front-end developer at the University of York. He's been developing websites for over ten years and started working at the university in early 2015.</p>
</div>
<p class="h-card__url"><a class="u-url c-btn c-btn--medium" href="http://www-users.york.ac.uk/~cm1438/">View profile</a></p>
</div>
And the whole hog, a postal address and position too:
Chris Marsh
Chris is a front-end developer at the University of York. He's been developing websites for over ten years and started working at the university in early 2015.
Heslington Hall
York
YO10 5DD
<div class="h-card">
<figure class="c-figure h-card__figure">
<img class="c-figure__image u-photo" src="/media/chris.jpg" alt="Chris Marsh" />
</figure>
<p class="h-card__name p-name">Chris Marsh</p>
<p class="h-card__email"><i class="c-icon c-icon--envelope"></i> <a class="u-email" href="mailto:chris.marsh@york.ac.uk">chris.marsh@york.ac.uk</a></p>
<div class="h-card__bio">
<p>Chris is a front-end developer at the University of York. He's been developing websites for over ten years and started working at the university in early 2015.</p>
</div>
<p class="h-card__adr h-adr">
<span class="p-street-address">Heslington Hall</span><br>
<span class="p-locality">York</span><br>
<span class="p-postal-code">YO10 5DD</span><br>
</p>
<p class="h-card__url"><a class="u-url c-btn c-btn--medium" href="http://www-users.york.ac.uk/~cm1438/">View profile</a></p>
</div>
Mini hcard type
Used within text content to showcase a name/address:
<div class="h-card h-card--mini">
<p class="h-card__email"><i class="c-icon c-icon--envelope"></i> <a class="u-email" href="mailto:chris.marsh@york.ac.uk">chris.marsh@york.ac.uk</a></p>
<p class="h-card__position">Front-end web developer</p>
<p class="h-card__adr h-adr">
<span class="p-street-address">Heslington Hall</span><br>
<span class="p-locality">York</span><br>
<span class="p-postal-code">YO10 5DD</span><br>
</p>
</div>
Or here, with a few more options:
Featured researcher
Chris Marsh
Front-end web developer
Heslington Hall
York
YO10 5DD
<div class="h-card h-card--mini">
<h5 class="h-card__title">Featured researcher</h5>
<p class="h-card__name p-name">Chris Marsh</p>
<p class="h-card__email"><i class="c-icon c-icon--envelope"></i> <a class="u-email" href="mailto:chris.marsh@york.ac.uk">chris.marsh@york.ac.uk</a></p>
<p class="h-card__position">Front-end web developer</p>
<p class="h-card__adr h-adr">
<span class="p-street-address">Heslington Hall</span><br>
<span class="p-locality">York</span><br>
<span class="p-postal-code">YO10 5DD</span><br>
</p>
<p class="h-card__url"><a class="u-url c-btn c-btn--medium" href="http://www-users.york.ac.uk/~cm1438/">View profile</a></p>
</div>
Byline type
Use under stories or on intro pages where you need a name, position and image to introduce someone before their story.
Chris Marsh
Front-end web developer
<div class="h-card h-card--byline">
<figure class="c-figure h-card__figure">
<img class="c-figure__image u-photo" src="/media/chris.jpg" alt="Chris Marsh" />
</figure>
<p class="h-card__name p-name">Chris Marsh</p>
<p class="h-card__position">Front-end web developer</p>
</div>
News article type
A slightly different layout to display the card like it is shown on the news article pages.
Featured researcher
Chris Marsh
Front-end web developer
Chris is a front-end developer at the University of York. He's been developing websites for over ten years and started working at the university in early 2015.
<div class="h-card h-card--article">
<h5 class="h-card__title">Featured researcher</h5>
<figure class="c-figure h-card__figure">
<img class="c-figure__image u-photo" src="/media/chris.jpg" alt="Chris Marsh" />
</figure>
<p class="h-card__name p-name">Chris Marsh</p>
<p class="h-card__position">Front-end web developer</p>
<p class="h-card__email"><i class="c-icon c-icon--envelope"></i> <a class="u-email" href="mailto:chris.marsh@york.ac.uk">chris.marsh@york.ac.uk</a></p>
<div class="h-card__bio">
<p>Chris is a front-end developer at the University of York. He's been developing websites for over ten years and started working at the university in early 2015.</p>
</div>
<p class="h-card__url"><a class="u-url c-btn c-btn--medium" href="http://www-users.york.ac.uk/~cm1438/">View profile</a></p>
</div>
Options
- hcard/hcard-article
- name (required)
- email (optional)
- tel (optional)
- image (optional)
- url (optional)
- position (optional)
- title Used at the top on the article type hCard (optional)
- bio an HTML string containing a brief biography (optional)
- address an object containing the address, containing the following optional information
- street-address e.g. Heslington Hall
- locality e.g. York
- region e.g. North Yorkshire
- country-name e.g. _UK_
- postal-code e.g. YO10 4DD