REMOVED

This component has been removed from the Framework.

  • Molecule
  • CORE COMPONENT
  • Taxonomic name: M-AGENT-PROFILE
  • Added on: v3.0.0 (15/09/17)
  • Removed on: v4.0.0 (20/07/18)

Agent profile card

Agent cards are used to provide key information about an agent to customers, including contact information, reviews, and any specialties.


Design and usage

  • For example use within a full template, see the individual agent profile example
  • This card is used at the top of a page and is for single use only (only one should be used per page – see example)
  • This card must not be used on dark accent colours

Examples

Interactive example

Code example

<div class="m-agent-profile" itemscope itemtype="https://schema.org/InsuranceAgency"><p class="a-text-dividing">This agent covers you for: <strong>... Insurance</strong></p>
			<div class="m-agent-profile__section-1">
				<h2 class="a-heading a-heading--1 a-heading--first" itemprop="name">...</h2>
				<p class="m-agent-profile__job-title">...</p>
				<p class="m-agent-profile__rating">
					<span class="a-review-stars a-review-stars--[ Modifier ]" itemscope itemtype="https://schema.org/AggregateRating" itemprop="aggregateRating">
						<span class="u-hidden--visually">...has been awarded an overall rating of </span>
						<strong class="a-review-stars__rating u-hidden--visually"<>span itemprop="ratingValue">...</span> / <span itemprop="bestRating">5</strong></strong>
						<span class="u-hidden--visually"> from <span itemprop="reviewCount">...</span> customer reviews.</span>
					</span>
					<a class="m-agent-profile__rating-link" href="#example">Read the reviews<span class="u-hidden--visually"> for ...</span></a>
				</p>
			</div>
			<div class="m-agent-profile__section-2">
				<img class="m-agent-profile__image" src="[ Profile image URL ]" itemprop="photo" alt="" />
				<button class="a-button a-button--primary a-button--full-width m-agent-profile__button">Request call back</button>
			</div>
			<div class="m-agent-profile__section-3">
				<h3 class="a-heading a-heading--2 a-heading--light a-heading--first">Contact Information</h3>
				<div class="l-columns l-columns--2-medium l-columns--2-large">
					<div class="l-columns__column">
						<p class="a-text-icon a-text-icon--address" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">...<br/>
						<span itemprop="streetAddress">...</span><br/>
						<span itemprop="addressLocality">...</span><br/>
						<span itemprop="addressRegion">...</span><br/>
						<span itemprop="postalCode">...</span><br/>
						<span itemprop="addressCountry">...</span></p>
					</div>
					<div class="l-columns__column">
						<p class="a-text-icon a-text-icon--telephone" itemprop="telephone">...</p>
						<p class="a-text-icon a-text-icon--email"><a href="mailto:..." itemprop="email">...</a></p>
						<ul class="a-social-links a-list-plain">
							<li><a class="a-social-links__icon a-social-links__icon--facebook" href="#example" itemprop="sameAs">Facebook for...</a></li>
							<li><a class="a-social-links__icon a-social-links__icon--twitter" href="#example" itemprop="sameAs">Twitter for...</a></li>
							<li><a class="a-social-links__icon a-social-links__icon--google" href="#example" itemprop="sameAs">Google for ...</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="m-agent-profile__section-4">
				<h3 class="a-heading a-heading--2 a-heading--light a-heading--first">Specialties</h3>
				<ul class="l-columns l-columns--2-medium l-columns--4-large a-list-plain specialism-list">
					<li class="l-columns__column specialism-list__item"><a class="a-link-icon a-link-icon--specialism a-link-icon--[ Modifier ]" href="#example"><span class="a-link-icon__inner">...</span></a></li>
					<li class="l-columns__column specialism-list__item"><a class="a-link-icon a-link-icon--specialism a-link-icon--[ Modifier ]" href="#example"><span class="a-link-icon__inner">...</span></a></li>
					<li class="l-columns__column specialism-list__item"><a class="a-link-icon a-link-icon--specialism a-link-icon--[ Modifier ]" href="#example"><span class="a-link-icon__inner">...</span></a></li>
					<li class="l-columns__column specialism-list__item"><a class="a-link-icon a-link-icon--specialism a-link-icon--[ Modifier ]" href="#example"><span class="a-link-icon__inner">...</span></a></li>
				</ul>
			</div>
		</div>

Full specialisms icon set

Full set of specialism icons

Development and test

Notes for developers

This element is an extension to the Framework rather than a core module; include the following code in your header to attach the relevant additional stylesheets:

<link media="all" href="[ CDN Folder Path ]/css/extension-agent-profile.css" rel="stylesheet" />
<!--[if lte IE 8]>
	<link media="all" href="[ CDN Folder Path ]/css/extension-agent-profile-unmq.css" rel="stylesheet" />
<![endif]-->

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

Class Outcome Required Applied to Comments
.m-agent-profile Base style for the agent profile card Yes div  
.m-agent-profile--last Modifier to remove bottom margin from the profile card   .m-agent-profile  
.m-agent-profile__section-1 Base style for the first section of the agent profile card Yes div  
.m-agent-profile__job-title Positions the job title of the agent   p  
.m-agent-profile__rating Positions the rating of the agent   p  
.m-agent-profile__review-link Positions the review link of the agent   a  
.m-agent-profile__section-2 Base style for the second section of the agent profile card Yes div  
.m-agent-profile__image Positions the profile image of the agent   img  
.m-agent-profile__button Positions the profile image of the agent   button  
.m-agent-profile__section-3 Base style for the third section of the agent profile card Yes div  
.m-agent-profile__section-4 Base style for the fourth section of the agent profile card Yes div  
.a-link-icon--specialism Base style for all links with an specialism links Yes .a-link-icon  
.a-link-icon--agricultural-professionals-insurance Add Agricultural Professionals Insurance icon to the left of the text   .a-link-icon--specialism
.a-link-icon--artisan-shopkeepers-insurance Add Artisan Shopkeepers Insurance icon to the left of the text   .a-link-icon--specialism
.a-link-icon--association-organization-insurance Add Association Organization Insurance icon to the left of the text   .a-link-icon--specialism
.a-link-icon--breakdown Add Breakdown icon to the left of the text   .a-link-icon--specialism
.a-link-icon--business-insurance Add Business Insurance icon to the left of the text   .a-link-icon--specialism
.a-link-icon--company-insurance Add Company Insurance icon to the left of the text   .a-link-icon--specialism
.a-link-icon--construction-workers-insurance Add Construction Workers Insurance icon to the left of the text   .a-link-icon--specialism
.a-link-icon--critical-illness Add Critical Illness icon to the left of the text   .a-link-icon--specialism
.a-link-icon--equity-release Add Equity Release icon to the left of the text   .a-link-icon--specialism
.a-link-icon--goods-equipment-insurance Add Goods Equipment Insurance icon to the left of the text   .a-link-icon--specialism
.a-link-icon--health Add Health icon to the left of the text   .a-link-icon--specialism
.a-link-icon--health-cash-plan Add Health Cash Plan icon to the left of the text   .a-link-icon--specialism
.a-link-icon--health-professionals-insurance Add Health Professionals Insurance icon to the left of the text   .a-link-icon--specialism
.a-link-icon--home Add Home icon to the left of the text   .a-link-icon--specialism
.a-link-icon--investment-account Add Investment Account icon to the left of the text   .a-link-icon--specialism
.a-link-icon--isa Add ISA icon to the left of the text   .a-link-icon--specialism
.a-link-icon--it-professionals-insurance Add IT Professionals Insurance icon to the left of the text   .a-link-icon--specialism
.a-link-icon--legal-protection Add Legal Protection icon to the left of the text   .a-link-icon--specialism
.a-link-icon--life Add Life icon to the left of the text   .a-link-icon--specialism
.a-link-icon--motor Add Motor icon to the left of the text   .a-link-icon--specialism
.a-link-icon--motor-professional-insurance Add Motor Professional Insurance icon to the left of the text   .a-link-icon--specialism
.a-link-icon--multi-vehicle Add Multi Vehicle icon to the left of the text   .a-link-icon--specialism
.a-link-icon--office-shop-insurance Add Office Shop Insurance icon to the left of the text   .a-link-icon--specialism
.a-link-icon--payment-insurance Add Payment Insurance icon to the left of the text   .a-link-icon--specialism
.a-link-icon--pensions Add Pensions icon to the left of the text   .a-link-icon--specialism
.a-link-icon--personal-accident-insurance Add Personal Accident Insurance icon to the left of the text   .a-link-icon--specialism
.a-link-icon--pet Add Pet icon to the left of the text   .a-link-icon--specialism
.a-link-icon--public-liability-insurance Add Public Liability Insurance icon to the left of the text   .a-link-icon--specialism
.a-link-icon--public-sector-professionals-insurance Add Public Sector Professionals Insurance icon to the left of the text   .a-link-icon--specialism
.a-link-icon--retirement-income Add Retirement Income icon to the left of the text   .a-link-icon--specialism
.a-link-icon--savings-and-investment Add Savings and Investment icon to the left of the text   .a-link-icon--specialism
.a-link-icon--school-family-protection-insurance Add School Family Protection Insurance icon to the left of the text   .a-link-icon--specialism
.a-link-icon--self-employed-professionals-insurance Add Self-employed Professionals Insurance icon to the left of the text   .a-link-icon--specialism
.a-link-icon--service-providers-insurance Add Service Providers Insurance icon to the left of the text   .a-link-icon--specialism
.a-link-icon--tertiary-sector Add Tertiary Sector icon to the left of the text   .a-link-icon--specialism
.a-link-icon--travel Add Travel icon to the left of the text   .a-link-icon--specialism

Keyboard operations

TAB

Tabbing to an anchor should make the anchor clearly visually different so that the focus point on the page is obvious to the user

SPACE or ENTER

With focus on an anchor, pressing SPACE or ENTER will open the link. If the link is internal to the page it will scroll the page otherwise it will load the new page.

Component releases

  • Added on: v3.0.0 (15/09/17)
  • Removed on: v4.0.0 (20/07/18)

Latest update:

  • Component removed.

Full version history

A full history of changes and enhancements detailing all minor and major updates to the component.

View full version history

Want something new in Framework, or to chat about an issue you're having with it?

Contact the team