WordPress Component Library
10up Engineering

Person

The Person component is set up for you to harvest schema markup as you see fit to make HTML surrounding people or a person more machine readable. When modifying this component you should feel free to use any HTML that fits the structure and hierarchy of your project, while maintaining any of the schema-related HTML attributes (itemscope, itemtype, itemprop, etc.).

HTML

<div itemscope itemtype="http://schema.org/Person">

	<h3 itemprop="name">Bill Murray</h3>
	<img src="https://www.fillmurray.com/60/60" srcset="https://www.fillmurray.com/60/60 1x, https://www.fillmurray.com/120/120 2x" itemprop="image" alt="Photo of a young Bill Murray" />

	<p><strong>Title</strong>:
		<span itemprop="jobTitle">Professor</span>
	</p>

	<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
		<p><strong>Address</strong>:
			<span itemprop="streetAddress">35 Broad St</span>,
			<span itemprop="addressLocality">Red Bank</span>,
			<span itemprop="addressRegion"><abbr title="New Jersey">NJ</abbr></span>
			<span itemprop="postalCode">07701</span>
		</p>
	</div><!--/itemtype=PostalAddress-->

	<p>
		<strong>Phone</strong>:
		<a href="tel:+14251235678" itemprop="telephone">(425) 123-4567</a>
	</p>

	<p>
		<strong>Email</strong>:
		<a href="mailto:jane-doe@xyz.edu" itemprop="email">jane-doe@xyz.edu</a>
	</p>

	<p>
		<strong>Website</strong>:
		<a href="http://www.example.com" itemprop="url">janedoe.com</a>
	</p>

	<p>
		<strong>Colleagues</strong>:
		<a href="http://www.xyz.edu/students/alicejones.html" itemprop="colleague">Alice Jones</a>,
		<a href="http://www.xyz.edu/students/bobsmith.html" itemprop="colleague">Bob Smith</a>
	</p>

</div><!--/itemtype=Person-->

Resources