Show contact details and allow certain users to edit them.
Contents
<div class="govuk-summary-card">
<div class="govuk-summary-card__title-wrapper">
<h2 class="govuk-summary-card__title">
Project managed by
</h2>
</div>
<div class="govuk-summary-card__content">
<dl class="govuk-summary-list">
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Name
</dt>
<dd class="govuk-summary-list__value">
Alex James
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Email address
</dt>
<dd class="govuk-summary-list__value">
alex.james@example.com
</dd>
</div>
</dl>
</div>
</div>
<div class="govuk-summary-card">
<div class="govuk-summary-card__title-wrapper">
<h2 class="govuk-summary-card__title">
Team lead
</h2>
</div>
<div class="govuk-summary-card__content">
<dl class="govuk-summary-list">
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Name
</dt>
<dd class="govuk-summary-list__value">
Zara Laney
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
zara.laney@example.com
</dt>
<dd class="govuk-summary-list__value">
</dd>
</div>
</dl>
</div>
</div>
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
{{ govukSummaryList({
card: {
title: {
text: "Project managed by"
}
},
rows: [
{
key: {
text: "Name"
},
value: {
html: "Alex James"
}
},
{
key: {
text: "Email address"
},
value: {
html: "alex.james@example.com"
}
}
]
}) }}
{{ govukSummaryList({
card: {
title: {
text: "Team lead"
}
},
rows: [
{
key: {
text: "Name"
},
value: {
html: "Zara Laney"
}
},
{
key: {
text: "Email address"
},
value: {
html: "zara.laney@example.com"
}
}
]
}) }}
When to use this component
Use this pattern to display read-only contact details. Provide another page to let users edit the contact details when required.
When not to use this component
Do not use this pattern if your design only has one contact details field. For example, a person's name.
How it works
Display contact details using the summary card component.
Your contact details section or page in your product should:
- have more than one contact details field
- provide a change link in the third column, if the fields are editable
- (for internal products) point to one edit page, even if you have a change link for each field
It should not:
- allow users to edit fields on the same page. For example, using AJAX-enabled forms. Take users to a separate edit page
- provide a change link if users are not allowed to edit the information. This may be the case if a certain user group only needs to read it
Several contacts per card
You can group similar contacts together into one summary card. For example, DfE contacts into a DfE contacts card.
This approach is helpful if users need lots of contact details in one place.
Read only
If users just need to read contact details without editing them, use summary cards without change links.Contents
<div class="govuk-summary-card">
<div class="govuk-summary-card__title-wrapper">
<h2 class="govuk-summary-card__title">
DfE contacts
</h2>
</div>
<div class="govuk-summary-card__content">
<dl class="govuk-summary-list">
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Trust relationship manager
</dt>
<dd class="govuk-summary-list__value">
Alex James<br/>
alex.james@example.com
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
SFSO (Schools financial support and oversight) lead
</dt>
<dd class="govuk-summary-list__value">
Zara Laney<br/>
zara.laney@example.com
</dd>
</div>
</dl>
</div>
</div>
<div class="govuk-summary-card">
<div class="govuk-summary-card__title-wrapper">
<h2 class="govuk-summary-card__title">
Trust contacts
</h2>
</div>
<div class="govuk-summary-card__content">
<dl class="govuk-summary-list">
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Accounting officer
</dt>
<dd class="govuk-summary-list__value">
Steph Park<br/>
steph@trustname.org.uk
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Chair of trustees
</dt>
<dd class="govuk-summary-list__value">
Ren Kinley<br/>
ren@trustname.org.uk
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Chief financial officer
</dt>
<dd class="govuk-summary-list__value">
Amar Vincent<br/>
amar@trustname.org.uk
</dd>
</div>
</dl>
</div>
</div>
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
{{ govukSummaryList({
card: {
title: {
text: "DfE contacts"
}
},
rows: [
{
key: {
text: "Trust relationship manager"
},
value: {
html: "Alex James<br/>alex.james@example.com"
}
},
{
key: {
text: "SFSO (Schools financial support and oversight) lead"
},
value: {
html: "Zara Laney<br/>zara.laney@example.com"
}
}
]
}) }}
{{ govukSummaryList({
card: {
title: {
text: "Trust contacts"
}
},
rows: [
{
key: {
text: "Accounting officer"
},
value: {
html: "Steph Park<br/>steph@trustname.org.uk"
}
},
{
key: {
text: "Chair of trustees"
},
value: {
html: "Ren Kinley<br/>ren@trustname.org.uk"
}
},
{
key: {
text: "Chief financial officer"
},
value: {
html: "Amar Vincent<br/>amar@trustname.org.uk"
}
}
]
}) }}
Editing contact details
If users are allowed to edit the contact details, create an editing page and allow users to access it via a change link.
After users have edited the contact details, direct them back to the page which displays the edited details.
Contents
<div class="govuk-summary-card">
<div class="govuk-summary-card__title-wrapper">
<h2 class="govuk-summary-card__title">
DfE contacts
</h2>
<ul class="govuk-summary-card__actions">
<li class="govuk-summary-card__action">
<a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> DfE contacts</span></a>
</li>
</ul>
</div>
<div class="govuk-summary-card__content">
<dl class="govuk-summary-list">
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Contact person 1 job title
</dt>
<dd class="govuk-summary-list__value">
Alex James<br/>
alex.james@example.com
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Contact person 2 job title
</dt>
<dd class="govuk-summary-list__value">
Name<br/>
email address here
</dd>
</div>
</dl>
</div>
</div>
<div class="govuk-summary-card">
<div class="govuk-summary-card__title-wrapper">
<h2 class="govuk-summary-card__title">
Trust contacts
</h2>
<ul class="govuk-summary-card__actions">
<li class="govuk-summary-card__action">
<a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> trust contacts</span></a>
</li>
</ul>
</div>
<div class="govuk-summary-card__content">
<dl class="govuk-summary-list">
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Contact person 1 job title
</dt>
<dd class="govuk-summary-list__value">
Alex James<br/>
alex.james@example.com
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Contact person 2 job title
</dt>
<dd class="govuk-summary-list__value">
Name<br/>
email address here
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Contact person 3 job title
</dt>
<dd class="govuk-summary-list__value">
Name<br/>
email address here
</dd>
</div>
</dl>
</div>
</div>
{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
{{ govukSummaryList({
card: {
title: {
text: "DfE contacts"
},
actions: {
items: [
{
href: "#",
text: "Change",
visuallyHiddenText: "dfe contacts"
}
]
}
},
rows: [
{
key: {
text: "Trust relationship manager"
},
value: {
html: "Alex James<br/>alex.james@example.com"
}
},
{
key: {
text: "SFSO (Schools financial support and oversight) lead"
},
value: {
html: "Zara Laney<br/>zara.laney@example.com"
}
}
]
}) }}
{{ govukSummaryList({
card: {
title: {
text: "Trust contacts"
},
actions: {
items: [
{
href: "#",
text: "Change",
visuallyHiddenText: "trust contacts"
}
]
}
},
rows: [
{
key: {
text: "Accounting officer"
},
value: {
html: "Steph Park<br/>steph@trustname.org.uk"
}
},
{
key: {
text: "Chair of trustees"
},
value: {
html: "Ren Kinley<br/>ren@trustname.org.uk"
}
},
{
key: {
text: "Chief financial officer"
},
value: {
html: "Amar Vincent<br/>amar@trustname.org.uk"
}
}
]
}) }}
Contents
<h1 class="govuk-heading-xl">
<span class="govuk-caption-l">Secondary title here</span>
Edit Trust contacts
</h1>
<div class="govuk-form-group">
<div class="govuk-form-group">
<label class="govuk-label govuk-heading-m" for="trustContactsPerson1Name">
Accounting officer name
</label>
<input class="govuk-input" id="trustContactsPerson1Name" name="trustContactsPerson1Name" type="text" value="Steph Park">
</div>
<div class="govuk-form-group">
<label class="govuk-label govuk-heading-m" for="trustContactsPerson1EmailAddress">
Accounting officer email address
</label>
<input class="govuk-input" id="trustContactsPerson1EmailAddress" name="trustContactsPerson1EmailAddress" type="text" value="steph@trustname.org.uk">
</div>
<div class="govuk-form-group">
<label class="govuk-label govuk-heading-m" for="trustContactsPerson2Name">
Chair of trustees name
</label>
<input class="govuk-input" id="trustContactsPerson2Name" name="trustContactsPerson2Name" type="text" value="Ren Kinley">
</div>
<div class="govuk-form-group">
<label class="govuk-label govuk-heading-m" for="trustContactsPerson2EmailAddress">
Chair of trustees email address
</label>
<input class="govuk-input" id="trustContactsPerson2EmailAddress" name="trustContactsPerson2EmailAddress" type="text" value="ren@trustname.org.uk">
</div>
<div class="govuk-form-group">
<label class="govuk-label govuk-heading-m" for="trustContactsPerson3Name">
Cheif financial officer name
</label>
<input class="govuk-input" id="trustContactsPerson3Name" name="trustContactsPerson3Name" type="text" value="Amar Vincent">
</div>
<div class="govuk-form-group">
<label class="govuk-label govuk-heading-m" for="trustContactsPerson3EmailAddress">
Chief financial officer email address
</label>
<input class="govuk-input" id="trustContactsPerson3EmailAddress" name="trustContactsPerson3EmailAddress" type="text" value="amar@trustname.org.uk">
</div>
</div>
{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
{% call govukFieldset({
legend: {
html: '<h1 class="govuk-heading-xl">
<span class="govuk-caption-l">Secondary title here</span>
Edit Trust contacts
</h1>',
classes: "govuk-fieldset__legend--l",
isPageHeading: true
}
}) %}
{{ govukInput({
label: {
text: "Accounting officer name"
},
id: "trustContactsPerson1Name",
name: "trustContactsPerson1Name",
value: "Steph Park"
}) }}
{{ govukInput({
label: {
text: "Accounting officer email address"
},
id: "trustContactsPerson1EmailAddress",
name: "trustContactsPerson1EmailAddress",
value: "steph@trustname.org.uk"
}) }}
{{ govukInput({
label: {
text: "Chair of trustees name"
},
id: "trustContactsPerson2Name",
name: "trustContactsPerson2Name",
value: "Ren Kinley"
}) }}
{{ govukInput({
label: {
text: "Chair of trustees email address"
},
id: "trustContactsPerson2EmailAddress",
name: "trustContactsPerson2EmailAddress",
value: "ren@trustname.org.uk"
}) }}
{{ govukInput({
label: {
text: "Cheif financial officer name"
},
id: "trustContactsPerson3Name",
name: "trustContactsPerson3Name",
value: "Amar Vincent"
}) }}
{{ govukInput({
label: {
text: "Chief financial officer email address"
},
id: "trustContactsPerson3EmailAddress",
name: "trustContactsPerson3EmailAddress",
value: "amar@trustname.org.uk"
}) }}
{% endcall %}
Contents
<div class="govuk-summary-card">
<div class="govuk-summary-card__title-wrapper">
<h2 class="govuk-summary-card__title">
DfE contacts
</h2>
<ul class="govuk-summary-card__actions">
<li class="govuk-summary-card__action">
<a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> DfE contacts</span></a>
</li>
</ul>
</div>
<div class="govuk-summary-card__content">
<dl class="govuk-summary-list">
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Contact person 1 job title
</dt>
<dd class="govuk-summary-list__value">
Alex James<br/>
alex.james@example.com
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Contact person 2 job title
</dt>
<dd class="govuk-summary-list__value">
Name<br/>
email address here
</dd>
</div>
</dl>
</div>
</div>
<div class="govuk-summary-card">
<div class="govuk-summary-card__title-wrapper">
<h2 class="govuk-summary-card__title">
Trust contacts
</h2>
<ul class="govuk-summary-card__actions">
<li class="govuk-summary-card__action">
<a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> trust contacts</span></a>
</li>
</ul>
</div>
<div class="govuk-summary-card__content">
<dl class="govuk-summary-list">
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Contact person 1 job title
</dt>
<dd class="govuk-summary-list__value">
Alex James<br/>
alex.james@example.com
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Contact person 2 job title
</dt>
<dd class="govuk-summary-list__value">
Name<br/>
email address here
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Contact person 3 job title
</dt>
<dd class="govuk-summary-list__value">
Name<br/>
email address here
</dd>
</div>
</dl>
</div>
</div>
{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
{{ govukSummaryList({
card: {
title: {
text: "DfE contacts"
},
actions: {
items: [
{
href: "#",
text: "Change",
visuallyHiddenText: "dfe contacts"
}
]
}
},
rows: [
{
key: {
text: "Trust relationship manager"
},
value: {
html: "Alex James<br/>alex.james@example.com"
}
},
{
key: {
text: "SFSO (Schools financial support and oversight) lead"
},
value: {
html: "Zara Laney<br/>zara.laney@example.com"
}
}
]
}) }}
{{ govukSummaryList({
card: {
title: {
text: "Trust contacts"
},
actions: {
items: [
{
href: "#",
text: "Change",
visuallyHiddenText: "trust contacts"
}
]
}
},
rows: [
{
key: {
text: "Accounting officer"
},
value: {
html: "Steph Park<br/>steph@trustname.org.uk"
}
},
{
key: {
text: "Chair of trustees"
},
value: {
html: "Ren Kinley<br/>ren@trustname.org.uk"
}
},
{
key: {
text: "Chief financial officer"
},
value: {
html: "Amar Vincent<br/>amar@trustname.org.uk"
}
}
]
}) }}
One contact per card
If grouping contacts together into a card would not work for your context, you can display each contact in a separate summary card.
Read only
If users just need to read contact details without editing them, use summary cards without change links.Contents
<div class="govuk-summary-card">
<div class="govuk-summary-card__title-wrapper">
<h2 class="govuk-summary-card__title">
Project managed by
</h2>
</div>
<div class="govuk-summary-card__content">
<dl class="govuk-summary-list">
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Name
</dt>
<dd class="govuk-summary-list__value">
Alex James
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Email address
</dt>
<dd class="govuk-summary-list__value">
alex.james@example.com
</dd>
</div>
</dl>
</div>
</div>
<div class="govuk-summary-card">
<div class="govuk-summary-card__title-wrapper">
<h2 class="govuk-summary-card__title">
Team lead
</h2>
</div>
<div class="govuk-summary-card__content">
<dl class="govuk-summary-list">
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Name
</dt>
<dd class="govuk-summary-list__value">
Zara Laney
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
zara.laney@example.com
</dt>
<dd class="govuk-summary-list__value">
</dd>
</div>
</dl>
</div>
</div>
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
{{ govukSummaryList({
card: {
title: {
text: "Project managed by"
}
},
rows: [
{
key: {
text: "Name"
},
value: {
html: "Alex James"
}
},
{
key: {
text: "Email address"
},
value: {
html: "alex.james@example.com"
}
}
]
}) }}
{{ govukSummaryList({
card: {
title: {
text: "Team lead"
}
},
rows: [
{
key: {
text: "Name"
},
value: {
html: "Zara Laney"
}
},
{
key: {
text: "Email address"
},
value: {
html: "zara.laney@example.com"
}
}
]
}) }}
Editing contact details
If users are allowed to edit the contact details, create an editing page and allow users to access it via a change link.
After users have edited the contact details, direct them back to the page which displays the edited details.
Contents
<div class="govuk-summary-card">
<div class="govuk-summary-card__title-wrapper">
<h2 class="govuk-summary-card__title">
Project managed by
</h2>
<ul class="govuk-summary-card__actions">
<li class="govuk-summary-card__action">
<a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> project managed by</span></a>
</li>
</ul>
</div>
<div class="govuk-summary-card__content">
<dl class="govuk-summary-list">
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Name
</dt>
<dd class="govuk-summary-list__value">
Alex James
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Email address
</dt>
<dd class="govuk-summary-list__value">
alex.james@example.com
</dd>
</div>
</dl>
</div>
</div>
<div class="govuk-summary-card">
<div class="govuk-summary-card__title-wrapper">
<h2 class="govuk-summary-card__title">
Team lead
</h2>
<ul class="govuk-summary-card__actions">
<li class="govuk-summary-card__action">
<a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> team lead</span></a>
</li>
</ul>
</div>
<div class="govuk-summary-card__content">
<dl class="govuk-summary-list">
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Name
</dt>
<dd class="govuk-summary-list__value">
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Email address
</dt>
<dd class="govuk-summary-list__value">
</dd>
</div>
</dl>
</div>
</div>
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
{{ govukSummaryList({
card: {
title: {
text: "DfE contacts"
},
actions: {
items: [
{
href: "#",
text: "Change",
visuallyHiddenText: "dfe contacts"
}
]
}
},
rows: [
{
key: {
text: "Contact person 1 job title"
},
value: {
html: "Alex James<br/>alex.james@example.com"
}
},
{
key: {
text: "Contact person 2 job title"
},
value: {
html: "Name<br/>email address here"
}
}
]
}) }}
{{ govukSummaryList({
card: {
title: {
text: "Trust contacts"
},
actions: {
items: [
{
href: "#",
text: "Change",
visuallyHiddenText: "trust contacts"
}
]
}
},
rows: [
{
key: {
text: "Contact person 1 job title"
},
value: {
html: "Alex James<br/>alex.james@example.com"
}
},
{
key: {
text: "Contact person 2 job title"
},
value: {
html: "Name<br/>email address here"
}
},
{
key: {
text: "Contact person 3 job title"
},
value: {
html: "Name<br/>email address here"
}
}
]
}) }}
Contents
<h1 class="govuk-heading-xl">
<span class="govuk-caption-l">Secondary title here</span>
Edit Project managed by
</h1>
<div class="govuk-form-group">
<div class="govuk-form-group">
<label class="govuk-label govuk-heading-m" for="teamLeadName">
Name
</label>
<input class="govuk-input" id="teamLeadName" name="teamLeadName" type="text" value="Alex James">
</div>
<div class="govuk-form-group">
<label class="govuk-label govuk-heading-m" for="teamLeadEmailAddress">
Email address
</label>
<input class="govuk-input" id="teamLeadEmailAddress" name="teamLeadEmailAddress" type="text" value="alex.james@example.com">
</div>
</div>
{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
{% call govukFieldset({
legend: {
html: '<h1 class="govuk-heading-xl">
<span class="govuk-caption-l">Secondary title here</span>
Edit Project managed by
</h1>',
classes: "govuk-fieldset__legend--l",
isPageHeading: true
}
}) %}
{{ govukInput({
label: {
text: "Name"
},
id: "teamLeadName",
name: "teamLeadName",
value: "Alex James"
}) }}
{{ govukInput({
label: {
text: "Email address"
},
id: "teamLeadEmailAddress",
name: "teamLeadEmailAddress",
value: "alex.james@example.com"
}) }}
{% endcall %}
Contents
<div class="govuk-summary-card">
<div class="govuk-summary-card__title-wrapper">
<h2 class="govuk-summary-card__title">
Project managed by
</h2>
<ul class="govuk-summary-card__actions">
<li class="govuk-summary-card__action">
<a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> project managed by</span></a>
</li>
</ul>
</div>
<div class="govuk-summary-card__content">
<dl class="govuk-summary-list">
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Name
</dt>
<dd class="govuk-summary-list__value">
Alex James
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Email address
</dt>
<dd class="govuk-summary-list__value">
alex.james@example.com
</dd>
</div>
</dl>
</div>
</div>
<div class="govuk-summary-card">
<div class="govuk-summary-card__title-wrapper">
<h2 class="govuk-summary-card__title">
Team lead
</h2>
<ul class="govuk-summary-card__actions">
<li class="govuk-summary-card__action">
<a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> team lead</span></a>
</li>
</ul>
</div>
<div class="govuk-summary-card__content">
<dl class="govuk-summary-list">
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Name
</dt>
<dd class="govuk-summary-list__value">
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Email address
</dt>
<dd class="govuk-summary-list__value">
</dd>
</div>
</dl>
</div>
</div>
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
{{ govukSummaryList({
card: {
title: {
text: "DfE contacts"
},
actions: {
items: [
{
href: "#",
text: "Change",
visuallyHiddenText: "dfe contacts"
}
]
}
},
rows: [
{
key: {
text: "Contact person 1 job title"
},
value: {
html: "Alex James<br/>alex.james@example.com"
}
},
{
key: {
text: "Contact person 2 job title"
},
value: {
html: "Name<br/>email address here"
}
}
]
}) }}
{{ govukSummaryList({
card: {
title: {
text: "Trust contacts"
},
actions: {
items: [
{
href: "#",
text: "Change",
visuallyHiddenText: "trust contacts"
}
]
}
},
rows: [
{
key: {
text: "Contact person 1 job title"
},
value: {
html: "Alex James<br/>alex.james@example.com"
}
},
{
key: {
text: "Contact person 2 job title"
},
value: {
html: "Name<br/>email address here"
}
},
{
key: {
text: "Contact person 3 job title"
},
value: {
html: "Name<br/>email address here"
}
}
]
}) }}
Research on this pattern
We have not done research on this design pattern, but the pattern is being used in Prepare conversions and transfers and Complete conversions, transfers and changes to meet these user needs from our user needs database (opens a DfE Microsoft List):
- user need 1: when reaching out to a trust or academy, I need up to date details of people involved in the trust or academy, so that I get in touch with the right person
- user need 22: when I have a question about project data in MAP Complete and Prepare, I need the name and email address of the DO or RCS caseworker responsible for the project, so I can get in touch with them to address my query
- user need 23: when I need to contact the school becoming an academy directly, I need to know the name and email address of the head teacher, so that I can make contact with the correct person at the school
- user need 24: when I need to contact a trust involved in a conversion or transfer project, I need to know the name and email address of the key trust contact, so that I can make contact with the correct person at the trust
- user need 58: when I have queries about a trust or academy, I need to quickly identify who to contact for further information, so that I can have my queries answered by someone with knowledge of the trust or academy
- user need 66: when I have a question about a project and the assigned delivery officer/caseworker is on leave or has left their role; or I have a concern about a project that requires escalation, I need to know the name and contact details for the team leader and the G6 they report to, so that I can get my question answered / concern addressed efficiently