create and link demo page

wet-boew · Sep 19, 2023 · 97652ad · 97652ad
1 parent 163690b
commit 97652ad
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 30 deletions.
diff --git a/components/gc-intro/gc-intro-block-demos-en.html b/components/gc-intro/gc-intro-block-demos-en.html
@@ -0,0 +1,37 @@
+---
+{
+	"title": "GC intro block working examples",
+	"language": "en",
+	"altLangPage": "intro-block-demos-fr.html",
+	"layout": "no-container",
+	"dateModified": "2023-09-13"
+}
+---
+<div class="bg-center bg-cover" data-bgimg-srcset="img/1x1.png 991w, img/ip-cover-image-1200x726.jpg 992w">
+	<div class="container">
+		<div class="row mrgn-bttm-md">
+			<div class="col-md-7">
+			<h1 property="name" id="wb-cont">[Institution name]</h1>
+				<p>Short description of the institution’s mandate.</p>
+				<p><a class="btn btn-call-to-action" href="#">Super task button [optional]</a></p>
+			</div>
+		</div>
+	</div>
+</div>
+
+<pre><code>&lt;div class="bg-center bg-cover" data-bgimg-srcset="img/1x1.png 991w, img/ip-cover-image-1200x726.jpg 992w">
+	&lt;div class="container">
+		&lt;div class="row mrgn-bttm-md">
+			&lt;div class="col-md-7">
+			&lt;h1 property="name" id="wb-cont">[Institution name]&lt;/h1>
+				&lt;p>Short description of the institution’s mandate.&lt;/p>
+				&lt;p>&lt;a class="btn btn-call-to-action" href="#">Super task button [optional]&lt;/a>&lt;/p>
+			&lt;/div>
+		&lt;/div>
+	&lt;/div>
+&lt;/div></code></pre>
+
+<pre><code>
+	&lt;h1 property="name" id="wb-cont" dir="ltr">Introduction block pattern&lt;/h1>
+	&lt;p>The introduction block pattern introduces the content of a landing page.&lt;/p>
+</code></pre>
diff --git a/components/gc-intro/gc-intro-block-en.html b/components/gc-intro/gc-intro-block-en.html
@@ -14,7 +14,6 @@ <h1 property="name" id="wb-cont" dir="ltr">{{ page.title }}</h1>
 
 	<h2>On this page</h2>
 	<ul>
-		<!-- <li><a href="#inc-components">Included components</a></li> -->
 		<li><a href="#before-start">Before you start</a></li>
 		<li><a href="#accessibility-guidance">Accessibility guidance</a></li>
 		<li><a href="#variations">Variations</a></li>
@@ -27,7 +26,7 @@ <h2 id="before-start">Before you start</h2>
 
 	<ul>
 		<li><a href="">How to set up the institutional landing page</a></li>
-		<li><a href="">Introduction block pattern</a></li>
+		<li><a href="https://design.canada.ca/common-design-patterns/intro-block.html">Introduction block pattern</a></li>
 	</ul>
 
 	<h2 id="accessibility-guidance">Accessibility guidance</h2>
@@ -47,34 +46,9 @@ <h2 id="variations">Variations</h2>
 	</ul>
 
 	<h3>Introduction block</h3>
-	<div class="bg-center bg-cover" data-bgimg-srcset="img/1x1.png 991w, img/ip-cover-image-1200x726.jpg 992w">
-		<div class="container">
-			<div class="row mrgn-bttm-md">
-				<div class="col-md-7">
-				<h1 property="name" id="wb-cont">[Institution name]</h1>
-					<p>Short description of the institution’s mandate.</p>
-					<a class="btn btn-call-to-action" href="#">Super task button [optional]</a>
-				</div>
-			</div>
-		</div>
-	</div>
-
-	<div class="container">
-		<h3>Code</h3>
-		<pre><code>
-		&lt;div class="bg-center bg-cover" data-bgimg-srcset="img/1x1.png 991w, img/ip-cover-image-1200x726.jpg 992w"&gt;
-	&lt;div class="container"&gt;
-		&lt;div class="row mrgn-bttm-md"&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="btn btn-call-to-action" href="#"&gt;Super task button [optional]&lt;/a&gt;
-			&lt;/div&gt;
-		&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/div&gt;
-	</code></pre>
-</div>
+	<ul>
+		<li><a href="./gc-intro-block-demos-en.html">Working examples</a></li>
+	</ul>
 
 <h2 id="eval-report">Evaluation and report</h2>
 <p>There is no accessibility report.</p>