Report components Heading
Contents
<div class="dpr-report-heading">
<div class="dpr-report-heading__title">
<h1 id="dpr-report-name" class="govuk-heading-xl">
<span class="govuk-caption-l">Product Name</span>
Variant Name
</h1>
</div>
</div>
<details class="govuk-details dpr-meta-data-details" open>
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
details
</span>
</summary>
<div class="govuk-details__text">
<div class="dpr-request-details">
<table class="dpr-request-details__table" id="dpr-request-details-table">
<tbody>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Name:</p>
</td>
<td>
<p class="govuk-heading-s govuk-!-margin-bottom-0">Variant Name</p>
</td>
</tr>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Product:</p>
</td>
<td>
<p class="govuk-heading-s govuk-!-margin-bottom-0">Product Name</p>
</td>
</tr>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Description:</p>
</td>
<td>
<p class="govuk-body-m govuk-!-margin-bottom-0">Report Description</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</details>
<div class="dpr-report-details-print">
<div class="dpr-request-details">
<table class="dpr-request-details__table" id="dpr-request-details-table">
<tbody>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Name:</p>
</td>
<td>
<p class="govuk-heading-s govuk-!-margin-bottom-0">Variant Name</p>
</td>
</tr>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Product:</p>
</td>
<td>
<p class="govuk-heading-s govuk-!-margin-bottom-0">Product Name</p>
</td>
</tr>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Description:</p>
</td>
<td>
<p class="govuk-body-m govuk-!-margin-bottom-0">Report Description</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="dpr-report-interactive-actions">
</div>
</div>
Nunjucks macro options
| Name| Type| Required| Description|
| -----------| ---------| --------| ----------------------------------------|
| name|
string| Yes| The product/report name|
| reportName| string| Yes| The report variant name|
| description| string| no| The report description|
| actions| object| No| The report actions list. See Actions|
| detailsOpen| boolean| No| Set the report details default state|
{% from "dpr/components/_reports/report-heading/view.njk" import dprReportHeading %}
{{
dprReportHeading({
name: 'Variant Name',
reportName: 'Product Name',
description: 'Report Description',
detailsOpen: true
})
}}```
</div>
</div>
</div>
## Overview
The report heading component displays the important information of a report, and enables all available report actions for the report.
### When to use
Use the Heading component when you need to help users:
- display the report name and report variant name.
- display the report details, inlcuding description and request parameters
- include report actions along side the report.
## How to use
This component is designed to be used as the heading for a report. It should be included at the top of the report page to allow users to see the report imformaton clearly and immediatley, and highlight what report actions are available.
### Basic usage
Display the report name, variant name and description
<div class="app-example">
<span class="app-example__new-window">
<a href="/examples/report/heading" target="_blank"
>Open this example <span class="govuk-visually-hidden">(Report Heading (example))</span> in a new window</a
>
</span>
<iframe class="app-example__frame" height="430" src="/examples/report/heading" title="Report Heading (example)"></iframe>
</div>
<div class="app-tabs" data-module="app-tabs">
<div class="govuk-tabs" data-module="govuk-tabs">
<h2 class="govuk-tabs__title">
Contents
</h2>
<ul class="govuk-tabs__list">
<li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
<a class="govuk-tabs__tab" href="#blank-tab">
_
</a>
</li>
<li class="govuk-tabs__list-item">
<a class="govuk-tabs__tab" href="#htmldefault">
HTML
</a>
</li>
<li class="govuk-tabs__list-item">
<a class="govuk-tabs__tab" href="#nunjucksdefault">
Nunjucks
</a>
</li>
</ul>
<div class="govuk-tabs__panel" id="blank-tab">
</div>
<div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="htmldefault">
```html <div class="dpr-report-header">
<div class="dpr-report-heading">
<div class="dpr-report-heading__title">
<h1 id="dpr-report-name" class="govuk-heading-xl">
<span class="govuk-caption-l">Product Name</span>
Variant Name
</h1>
</div>
</div>
<details class="govuk-details dpr-meta-data-details" open>
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
details
</span>
</summary>
<div class="govuk-details__text">
<div class="dpr-request-details">
<table class="dpr-request-details__table" id="dpr-request-details-table">
<tbody>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Name:</p>
</td>
<td>
<p class="govuk-heading-s govuk-!-margin-bottom-0">Variant Name</p>
</td>
</tr>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Product:</p>
</td>
<td>
<p class="govuk-heading-s govuk-!-margin-bottom-0">Product Name</p>
</td>
</tr>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Description:</p>
</td>
<td>
<p class="govuk-body-m govuk-!-margin-bottom-0">Report Description</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</details>
<div class="dpr-report-details-print">
<div class="dpr-request-details">
<table class="dpr-request-details__table" id="dpr-request-details-table">
<tbody>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Name:</p>
</td>
<td>
<p class="govuk-heading-s govuk-!-margin-bottom-0">Variant Name</p>
</td>
</tr>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Product:</p>
</td>
<td>
<p class="govuk-heading-s govuk-!-margin-bottom-0">Product Name</p>
</td>
</tr>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Description:</p>
</td>
<td>
<p class="govuk-body-m govuk-!-margin-bottom-0">Report Description</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="dpr-report-interactive-actions">
</div>
</div>
Nunjucks macro options
| Name| Type| Required| Description|
| -----------| ---------| --------| ----------------------------------------|
| name|
string| Yes| The product/report name|
| reportName| string| Yes| The report variant name|
| description| string| no| The report description|
| actions| object| No| The report actions list. See Actions|
| detailsOpen| boolean| No| Set the report details default state|
{% from "dpr/components/_reports/report-heading/view.njk" import dprReportHeading %}
{{
dprReportHeading({
name: 'Variant Name',
reportName: 'Product Name',
description: 'Report Description',
detailsOpen: true
})
}}```
</div>
</div>
</div>
### Heading with actions
Display the report information along side the report actions. [See the Actions component]()
<div class="app-example">
<span class="app-example__new-window">
<a href="/examples/report/heading/actions" target="_blank"
>Open this example <span class="govuk-visually-hidden">(Report Heading with actions (example))</span> in a new window</a
>
</span>
<iframe class="app-example__frame" height="450" src="/examples/report/heading/actions" title="Report Heading with actions (example)"></iframe>
</div>
<div class="app-tabs" data-module="app-tabs">
<div class="govuk-tabs" data-module="govuk-tabs">
<h2 class="govuk-tabs__title">
Contents
</h2>
<ul class="govuk-tabs__list">
<li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
<a class="govuk-tabs__tab" href="#blank-tab">
_
</a>
</li>
<li class="govuk-tabs__list-item">
<a class="govuk-tabs__tab" href="#htmlactions">
HTML
</a>
</li>
<li class="govuk-tabs__list-item">
<a class="govuk-tabs__tab" href="#nunjucksactions">
Nunjucks
</a>
</li>
</ul>
<div class="govuk-tabs__panel" id="blank-tab">
</div>
<div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="htmlactions">
```html <div class="dpr-report-header">
<div class="dpr-report-heading__actions">
<div class="report-actions" data-dpr-module="report-actions">
<div class="moj-button-menu">
<button type="submit" class="govuk-button moj-button-menu__item govuk-button--secondary {{ button.id }}" data-module="govuk-button" id="dpr-button-printable" data-href="#" aria-label="print report">
Print
</button>
<button type="submit" class="govuk-button moj-button-menu__item govuk-button--secondary {{ button.id }}" data-module="govuk-button" id="dpr-button-sharable" data-href="mailto:?subject=Product Name - Variant Name&body=link/to/report" aria-label="Email report link">
Share
</button>
<button type="submit" class="govuk-button moj-button-menu__item govuk-button--secondary {{ button.id }}" data-module="govuk-button" id="dpr-button-copy" data-href="url/of/report" aria-label="report request">
Copy
</button>
</div>
<div class="dpr-display-none"></div>
</div>
</div>
<div class="dpr-report-heading">
<div class="dpr-report-heading__title">
<h1 id="dpr-report-name" class="govuk-heading-xl">
<span class="govuk-caption-l">Product Name</span>
Variant Name
</h1>
</div>
</div>
<details class="govuk-details dpr-meta-data-details" open>
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
details
</span>
</summary>
<div class="govuk-details__text">
<div class="dpr-request-details">
<table class="dpr-request-details__table" id="dpr-request-details-table">
<tbody>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Name:</p>
</td>
<td>
<p class="govuk-heading-s govuk-!-margin-bottom-0">Variant Name</p>
</td>
</tr>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Product:</p>
</td>
<td>
<p class="govuk-heading-s govuk-!-margin-bottom-0">Product Name</p>
</td>
</tr>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Description:</p>
</td>
<td>
<p class="govuk-body-m govuk-!-margin-bottom-0">Report Description</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</details>
<div class="dpr-report-details-print">
<div class="dpr-request-details">
<table class="dpr-request-details__table" id="dpr-request-details-table">
<tbody>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Name:</p>
</td>
<td>
<p class="govuk-heading-s govuk-!-margin-bottom-0">Variant Name</p>
</td>
</tr>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Product:</p>
</td>
<td>
<p class="govuk-heading-s govuk-!-margin-bottom-0">Product Name</p>
</td>
</tr>
<tr>
<td class="dpr-request-details__table-heading">
<p class="govuk-body-m dpr-request-details__table-heading_name">Description:</p>
</td>
<td>
<p class="govuk-body-m govuk-!-margin-bottom-0">Report Description</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="dpr-report-interactive-actions">
</div>
</div>
{% from "dpr/components/_reports/report-heading/view.njk" import dprReportHeading %}
{%
set actions = [
{
id: "dpr-button-printable",
disabled: false,
text: "Print",
ariaLabelText: "print report",
href: "#"
},
{
id: "dpr-button-sharable",
disabled: false,
text: "Share",
ariaLabelText: "Email report link",
href: "mailto:?subject=Product Name - Variant Name&body=link/to/report"
},
{
id: "dpr-button-copy",
disabled: false,
text: "Copy",
ariaLabelText: "report request",
href: "url/of/report"
}
]
%}
{{
dprReportHeading({
name: 'Variant Name',
reportName: 'Product Name',
description: 'Report Description',
actions: actions,
detailsOpen: true
})
}}```
</div>
</div>
</div>