Skip to content

Commit

Permalink
Merge pull request #424 from canada-ca/ILP-linkupdate
Browse files Browse the repository at this point in the history 
add alert for coded example
  • Loading branch information
@donohuech
donohuech authored Feb 22, 2024
2 parents 4fbc540 + c739495 commit 90cef0c
Showing 1 changed file with 3 additions and 360 deletions.
363 changes: 3 additions & 360 deletions mandatory-templates/institutional-profile-pages.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,10 @@ title: Institutional landing page mandatory template
<section>
<h2 id="specifications">How to implement</h2>
<p>You can use either the <strong>beta</strong> or the <strong>stable</strong> version of this template.</p>
<section>
<h3>Beta institutional landing page</h3>
<div id="code" class="alert alert-warning">
<p>We are stabilizing the institutional landing page. This coded example of the beta version will be deprecated soon. A link to the stabilized code will be provided once available on GCWeb.</p>
</div>
<p>The beta version is an improvement over the stable version. The code is still under review. It may still be subject to changes.</p>
<p>The beta version will eventually replace the stable version.</p>
<p>You will need to apply custom CSS to use this beta version.</p>
Expand All @@ -59,365 +61,6 @@ title: Institutional landing page mandatory template
</div>
</div>
</div>
<details>
<summary>Code</summary>
<span id="code"></span>
<div class="wb-tabs">
<div class="tabpanels">
<details id="details-panel1">
<summary>HTML</summary>
<pre><code>&lt;div class="provisional bg-cover bg-right bg-hide-sm bg-hide-xs mrgn-tp-md pb-3" data-bgimg="put your image link here"&gt;
&lt;div class="container"&gt;
&lt;div class="row"&gt;
&lt;div class="col-md-7"&gt;
&lt;h1 property="name" id="wb-cont"&gt;[Institution name]&lt;/h1&gt;
&lt;p&gt;Short description of the institution’s mandate.&lt;/p&gt;
&lt;a class="provisional btn btn-call-to-action" href="#"&gt;Super task button [optional]&lt;/a&gt;
&lt;/div&gt;
&lt;div class="clearfix"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;section class="provisional gc-featured-lnk"&gt;
&lt;div class="container"&gt;
&lt;h2 class="wb-inv"&gt;Featured link&lt;/h2&gt;
&lt;a class="h5" href="#"&gt;Featured link [optional]&lt;/a&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class="provisional most-requested-bullets well well-sm brdr-0"&gt;
&lt;div class="container"&gt;
&lt;div class="row"&gt;
&lt;div class="pddng-r-0 col-md-2"&gt;
&lt;h2 class="mrgn-tp-md"&gt;Most requested&lt;/h2&gt;
&lt;/div&gt;
&lt;div class="col-md-10"&gt;
&lt;ul class="wb-eqht mrgn-tp-md mrgn-bttm-md colcount-md-2"&gt;
&lt;li&gt;&lt;a href="#"&gt;[Top task hyperlink]&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;[Top task hyperlink]&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;[Top task hyperlink]&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;[Top task hyperlink]&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;[Top task hyperlink]&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;[Top task hyperlink]&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class="gc-srvinfo col-md-12 mrgn-bttm-lg"&gt;
&lt;div class="container"&gt;
&lt;div class="row"&gt;
&lt;h2 class="wb-inv"&gt;Services and information&lt;/h2&gt;
&lt;div class="wb-eqht"&gt;
&lt;div class="col-lg-4 col-md-6"&gt;
&lt;h3&gt;&lt;a href="#"&gt;[Hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="col-lg-4 col-md-6"&gt;
&lt;h3&gt;&lt;a href="#"&gt;[Hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="col-lg-4 col-md-6"&gt;
&lt;h3&gt;&lt;a href="#"&gt;[Hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="col-lg-4 col-md-6"&gt;
&lt;h3&gt;&lt;a href="#"&gt;[Hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="col-lg-4 col-md-6"&gt;
&lt;h3&gt;&lt;a href="#"&gt;[Hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="col-lg-4 col-md-6"&gt;
&lt;h3&gt;&lt;a href="#"&gt;[Hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="col-lg-4 col-md-6"&gt;
&lt;h3&gt;&lt;a href="#"&gt;[Hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="col-lg-4 col-md-6"&gt;
&lt;h3&gt;&lt;a href="#"&gt;[Hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="col-lg-4 col-md-6"&gt;
&lt;h3&gt;&lt;a href="#"&gt;[Hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="clearfix"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;div class="clearfix"&gt;&lt;/div&gt;
&lt;section class="well well-sm brdr-0 mrgn-bttm-0"&gt;
&lt;div class="container"&gt;
&lt;div class="wb-eqht"&gt;
&lt;h2 class="h3 mrgn-tp-md"&gt;Contact us&lt;/h2&gt;
&lt;ul class="provisional list-bld list-unstyled mrgn-tp-lg lst-spcd-2 colcount-md-3"&gt;
&lt;li&gt;&lt;a href="#"&gt;Contact [Institution]&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;[Top contact task 2]&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;[Top contact task 3]&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="row"&gt;
&lt;section class="col-md-8 pull-left mrgn-bttm-lg"&gt;
&lt;h2 class="h3 mrgn-tp-md"&gt;About the [Institution]&lt;/h2&gt;
&lt;ul class="provisional list-bld list-unstyled mrgn-tp-lg lst-spcd-2 colcount-md-2"&gt;
&lt;li&gt;&lt;a href="#"&gt;Mandate&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Organizational structure&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Transparency&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Job opportunities&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Reports&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Compliance&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Enforcement notifications&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;[Institutional link]&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;[Institutional link]&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;More: &lt;a href="#"&gt;About the [Institution]&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/section&gt;
&lt;div class="provisional col-md-4 col-sm-5 pull-right xs-left"&gt;
&lt;section class="lnkbx"&gt;
&lt;h2 class="h3"&gt;Minister&lt;/h2&gt;
&lt;p&gt;
&lt;a href="#"&gt;[(Honourable) first and last name]&lt;/a&gt;&lt;br&gt;
&lt;small&gt;Minister's official title&lt;/small&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;a href="#"&gt;[(Honourable) first and last name]&lt;/a&gt;&lt;br&gt;
&lt;small&gt;Minister's official title&lt;/small&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;a href="#"&gt;[(Honourable) first and last name]&lt;/a&gt;&lt;br&gt;
&lt;small&gt;Minister's official title&lt;/small&gt;
&lt;/p&gt;
&lt;/section&gt;
&lt;section class="provisional followus"&gt;
&lt;h2 class="mrgn-tp-lg h3"&gt;Follow us&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#" class="facebook" rel="external"&gt;&lt;span class="wb-inv"&gt;Facebook&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" class="twitter" rel="external"&gt;&lt;span class="wb-inv"&gt;Twitter&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" class="youtube" rel="external"&gt;&lt;span class="wb-inv"&gt;YouTube&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" class="linkedin" rel="external"&gt;&lt;span class="wb-inv"&gt;LinkedIn&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/section&gt;
&lt;/div&gt;
&lt;div class="clearfix"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;div class="container"&gt;
&lt;div class="row"&gt;
&lt;section class="col-md-4 wb-feeds limit-3 gc-nws"&gt;
&lt;h2 class="h3"&gt;News&lt;/h2&gt;
&lt;!-- demonstrate the look - use json feed where applicable --&gt;
&lt;ul class="feeds-cont list-unstyled lst-spcd feed-active"&gt;
&lt;li&gt;&lt;a href="#"&gt;[News title]&lt;/a&gt;&lt;br&gt; &lt;small class="feeds-date"&gt;YYYY-MM-DD HH:MM&lt;/small&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;[News title]&lt;/a&gt;&lt;br&gt; &lt;small class="feeds-date"&gt;YYYY-MM-DD HH:MM&lt;/small&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;[News title]&lt;/a&gt;&lt;br&gt; &lt;small class="feeds-date"&gt;YYYY-MM-DD HH:MM&lt;/small&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- json feed for news example
&lt;ul class="feeds-cont list-unstyled lst-spcd"&gt;
&lt;li&gt; &lt;a data-ajax="https://www.canada.ca/content/canadasite/api/nws/fds/en/web-feeds/revenue-agency.json" href="https://www.canada.ca/en/revenue-agency.atom.xml" rel="external"&gt;Canada Revenue Agency news items&lt;/a&gt; &lt;/li&gt;
&lt;/ul&gt;--&gt;
&lt;p&gt;More: &lt;a href="#" class="admin"&gt;[Institution] news&lt;/a&gt;&lt;/p&gt;
&lt;/section&gt;
&lt;section class="col-md-8 gc-prtts"&gt;
&lt;h2 class="h3"&gt;Features&lt;/h2&gt;
&lt;div class="row wb-eqht gc-srvinfo"&gt;
&lt;div class="col-sm-6"&gt;
&lt;div class="well well-sm brdr-rds-0 eqht-trgt"&gt;
&lt;img class="img-responsive full-width" src="https://wet-boew.github.io/themes-dist/GCWeb/img/360x203.png" alt=""&gt;
&lt;h3 class="h5"&gt;&lt;a href="#" class="stretched-link"&gt;[Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Brief description of the feature being promoted.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-sm-6"&gt;
&lt;div class="well well-sm brdr-rds-0 eqht-trgt"&gt;
&lt;img class="img-responsive full-width" src="https://wet-boew.github.io/themes-dist/GCWeb/img/360x203.png" alt=""&gt;
&lt;h3 class="h5"&gt;&lt;a href="#" class="stretched-link"&gt;[Feature hyperlink text]&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Brief description of the feature being promoted.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</details>
<details id="details-panel2">
<summary>CSS</summary>
<pre><code>.provisional.bg-cover {
background-size: cover;
}

.provisional.bg-right {
background-position: right;
}

.provisional.pb-3 {
padding-bottom: 15px;
}

.provisional.btn-call-to-action {
font-size: 1em;
}

.provisional.gc-featured-lnk {
background: #31708f;
margin-bottom: 0em;
padding-top:20px;
padding-bottom:20px;
}

.provisional.gc-featured-lnk a {
color:#fff
}

ul.feeds-cont li a {
font-weight: bold;
}

.provisional.most-requested-bullets li {
font-family: 'Lato', sans-serif;
font-size: 17px;
font-weight: 600;
line-height: 26px;
margin-top: 0
}

.provisional.most-requested-bullets .pddng-r-0 {
padding-right: 0px;
}

.provisional.most-requested-bullets h2 {
font-size: 1.2em;
}

.provisional.list-bld {
font-weight: 600;
}

.provisional.followus h2 {
font-size: 1.1em;
margin-top: 10px;
}

.provisional.followus {
padding: 0;
}

.provisional.followus h2 {
display: block;
}

.provisional.followus h2,
.provisional.followus ul {
margin-left: 0;
}

.provisional.followus-vertical {
line-height: 0em;
}

.provisional.followus-vertical,
.provisional.followus {
background-color: transparent;
}

.provisional.followus-vertical a {
text-decoration: none;
}

.provisional.followus-vertical ul {
display: block;
list-style-type: none;
margin-block-start: 1em;
padding-inline-start: 1em;
font-size: 16px;
margin-block-end: 0em;
}

.provisional.followus-vertical ul li {
margin-bottom: 15px;
}

.provisional.followus-vertical ul li:last-child {
margin-bottom: 0px;
}

.provisional.followus-vertical ul li a {
border: none;
padding: 0px 5px;
}

.provisional.followus ul li a {
border: none;
}

.provisional .social-lnk {
position: relative;
bottom:-18px;
left:45px;
}

.provisional.followus-vertical li {
display: block;
background-position: left;
}

.provisional.followus .facebook,
.provisional.followus .twitter,
.provisional.followus .youtube,
.provisional.followus .instagram,
.provisional.followus .linkedin {
display: block;
height: 38px;
width: 38px;
}
/* remove this section if you do not want the new icons */

.provisional.followus .facebook {
background: url("https://design.canada.ca/images/social-media/facebook.png") 0 0 / cover no-repeat;
}
.provisional.followus .twitter {
background: url("https://design.canada.ca/images/social-media/twitter.png") 0 0 / cover no-repeat;
}
.provisional.followus .youtube {
background: url("https://design.canada.ca/images/social-media/youtube.png") 0 0 / cover no-repeat;
}
.provisional.followus .instagram {
background: url("https://design.canada.ca/images/social-media/instagram.png") 0 0 / cover no-repeat;
}
.provisional.followus .linkedin {
background: url("https://design.canada.ca/images/social-media/linkedin.png") 0 0 / cover no-repeat;
}
/* end of new social media icons */


@media screen and (max-width: 767px) {
.provisional.bg-hide-xs {
background-image: url("none") !important;
}

.provisional.btn-call-to-action {
font-size: .9em;
}

.provisional.xs-left {
float: left !important;
}
}

@media (min-width:768px) and (max-width:991px) {
.provisional.bg-hide-sm {
background-image: url("none") !important;
}
}</code></pre>
</details>
</div>
</div>
</details>
</section>
<div class="clearfix"></div>
<section>
<h3>Stable institutional landing page</h3>
Expand Down

0 comments on commit 90cef0c

Please sign in to comment.