People Card

Image Variation

The following example shows the full HTML structure of the People Card component variation that displays an image and can be clicked to open a modal:

<article class="bt1d-people-card">
	<button aria-controls="people-modal-1" aria-haspopup="dialog" class="bt1d-people-card__button js-bt1d-modal" type="button">
		<figure class="bt1d-people-card__image">
			<img alt="Image description" height="512" src="/path/to/image.jpg" width="512" />
		</figure>
		<header class="bt1d-people-card__header">
			<p class="bt1d-people-card__title">Commodo ut vestibulum</p>
			<h4 class="bt1d-people-card__full-name">Eu lectus semper consequat</h4>
		</header>
	</button>
</article>

Key Classes:

• bt1d-people-card: The main wrapper for the People Card component, containing all the content.
• bt1d-people-card__button: The clickable area of the card.
• js-bt1d-modal: A class that allows the button to open a Modal. When using a modal set the aria-controls to the ID of the modal that should be opened, and add aria-haspopup="dialog" for accessibility,
• bt1d-people-card__image: A wrapper around the image that ensures that it’s the correct aspect ratio and zooms on hover.
• bt1d-people-card__header: A wrapper around the card’s text content.
• bt1d-people-card__title: The class for the person’s job title, position, or description.
• bt1d-people-card__full-name: The class for the person’s name.

Quote Variation

The following example shows the full HTML structure of the People Card component variation that displays a quote:

<article class="bt1d-people-card">
	<blockquote class="bt1d-people-card__quote">
		<p>Primis condimentum mi a primis lacinia interdum suspendisse pretium cras nec nunc a urna etiam quis cursus ut porta parturient scelerisque quam viverra.</p>
		<footer>
			<cite>Phasellus ullamcorper</cite>
		</footer>
	</blockquote>
</article>

Key Classes:

• bt1d-people-card: The main wrapper for the People Card component, containing all the content.
• bt1d-people-card__quote: The element containing the quote and attribution.

In addition to the People Card component there is a People Modal component that can used inside a Modal to display more information about the person.

<dialog aria-label="Modal" class="bt1d-modal" id="modal-1">
	<form class="bt1d-modal__header" method="modal">
		<button aria-label="Close" class="bt1d-modal__button">
			<svg class="bt1d-icon" role="presentation">
				<use xlink:href="path/to/dist/svg/icons-sprite.svg#icon-close-large"></use>
			</svg>
		</button>
	</form>
	<div class="bt1d-modal__content">
		<article class="bt1d-people-modal">
			<div class="bt1d-people-modal__sidebar">
				<figure class="bt1d-people-modal__image">
					<img height="512" src="/path/to/image.jpg" width="512" />
				</figure>
				<header class="bt1d-people-modal__header">
					<h4 class="bt1d-people-modal__full-name">Commodo ut vestibulum</h4>
					<p class="bt1d-people-modal__title">Eu lectus semper consequat</p>
				</header>
			</div>
			<div class="bt1d-people-modal__content">
				<p>Nec adipiscing diam nulla ut nibh est mi dapibus suspendisse cubilia eu est rutrum ullamcorper imperdiet magna class a accumsan. Class scelerisque consectetur a ullamcorper suspendisse erat vestibulum in penatibus dis bibendum lobortis a vulputate cras a euismod nibh felis egestas.</p>
				<p>Parturient viverra felis nam vestibulum pretium viverra non mus condimentum lobortis a id consectetur dis aptent erat. Neque in in eu a lacus nulla orci quis id quis ullamcorper adipiscing ante hendrerit parturient vestibulum a litora a libero a scelerisque habitant diam a taciti mi a.</p>
			</div>
		</article>
	<footer class="bt1d-modal__footer">
		<button class="bt1d-modal__button" disabled type="button">
			<svg class="bt1d-icon" role="presentation">
				<use xlink:href="path/to/dist/svg/icons-sprite.svg#icon-chevron-left"></use>
			</svg>
			Previous
		</button>
		<button aria-controls="modal-2" aria-haspopup="dialog" class="bt1d-modal__button js-bt1d-modal" type="button">
			Next
			<svg class="bt1d-icon" role="presentation">
				<use xlink:href="path/to/dist/svg/icons-sprite.svg#icon-chevron-right"></use>
			</svg>
		</button>
	</footer>
</dialog>

Key Classes:

• bt1d-people-modal: The main wrapper for the modal content. Should be placed inside the bt1d-modal__content element of the Modal.
• bt1d-people-modal__sidebar: The left column of the modal content, containing the same details as the People Card.
• bt1d-people-card__image: A wrapper around the image that ensures that it’s the correct aspect ratio.
• bt1d-people-card__header: A wrapper around the left column’s text content.
• bt1d-people-card__title: The class for the person’s job title, position, or description.
• bt1d-people-card__full-name: The class for the person’s name.
• bt1d-people-modal__content: The class for the right column of the modal. This element can contain arbitrary HTML. and <p> tags should be used for paragraphs.