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.0)
| CSS Class | Template | Visual rendering | Schema |
|---|---|---|---|
| Version 1.0 | Version 2.0 | Version 1.0 | n.a. |
CSS Class (v1.0)
pagedetails
Template (v2.0)
Template migration notes
Page details with "Report a problem on this page" and "Share this page" enabled
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>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" 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.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>Before, 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.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>Before, 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
<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>