- Added on: v4.5.0 (07/12/18)
Profile landing page
Use this single page template to rapidly create a profile landing page within your project.
Design and usage
Structure
Desktop
- All content sits within the defined 12 columns and is left aligned
- Spacing above sections should be 80px
- Last section out should be 60px
Tablet
- All content sits within the defined 8 columns and is left aligned
- Spacing above sections should be 60px
- Last section out should be 40px
Mobile
- All content sits within the 4 columns and is left aligned
- Spacing above sections should be 60px
- Last section out should be 40px
All breakpoints
- Header uses the standard Masthead pattern from Framework
- Page heading must be H1 regular (#5C596D)
- Section heading must be H2 semi-bold (#5C596D)
- Field labels must be H3 Regular (#5C596D)
- Body copy (16px #444444)
- Keyline can be used between sections when the content is light
- Section keylines sit centre aligned full width per respective device grid structure (#CCC)
- Space above and below 'edit' tertiary buttons 15px (55px total height includes hit area)
- Button usage rules as per FW guidance (secondary button style for edit functions)
- Primary CTA button should only be used once, any other buttons should be secondary/tertiary
- Call us panel has a H2 semi bold header and content is left aligned
- Logo image can be placed within cards text floated left (size 87px x 65px) if needed
- Call us panel can have a maximum of three phone numbers (follows the same content rules as the current Contact us page element)
- Prohibited: Contact us panel title has no key line under the title
Labels
- Data replay used in cards
- Modal includes new rule for field labels (H3 regular)
- Radio buttons used in modal for 4 or more selectable options
Errors
- Notification card errors follow existing rules.
Non-JS requirements and screen readers
- Follows standard form rules for Non-JS.
Placement
- All content on profile landing page template sits within the 12 columns on Desktop, 8 columns on Tablet and is full width on mobile with the content left aligned on all.
Use cases and exception scenarios
- Edit functionality can be delivered in full screen modal or alternatively take the user to an edit page.
Interactive examples
Profile landing page template
A static example is shown below, and a working example can be seen on the profile landing page template page.
Profile landing page with preferences variation template
A static example is shown below, and a working example can be seen on the profile landing page with preferences variation template page.
Profile landing page with payment details
A static example is shown below, and a working example can be seen on the profile landing page with payment details page.
Profile landing page full screen modal template
A static example is shown below, and a working example can be seen on the profile landing page full screen modal template page.
Code examples
Profile landing page template
While the pages can be created using standard elements, be sure to add some utility classes to remove the top margin of the first element within the section u-margin--top-none and again the bottom margin from the last element within the section u-margin--bottom-none to retain the correct section spacing.
The bottom margin will also need to be removed from each data group m-data-group using the same utility class u-margin--bottom-none to retain the correct spacing between it and the tertiary edit buttons.
<div class="l-section l-section--in">
<div class="l-content-container">
<ol class="a-wayfinder-list">
<li class="a-wayfinder-list__item">
<a class="a-wayfinder-link" href="...">
<span class="a-wayfinder-link__inner">...</span>
</a>
</li>
<li class="a-wayfinder-list__item">
<a class="a-wayfinder-link" href="...">
<span class="a-wayfinder-link__inner">...</span>
</a>
</li>
<li class="a-wayfinder-list__item">
<a class="a-wayfinder-link" href="...">
<span class="a-wayfinder-link__inner">...</span>
</a>
</li>
</ol>
<h1 class="a-heading a-heading--1 u-margin--bottom-none">...</h1>
</div>
</div><div class="l-section l-section--in">
<div class="l-content-container">
<h2 class="a-heading a-heading--2 a-heading--semibold u-margin--top-none">...</h2>
<hr class="a-divider-line a-divider-line--horizontal-solid a-divider-line--10-all">
<ul class="m-data-group m-data-group--4-column m-data-group--double m-data-group--data-small u-margin--bottom-none">
<li class="m-data-group-item">
<h3 class="m-data-group-item__title">...</h3>
<p class="m-data-group-item__data">...</p>
</li>
...
</ul>
<button class="a-button a-button--secondary a-button--edit"><span class="a-button__inner">...</span></button>
...
</div>
</div><div class="l-section l-section--in">
<div class="l-content-container">
<h2 class="a-heading a-heading--2 a-heading--semibold u-margin--top-none">...</h2>
<hr class="a-divider-line a-divider-line--horizontal-solid a-divider-line--10-all">
<div class="l-max l-max--left l-max--8-column-large">
<div class="m-card m-card-notification m-card-notification--information t-accent-light t-accent-light--1" role="status">
<div class="m-card-content">
<div class="m-card-content__inner">
<p>...</p>
</div>
</div>
</div>
</div>
<div class="l-columns l-columns--2-large u-margin--bottom-none">
<div class="l-columns__column">
<div class="l-columns l-columns--2-medium l-columns--2-large">
<div class="l-columns__column">
<ul class="m-data-group m-data-group--data-small">
<li class="m-data-group-item">
<h3 class="m-data-group-item__title">...</h3>
<p class="m-data-group-item__data">...</p>
</li>
</ul>
<button class="a-button a-button--secondary"><span class="a-button__inner">...</span></button>
</div>
<div class="l-columns__column">
<ul class="m-data-group m-data-group--data-small">
<li class="m-data-group-item">
<h3 class="m-data-group-item__title">...</h3>
<p class="m-data-group-item__data">...</p>
</li>
</ul>
<button class="a-button a-button--secondary"><span class="a-button__inner">...</span></button>
</div>
</div>
</div>
</div>
</div>
</div><div class="l-section l-section--in">
<div class="l-content-container">
<h2 class="a-heading a-heading--2 a-heading--semibold u-margin--top-none">...</h2>
<ul class="a-list-plain l-columns l-columns--2-large u-margin--bottom-none">
<li class="l-columns__column m-card m-card--tertiary">
<div class="m-card-content">
<div class="m-card-content__inner">
<h2 class="a-heading a-heading--2">...</h2>
<p>...</p>
<div class="m-data-replay m-data-replay--no-keyline m-data-replay--reversed-bold m-data-replay--larger-font">
<dl>
<div class="m-data-replay-item">
<dt class="m-data-replay-item__title">...</dt>
<dd class="m-data-replay-item__data">...</dd>
</div>
...
</dl>
</div>
<div class="a-legal-text-image">
<img src="..." decoding="async" width="..." height="..." alt="">
<p>...<br />
<a href="...">...</a></p>
</div>
<div class="m-card-content__inner m-card-content__inner--bottom">
<ul class="m-button-group">
<li class="m-button-group__item"><a href="..." class="a-button a-button--tertiary a-button--edit" data-module="o-modal" data-module-load="true" data-modal-fullscreen="true"><span class="a-button__inner">...</span></a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="l-columns__column m-card m-card--tertiary">
<div class="m-card-content">
<div class="m-card-content__inner">
<h2 class="a-heading a-heading--2">...</h2>
<p>...</p>
<div class="m-data-replay m-data-replay--no-keyline m-data-replay--reversed-bold m-data-replay--larger-font">
<dl>
<div class="m-data-replay-item">
<dt class="m-data-replay-item__title">...</dt>
<dd class="m-data-replay-item__data">...</dd>
</div>
...
</dl>
</div>
</div>
<div class="m-card-content__inner m-card-content__inner--bottom">
<ul class="m-button-group">
<li class="m-button-group__item"><a href="#example" class="a-button a-button--tertiary a-button--edit"><span class="a-button__inner">...</span></a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div><div class="l-section l-section--in">
<div class="l-content-container">
<h2 class="a-heading a-heading--2 a-heading--semibold u-margin--top-none">...</h2>
<hr class="a-divider-line a-divider-line--horizontal-solid a-divider-line--10-all">
<div class="l-max l-max--left l-max--8-column-large">
<p>...</p>
</div>
<div class="l-max">
<div class="m-showhide u-margin--bottom-none" data-module="m-showhide" data-module-load="true" data-accordion="true">
<h3 class="a-heading a-heading--3 a-heading--light m-showhide__heading">...</h3>
<div class="m-showhide__content">
<p>...</p>
</div>
...
</div>
</div>
</div>
</div><div class="l-section l-section--in-out">
<div class="l-content-container">
<div class="l-max l-max--left l-max--6-column-medium l-max--8-column-large u-margin--bottom-none">
<div class="o-call-us-panel o-call-us-panel--one o-call-us-panel--left u-margin--top-none" itemprop="contactPoint" itemscope="" itemtype="https://schema.org/ContactPoint">
<h2 class="a-heading a-heading--2 a-heading--semibold o-call-us-panel__heading">...</h2>
<div class="o-call-us-panel-entries">
<div class="o-call-us-panel-entry">
<p class="a-heading a-heading--2 a-heading--semibold o-call-us-panel-entry__number"><a href="..." itemprop="telephone" content="...">...</a></p>
</div>
</div>
<p class="o-call-us-panel__opening-day" itemprop="hoursAvailable" itemscope="" itemtype="https://schema.org/OpeningHoursSpecification">
<meta itemprop="dayOfWeek" content="..." />
<span>...</span>
<meta itemprop="opens" content="..." />
<meta itemprop="closes" content="..." />
...
</p>
...
<p class="o-call-us-panel__small-print"><small>...</small></p>
</div>
</div>
</div>
</div>
<div class="o-modal-target"></div>Preferences variation section
<div class="l-section l-section--in">
<div class="l-content-container">
<h2 class="a-heading a-heading--2 a-heading--semibold u-margin--top-none">...</h2>
<ul class="a-list-plain l-columns l-columns--2-medium l-columns--3-large u-margin--bottom-none">
<li class="l-columns__column m-card t-accent-light t-accent-light--3">
<div class="m-card-content">
<div class="m-card-content__inner">
<h2 class="a-heading a-heading--3 a-heading--semibold">...</h2>
<p>...</p>
</div>
<div class="m-card-content__inner m-card-content__inner--bottom">
<button class="a-button a-button--tertiary a-button--edit"><span class="a-button__inner">...</span></button>
</div>
</div>
</li>
...
</ul>
</div>
</div>Profile landing page full screen modal template
<div id="...">
<form action="..." method="...">
<fieldset>
<legend>...</legend>
<div class="l-content-container">
<div class="l-section l-section--in">
<div class="l-content-container">
<div class="l-max l-max--left l-max--6-column-large l-max--6-column-medium">
<h1 class="a-heading a-heading--1 a-heading--1-form u-margin--bottom-none">...</h1>
</div>
</div>
</div>
<div class="l-section l-section--in">
<div class="l-content-container">
<div class="l-max l-max--left l-max--6-column-large l-max--6-column-medium">
<h2 class="a-heading a-heading--2 a-heading--2-form a-heading--semibold u-margin--top-none">...</h2>
<hr class="a-divider-line a-divider-line--horizontal-solid a-divider-line--15-all">
<p>...</p>
<div class="m-form-row m-form-row--full-width">
...
</div> ... <div class="a-legal-text-image u-margin--bottom-none">
<img src="..." decoding="async" width="..." height="..." alt="">
<p>...</p>
</div>
</div>
</div>
</div>
<div class="l-section l-section--in-out">
<div class="l-content-container">
<div class="l-max l-max--left l-max--6-column-large l-max--6-column-medium">
<h2 class="a-heading a-heading--2 a-heading--2-form a-heading--semibold u-margin--top-none">...</h2>
<hr class="a-divider-line a-divider-line--horizontal-solid a-divider-line--15-all">
<div class="m-form-row m-form-row--full-width">
...
</div> <div class="m-form-row m-form-row--full-width">
<ul class="m-button-group u-margin--bottom-none">
<li class="m-button-group__item"><button class="a-button a-button--primary" type="submit">...</button></li>
<li class="m-button-group__item"><button class="a-button a-button--secondary">...</button></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>Development and test
Notes for developers
The code example below shows how to set up the basic elements within the page. It is not prescriptive, as the page can contain additional sections / form elements if required, but care should be taken to stay as close to the suggestion as possible to ensure consistency of spacing.
Documentation for other helpful modules/organisms when setting up your form may include: