Documentation for page details site functionality
- Status
- Stable
- Type
- Canada.ca site functionality
- Last review
- 2022-06-30
Purpose
Displays the Page details section in a footer tag.
Can contain the following components:
- Report a problem on this page
- Share this page
- Date modified
Working example
- Default page details example
- Page details without Report a problem and Share this page buttons example
- Page details without Report a problem button example
- Page details without Share this page button example
- Page details v.1.0 (deprecated) example
How to implement
To show the "Report a problem on this page" button, create a
<div>with the following data attribute:data-ajax-replace="../feedback/ajax/report-problem-en.html".For the basic HTML version, a link element should be created that points to the report a problem form page:
<a class="btn btn-default btn-block" href="https://www.canada.ca/en/report-problem.html">Report a problem on this page</a>For more information about Data Ajax plugin, please visit Data Ajax documentation page
To show the "Share this page" button create a
<div>with the following data attribute:data-wb-share='{"lnkClass": "btn btn-default btn-block"}'and the following CSS classclass="wb-share"For more information about Share widget plugin, please visit Share widget page
The Date modified - normal text format containing the modified date.
Evaluation and report
There is no evaluation and report available for this component.
API (Version 2.1)
| CSS Class | Template | Visual rendering | Schema |
|---|---|---|---|
| Version 1.0 | Version 2.1 | Version 1.0 | n.a. |
CSS Class (v1.0)
pagedetails
Template (v2.1)
Template migration notes
Version 2.0 support
Although the template has been updated to version 2.1, the version 2.0 is still supported. However, the page content and the <footer> have to be located inside an <article>. Here's a code example:
<main>
<article>
...
Page content
...
<footer class="pagedetails">
...
</footer>
</article>
</main>Page details with "Report a problem on this page" and "Share this page" enabled
Version 2.1
Check this page for the html inserted by the Data Ajax plugin.
<section class="pagedetails">
<h2 class="wb-inv">Page details</h2>
<div class="row">
<div class="col-sm-8 col-md-9 col-lg-9">
<div data-ajax-replace="../feedback/ajax/report-problem-en.html" >
<div class="row row-no-gutters">
<div class="col-sm-9 col-md-6 col-lg-5">
<a class="btn btn-default btn-block" href="https://www.canada.ca/en/report-problem.html">Report a problem on this page</a>
</div>
</div>
</div>
</div>
<div class="wb-share col-sm-4 col-md-3" data-wb-share='{"lnkClass": "btn btn-default btn-block"}' >
</div>
<div class="col-xs-12">
<dl id="wb-dtmd">
<dt>Date modified:</dt>
<dd><time property="dateModified">2022-04-14</time></dd>
</dl>
</div>
</div>
</section>Previous versions
Version 2.0
Check this page for the html inserted by the Data Ajax plugin.
<footer class="pagedetails">
<h2 class="wb-inv">Page details</h2>
<div class="row">
<div class="col-sm-8 col-md-9 col-lg-9">
<div data-ajax-replace="../feedback/ajax/report-problem-en.html" >
<div class="row row-no-gutters">
<div class="col-sm-9 col-md-6 col-lg-5">
<a class="btn btn-default btn-block" href="https://www.canada.ca/en/report-problem.html">Report a problem on this page</a>
</div>
</div>
</div>
</div>
<div class="wb-share col-sm-4 col-md-3" data-wb-share='{"lnkClass": "btn btn-default btn-block"}' >
</div>
<div class="col-xs-12">
<dl id="wb-dtmd">
<dt>Date modified:</dt>
<dd><time property="dateModified">2022-04-14</time></dd>
</dl>
</div>
</div>
</footer>Version 1.0
<div class="pagedetails">
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-4">
<details class="brdr-0">
<summary class="btn btn-default text-center">Report a problem on this page</summary>
<div class="well row">
<div class="gc-rprt-prblm">
<div class="gc-rprt-prblm-frm gc-rprt-prblm-tggl" id="wb-auto-4">
{ feedback form }
</div>
<div class="gc-rprt-prblm-thnk gc-rprt-prblm-tggl hide" id="wb-auto-5">
<h3>Thank you for your help!</h3>
<p>You will not receive a reply. For enquiries, please <a href="https://www.canada.ca/en/contact.html">contact us</a>.</p>
</div>
</div>
</div>
</details>
</div>
<div class="wb-share col-sm-4 col-md-3 col-sm-offset-2 col-md-offset-4 col-lg-offset-5 wb-init wb-share-inited" data-wb-share='{"lnkClass": "btn btn-default btn-block"}' >
</div>
</div>
<dl id="wb-dtmd">
<dt>Date modified:</dt>
<dd><time property="dateModified">2022-04-25</time></dd>
</dl>
</div>Page details with "Report a problem on this page" and "Share this page" disabled
Version 2.1
<section class="pagedetails container">
<h2 class="wb-inv">Page details</h2><dl id="wb-dtmd">
<div class="row">
<div class="col-xs-12">
<dl id="wb-dtmd">
<dt>Date modified:</dt>
<dd><time property="dateModified">2022-04-14</time></dd>
</dl>
</div>
</div>
</section>Previous versions
Version 2.0
<footer class="pagedetails container">
<h2 class="wb-inv">Page details</h2><dl id="wb-dtmd">
<div class="row">
<div class="col-xs-12">
<dl id="wb-dtmd">
<dt>Date modified:</dt>
<dd><time property="dateModified">2022-04-14</time></dd>
</dl>
</div>
</div>
</footer>Version 1.0
<div class="pagedetails container">
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-4"></div>
</div>
<dl id="wb-dtmd">
<dt>Date modified:</dt>
<dd><time property="dateModified">2022-04-25</time></dd>
</dl>
</div>Page details without "Report a problem on this page" button
Version 2.1
<section class="pagedetails">
<h2 class="wb-inv">Page details</h2>
<div class="row">
<div class="wb-share col-sm-4 col-md-3 col-sm-push-8 col-md-push-9" data-wb-share='{"lnkClass": "btn btn-default btn-block"}'></div>
<div class="col-sm-6 col-md-5 col-lg-4 col-sm-pull-4 col-md-pull-3">
<dl id="wb-dtmd">
<dt>Date modified:</dt>
<dd><time property="dateModified">2022-04-14</time></dd>
</dl>
</div>
</div>
</section>Previous versions
Version 2.0
<footer class="pagedetails">
<h2 class="wb-inv">Page details</h2>
<div class="row">
<div class="wb-share col-sm-4 col-md-3 col-sm-push-8 col-md-push-9" data-wb-share='{"lnkClass": "btn btn-default btn-block"}'></div>
<div class="col-sm-6 col-md-5 col-lg-4 col-sm-pull-4 col-md-pull-3">
<dl id="wb-dtmd">
<dt>Date modified:</dt>
<dd><time property="dateModified">2022-04-14</time></dd>
</dl>
</div>
</div>
</footer>Version 1.0
<div class="pagedetails container">
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-4"></div>
<div class="col-sm-4 col-md-3 col-sm-offset-2 col-md-offset-4 col-lg-offset-5">
<div class="wb-share " data-wb-share='{"lnkClass": "btn btn-default btn-block"}' >
</div>
</div>
</div>
<dl id="wb-dtmd">
<dt>Date modified:</dt>
<dd><time property="dateModified">2022-04-25</time></dd>
</dl>
</div>Page details without "Share this page" button
Version 2.0
Check this page for the html inserted by the Data Ajax plugin
<section class="pagedetails">
<h2 class="wb-inv">Page details</h2>
<div class="row">
<div class="col-sm-8 col-md-9 col-lg-9">
<div data-ajax-replace="../feedback/ajax/report-problem-en.html" >
<div class="row row-no-gutters">
<div class="col-sm-9 col-md-6 col-lg-5">
<a class="btn btn-default btn-block" href="https://www.canada.ca/en/report-problem.html">Report a problem on this page</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<dl id="wb-dtmd">
<dt>Date modified:</dt>
<dd><time property="dateModified">2022-04-14</time></dd>
</dl>
</div>
</div>
</section>Previous versions
Version 2.0
Check this page for the html inserted by the Data Ajax plugin
<footer class="pagedetails">
<h2 class="wb-inv">Page details</h2>
<div class="row">
<div class="col-sm-8 col-md-9 col-lg-9">
<div data-ajax-replace="../feedback/ajax/report-problem-en.html" >
<div class="row row-no-gutters">
<div class="col-sm-9 col-md-6 col-lg-5">
<a class="btn btn-default btn-block" href="https://www.canada.ca/en/report-problem.html">Report a problem on this page</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<dl id="wb-dtmd">
<dt>Date modified:</dt>
<dd><time property="dateModified">2022-04-14</time></dd>
</dl>
</div>
</div>
</footer>Before, Version 1.0
<div class="pagedetails">
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-4">
<details class="brdr-0">
<summary class="btn btn-default text-center">Report a problem on this page</summary>
<div class="well row">
<div class="gc-rprt-prblm">
<div class="gc-rprt-prblm-frm gc-rprt-prblm-tggl" >
{ feedback form }
</div>
<div class="gc-rprt-prblm-thnk gc-rprt-prblm-tggl hide" >
<h3>Thank you for your help!</h3>
<p>You will not receive a reply. For enquiries, please <a href="https://www.canada.ca/en/contact.html">contact us</a>.</p>
</div>
</div>
</div>
</details>
</div>
</div>
<dl id="wb-dtmd">
<dt>Date modified:</dt>
<dd><time property="dateModified">2022-04-25</time></dd>
</dl>
</div>Visual Rendering (v2.0)
- Report a problem (on the left side of the page) as described in the report a problem example
- Share this page (on the right side of the page) as described in the Share widget documentation
- Date modified - normal text format containing the modified date having the date format YYYY-MM-DD, on the bottom :
<dl id="wb-dtmd"> <dt>Date modified:</dt> <dd><time property="dateModified">2022-04-25</time></dd> </dl>
Page details
- Date modified: