People
**Please note, show/hide fuctionality is currently down for this page. If you need it for your person bio, make sure you follow the documentation for the person pattern and link to the jquery toggle content file.**
Person
Job TitleCompany Name
Phone
Society Membership
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit euismod est, non cursus felis laoreet vitae. Donec enim dolor, ornare at lacus sed, bibendum pharetra eros. Sed dignissim mauris id mauris condimentum, non sagittis tortor fringilla. Nulla magna turpis, mattis nec fringilla id, bibendum a libero.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit euismod est, non cursus felis laoreet vitae. Donec enim dolor, ornare at lacus sed, bibendum pharetra eros. Sed dignissim mauris id mauris condimentum, non sagittis tortor fringilla. Nulla magna turpis, mattis nec fringilla id, bibendum a libero.
Job TitleCompany Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit euismod est, non cursus felis laoreet vitae. Donec enim dolor, ornare at lacus sed, bibendum pharetra eros. Sed dignissim mauris id mauris condimentum, non sagittis tortor fringilla. Nulla magna turpis, mattis nec fringilla id, bibendum a libero.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit euismod est, non cursus felis laoreet vitae. Donec enim dolor, ornare at lacus sed, bibendum pharetra eros. Sed dignissim mauris id mauris condimentum, non sagittis tortor fringilla. Nulla magna turpis, mattis nec fringilla id, bibendum a libero.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit euismod est, non cursus felis laoreet vitae. Donec enim dolor, ornare at lacus sed, bibendum pharetra eros. Sed dignissim mauris id mauris condimentum, non sagittis tortor fringilla. Nulla magna turpis, mattis nec fringilla id, bibendum a libero.
HTML
<div class="person">
<div class="person-image">
<div class="person-image-icon cfaicon-profile solid"></div>
//if you have access to the person's image, use this image element instead of the placeholder icon//
<img src="" alt="" />
</div>
<div class="person-content">
<div class="h4 person-content-name">
<a href="#">
<span class="person-first">First</span>
<span class="person-middle">Middle</span>
<span class="person-last">Last</span>
<span class="person-suffix">Suffix</span>
<span class="person-credential">Author Credential</span>
</a>
</div>
<div class="person-content-employement">
<p><span class="person-content-employement-title">Job Title</span><span class="person-content-employement-company">Company Name</span></p>
</div>
<address>
<span class="building-business-name">Business name</span>
<span class="address-line-1">Address line one</span>
<span class="address-line-2">Address line two</span>
<span class="city">City</span>
<span class="state-province">State/Province</span>
<span class="postal-code">22902</span>
<span class="country-region">USA</span>
</address>
<p class="person-phone">Phone</p>
<p class="person-society">Society Membership</p>
<div class="person-content-bio toggle-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit euismod est, non cursus felis laoreet vitae. Donec enim dolor, ornare at lacus sed, bibendum pharetra eros. Sed dignissim mauris id mauris condimentum, non sagittis tortor fringilla. Nulla magna turpis, mattis nec fringilla id, bibendum a libero.
<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit euismod est, non cursus felis laoreet vitae. Donec enim dolor, ornare at lacus sed, bibendum pharetra eros. Sed dignissim mauris id mauris condimentum, non sagittis tortor fringilla. Nulla magna turpis, mattis nec fringilla id, bibendum a libero.
</p>
</div>
<div class="person-content-social">
<p><a href="#" class="fb-link"></a><a href="#" class="t-link"></a><a href="#" class="li-link"></a></p>
</div>
</div>
</div>
Problem Being Solved
We need to display structured content about people.
When to Use
This pattern should be used to display biographical information about a person or group of people.
Formatting
- If you do not have the image for the person, please use the icon div provided in the code tab (will display generic person outline with secondary gray — $s_coolgray6 (this background color is custom for this component only).
- If you would like the person's name linked, place your anchor element just inside the "person-content-name" div, wrapping the sub elements (the font color will change to our $link color and is expected).
- Biography or additional information content should be placed inside the provided div with the class "person-content-bio toggle-content."
- Make sure you link to our toggle content JavaScript file for the show more/show less functionality to work.
- Content will currently hide anything after (about) 30 words.
Group of People — Featured Speakers
Job TitleCompany Name
Job TitleCompany Name
Job TitleCompany Name
Job TitleCompany Name
Job TitleCompany Name
Job TitleCompany Name
Job TitleCompany Name
HTML
<section class="full-width">
<div class="person-group-container">
<div class="person">
<div class="person-image">
<div class="person-image-icon cfaicon-profile solid"></div>
//if you have access to the person's image, use this image element instead of the placeholder icon//
<img src="" alt="" />
</div>
<div class="person-content">
<div class="h4 person-content-name">
<span class="person-first">First</span>
<span class="person-middle">Middle</span>
<span class="person-last">Last</span>
<span class="person-suffix">Suffix</span>
<span class="person-credential">Author Credential</span>
</div>
<div class="person-content-employement">
<p><span class="person-content-employement-title">Job Title</span><span class="person-content-employement-company">Company Name</span></p>
</div>
</div>
</div>
<div class="person">
<div class="person-image">
<div class="person-image-icon cfaicon-profile solid"></div>
//if you have access to the person's image, use this image element instead of the placeholder icon//
<img src="" alt="" />
</div>
<div class="person-content">
<div class="h4 person-content-name">
<span class="person-first">First</span>
<span class="person-middle">Middle</span>
<span class="person-last">Last</span>
<span class="person-suffix">Suffix</span>
<span class="person-credential">Author Credential</span>
</div>
<div class="person-content-employement">
<p><span class="person-content-employement-title">Job Title</span><span class="person-content-employement-company">Company Name</span></p>
</div>
</div>
</div>
</div>
</section>
Problem Being Solved
We need to display a group of people with a simplified view.
When to Use
This pattern should be used to display biographical information about a group of people, e.g., Board of Governors.
This pattern should be used on home page or full width sections.
When Not to Use
This component should not be used if the desired layout is not a grid or if you want more information displayed.
Formatting
- This component should be used within a section with the class "full-width."
- Placing person component inside the div with the class "person-group-container" will lay these out in a grid, maxing out at 5 people per row.
- If you would like the person's name linked, place your anchor element just inside the "person-content-name" div, wrapping the sub elements (the font color will change to our $link color and is expected).