Agent profile call back
Taxonomic name: AGENT-CALLBACK
Beta v.1.1.0 - Updated 13/12/16.
Molecule
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
Contact Information
Dobromil Smith-Choromanska
12 Highbank Rd
Ormesby
Middlesbrough
TS7 9EH
UK
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 | Comments |
---|---|---|---|---|
.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.