REMOVED
This component has been removed from the Framework.
- 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
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.