Agent profile call back

Taxonomic name: AGENT-CALLBACK

Beta v.1.1.0 - Updated 13/12/16.

Molecule

Design
Code

This card is the form that allows users to request a call back (within the agent card)

The agent callback card is a component within the overall agent card
Only one call back link should be included per agent card.

Examples

Dobromil Smith-Choromanska

Health Insurance Specialist

Dobromil Smith-Choromanska has been awarded an overall rating of 4 / 5 from 9130 customer reviews. Read the reviews for Dobromil Smith-Choromanska

Request call back

Contact Information

Dobromil Smith-Choromanska
12 Highbank Rd
Ormesby
Middlesbrough
TS7 9EH
UK

01324 545 156

dobromil.smith-choromanska@aviva.com

Notes for developers

The section containing the call back form should be the last section on the page (before the contextual help bar and footer).

Ensure that the callback button within the agent profile card references the call back form eg.

<p><a class="btn btn--primary btn--full-width agent-profile__btn" href="#callback">Request call back</a></p>

To automatically open the call back area on page load add the additional class agent-callback--open.

To include a close button within the call back area use the following code.

<p class="agent-callback__close-btn"><a href="" class="btn btn--primary">Request call back</a></p>

Notes for testers

When JavaScript is available and the 'Request call back' button within the agent profile card is selected the call back form should be made visible and focus transfered to the call back form, so that hitting tab again will transfer focus to the first tabbable element within the call back box.

When JavaScript is available and close link or button is selected the call back form is hidden and focus is tranfered to the contact information section so that hitting tab again will transfer focus to the first link within that section.

When JavaScript is not available the call back form is visible at the bottom of the page and selecting the 'Request call back' button scrolls the user down to the form/area.

Code Examples

<div class="l-section t-accent-light t-accent-light--white agent-callback-wrapper">
	<div class="l-content-container">
		<div class="l-max l-max--10-col-large">
			<div id="callback" class="agent-callback l-form--left-align" data-module="agent-callback">
				<!-- Callback content (form/completed message) -->
			</div>
		</div>
	</div>
</div>

Classes overview

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

Class	Outcome	Required	Applied to
`.agent-callback-wrapper`	Base style for the section containing the callback form so that its hidden with JS is available	Yes	`l-section`
`.agent-callback`	Base style the container directly containing the form / completed message	Yes	`#callback`
`.agent-callback--open`	Modifier to automatically show call back area on page load		`.agent-callback`
`agent-callback__close-btn`	Base style to add functionality to close button added within call back area		`.agent-callback p`

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.