Thématique - Canada Day (th-canadaday) - Feature tiles update (#2298)

Thématique - Canada day (th-canadaday) - Update
wet-boew · Dec 11, 2023 · 34e0921 · 34e0921
1 parent 6f0de3e
commit 34e0921
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 57 deletions.
diff --git a/méli-mélo/th-canadaday/canada-day.html b/méli-mélo/th-canadaday/canada-day.html
@@ -1,6 +1,6 @@
 ---
 title: Canada Day theme
-dateModified: 2023-05-12
+dateModified: 2023-12-06
 description: Canada Day CSS styles
 lang: en
 css:
@@ -210,78 +210,128 @@ <h4>&lt;a&gt; .btn example</h4>
 <h5>Code</h5>
 <pre><code>&lt;a href="#" class="btn btn-default bg-canadaday-beige" role="button"&gt;Button&lt;/a&gt;</code></pre>
 <h2 id="a3">Feature tiles using panels</h2>
-<h3>Appearance</h3>
+<h3>Image, linked heading, and text</h3>
+<h4>Appearance</h4>
 <div class="row wb-eqht mrgn-tp-md">
-    <div class="col-xs-12 col-sm-4 col-md-4 mrgn-bttm-md">
-        <section class="panel panel-default panel-canadaday-card p-0 hght-inhrt">            
-            <header class="panel-heading">
-                <img class="img-responsive full-width" src="https://placehold.co/992x661" alt="">
-                <h4 class="panel-title mrgn-tp-lg mrgn-bttm-0"><a href="#" class="stretched-link">Title 1 with new CSS</a></h4>
+    <div class="col-xs-12 col-sm-6 col-md-4 mrgn-bttm-md">
+        <section class="panel panel-default panel-canadaday-card hght-inhrt">
+            <header class="panel-heading"> 
+                <img class="img-responsive full-width" src="https://placehold.co/992x661.jpg" alt="">
+                <h5 class="panel-title h4"><a href="#" class="stretched-link">Title 1</a></h5>
             </header>
-            <div class="panel-body mrgn-bttm-0">
+            <div class="panel-body">
                 <p class="mrgn-bttm-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet turpis sapien. Nam eget blandit tortor, quis lacinia arcu.</p>
             </div>
         </section>
     </div>
-    <div class="col-xs-12 col-sm-4 col-md-4 mrgn-bttm-md">
-        <section class="panel panel-default panel-canadaday-card p-0 hght-inhrt">            
-            <header class="panel-heading">
-                <img class="img-responsive full-width" src="https://placehold.co/992x661" alt="">
-                <h4 class="panel-title mrgn-tp-lg mrgn-bttm-0"><a href="#" class="stretched-link">Title 2 with new CSS</a></h4>
+    <div class="col-xs-12 col-sm-6 col-md-4 mrgn-bttm-md">
+        <section class="panel panel-default panel-canadaday-card hght-inhrt">
+            <header class="panel-heading"> 
+                <img class="img-responsive full-width" src="https://placehold.co/992x661.jpg" alt="">
+                <h5 class="panel-title h4"><a href="#" class="stretched-link">Title 2</a></h5>
             </header>
-            <div class="panel-body mrgn-bttm-0">
+            <div class="panel-body">
                 <p class="mrgn-bttm-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
             </div>
         </section>
     </div>
-    <div class="col-xs-12 col-sm-4 col-md-4 mrgn-bttm-md">
-        <section class="panel panel-default panel-canadaday-card p-0 hght-inhrt">            
-            <header class="panel-heading">
-                <img class="img-responsive full-width" src="https://placehold.co/992x661" alt="">
-                <h4 class="panel-title mrgn-tp-lg mrgn-bttm-0"><a href="#" class="stretched-link">Title 3 with new CSS</a></h4>
+    <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-0 mrgn-bttm-md">
+        <section class="panel panel-default panel-canadaday-card hght-inhrt">
+            <header class="panel-heading"> 
+                <img class="img-responsive full-width" src="https://placehold.co/992x661.jpg" alt="">
+                <h5 class="panel-title h4"><a href="#" class="stretched-link">Title 3 lorem ipsum dolor sit amet</a></h5>
             </header>
-            <div class="panel-body mrgn-bttm-0">
+            <div class="panel-body">
                 <p class="mrgn-bttm-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet turpis sapien. Nam eget blandit tortor, quis lacinia arcu. Ut sit amet turpis sapien.</p>
             </div>
         </section>
     </div>
 </div>
-<h3>Code</h3>
-<pre><code>&lt;div class="col-xs-12 col-sm-4 col-md-4 mrgn-bttm-md"&gt;
-        &lt;section class="panel panel-default panel-canadaday-card p-0 hght-inhrt"&gt;            
-            &lt;header class="panel-heading"&gt;
-                &lt;img class="img-responsive full-width" src="https://placehold.co/992x661" alt=""&gt;
-                &lt;h4 class="panel-title mrgn-tp-lg mrgn-bttm-0"&gt;&lt;a href="#" class="stretched-link"&gt;Title 1 with new CSS&lt;/a&gt;&lt;/h4&gt;
-            &lt;/header&gt;
-            &lt;div class="panel-body mrgn-bttm-0"&gt;
-                &lt;p class="mrgn-bttm-0"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet turpis sapien. Nam eget blandit tortor, quis lacinia arcu.&lt;/p&gt;
-            &lt;/div&gt;
-        &lt;/section&gt;
-    &lt;/div&gt;
-    &lt;div class="col-xs-12 col-sm-4 col-md-4 mrgn-bttm-md"&gt;
-        &lt;section class="panel panel-default panel-canadaday-card p-0 hght-inhrt"&gt;            
-            &lt;header class="panel-heading"&gt;
-                &lt;img class="img-responsive full-width" src="https://placehold.co/992x661" alt=""&gt;
-                &lt;h4 class="panel-title mrgn-tp-lg mrgn-bttm-0"&gt;&lt;a href="#" class="stretched-link"&gt;Title 2 with new CSS&lt;/a&gt;&lt;/h4&gt;
-            &lt;/header&gt;
-            &lt;div class="panel-body mrgn-bttm-0"&gt;
-                &lt;p class="mrgn-bttm-0"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
-            &lt;/div&gt;
-        &lt;/section&gt;
-    &lt;/div&gt;
-    &lt;div class="col-xs-12 col-sm-4 col-md-4 mrgn-bttm-md"&gt;
-        &lt;section class="panel panel-default panel-canadaday-card p-0 hght-inhrt"&gt;            
-            &lt;header class="panel-heading"&gt;
-                &lt;img class="img-responsive full-width" src="https://placehold.co/992x661" alt=""&gt;
-                &lt;h4 class="panel-title mrgn-tp-lg mrgn-bttm-0"&gt;&lt;a href="#" class="stretched-link"&gt;Title 3 with new CSS&lt;/a&gt;&lt;/h4&gt;
-            &lt;/header&gt;
-            &lt;div class="panel-body mrgn-bttm-0"&gt;
-                &lt;p class="mrgn-bttm-0"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet turpis sapien. Nam eget blandit tortor, quis lacinia arcu. Ut sit amet turpis sapien.&lt;/p&gt;
-            &lt;/div&gt;
-        &lt;/section&gt;
-    &lt;/div&gt;</code></pre>
-<h4>CSS classes</h4>
+<h3>Linked heading, and text</h3>
+<h4>Appearance</h4>
+<div class="row wb-eqht mrgn-tp-lg">
+    <div class="col-sm-4 mrgn-bttm-md">
+        <section class="panel panel-default panel-canadaday-card eqht-trgt">
+            <header class="panel-heading">
+                <h5 class="panel-title h4"><a href="#" class="stretched-link">Title 1</a></h5>
+            </header>
+            <div class="panel-body">
+                <p>Lorem ipsum dolor sit amet</p>
+            </div>
+        </section>
+    </div>
+    <div class="col-sm-4 mrgn-bttm-md">
+        <section class="panel panel-default panel-canadaday-card eqht-trgt">
+            <header class="panel-heading">
+                <h5 class="panel-title h4"><a href="#" class="stretched-link">Title 2</a></h5>
+            </header>
+            <div class="panel-body">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
+            </div>
+        </section>
+    </div>
+    <div class="col-sm-4 mrgn-bttm-md">
+        <section class="panel panel-default panel-canadaday-card eqht-trgt">
+            <header class="panel-heading">
+                <h5 class="panel-title h4"><a href="#" class="stretched-link">Title 3</a></h5>
+            </header>
+            <div class="panel-body">
+                <p>Lorem ipsum dolor sit amet</p>
+            </div>
+        </section>
+    </div>
+</div>
+<h3>Linked text styled as a heading</h3>
+<h4>Appearance</h4>
+<div class="row wb-eqht">
+    <div class="col-sm-4 mrgn-bttm-md">
+        <div class="panel panel-default panel-canadaday-card eqht-trgt">
+            <div class="panel-body">
+                <p class="h4 mrgn-bttm-md"><a href="#" class="stretched-link">Link text 1</a></p>
+            </div>
+        </div>
+    </div>
+    <div class="col-sm-4 mrgn-bttm-md">
+        <div class="panel panel-default panel-canadaday-card eqht-trgt">
+            <div class="panel-body">
+                <p class="h4 mrgn-bttm-md"><a href="#" class="stretched-link">Link text 2</a></p>
+            </div>
+        </div>
+    </div>
+    <div class="col-sm-4 mrgn-bttm-md">
+        <div class="panel panel-default panel-canadaday-card eqht-trgt">
+            <div class="panel-body">
+                <p class="h4 mrgn-bttm-md"><a href="#" class="stretched-link">Link text 3 lorem ipsum dolor sit amet</a></p>
+            </div>
+        </div>
+    </div>
+</div>
+<h3>Image and linked text style as a heading, side-by-side</h3>
+<h4>Appearance</h4>
+<div class="row">
+    <div class="col-sm-6 col-lg-4">
+        <div class="d-flex panel panel-default panel-canadaday-card panel-canadaday-card-compact"> 
+            <img src="https://placehold.co/110x110.jpg" alt="" class="d-flex align-self-center mrgn-rght-md">
+            <p class="d-flex align-self-center h4"><a href="#" class="stretched-link">Link text 1</a></p>
+        </div>
+    </div>
+    <div class="col-sm-6 col-lg-4">
+        <div class="d-flex panel panel-default panel-canadaday-card panel-canadaday-card-compact"> 
+            <img src="https://placehold.co/110x110.jpg" alt="" class="d-flex align-self-center mrgn-rght-md">
+            <p class="d-flex align-self-center h4"><a href="#" class="stretched-link">Link text 2</a></p>
+        </div>
+    </div>
+    <div class="col-sm-6 col-lg-4">
+        <div class="d-flex panel panel-default panel-canadaday-card panel-canadaday-card-compact"> 
+            <img src="https://placehold.co/110x110.jpg" alt="" class="d-flex align-self-center mrgn-rght-md">
+            <p class="d-flex align-self-center h4"><a href="#" class="stretched-link">Link text 3 lorem ipsum dolor sit amet</a></p>
+        </div>
+    </div>
+</div>
+<h3>CSS classes</h3>
 <dl class="dl-horizontal">
     <dt><code>.panel-canadaday-card</code></dt>
     <dd>Use <code>.panel-canadaday-card</code> to spotlight features</dd>
+    <dt><code>.panel-canadaday-card-compact</code></dt>
+    <dd>Use <code>.panel-canadaday-card-compact</code> to spotlight features</dd>
 </dl>
diff --git a/méli-mélo/th-canadaday/meta.md b/méli-mélo/th-canadaday/meta.md
@@ -13,9 +13,10 @@ cssClass:
 - bg-canadaday-beige
 - canadaday
 - panel-canadaday-card
+- panel-canadaday-card-compact
 a11yStatement: >
   These colours meet the colour contrast requirements as outlined in WCAG 2.1 AA Success Criterion 1.4.3: Contrast (Minimum).
-  Tested by Nick Frenette, nick.frenette at canada.ca. 2023-05-12.
+  Tested by Nick Frenette, nick.frenette at pch.gc.ca. 2023-12-06.
 peNote:
 - The <code>bg-canadaday</code> class must be accompagnied with another dark contrast background colour such as <code>bg-dark</code>
 - The <code>panel-canadaday</code> class must be accompagnied with a fall back color such as <code>panel-default</code>

diff --git a/méli-mélo/th-canadaday/style.css b/méli-mélo/th-canadaday/style.css
@@ -105,10 +105,24 @@ h1.gc-thickline.canadaday::after {
 .panel-canadaday-card img {
     border-radius: 18px 18px 0px 0px;
 }
-.panel-canadaday-card .panel-heading>:not(img) {
+.panel-canadaday-card .panel-heading > :not(img) {
     padding-left: 15px;
     padding-right: 15px;
+	padding-top: 20px;
 }
 .panel-canadaday-card .panel-body {
     padding-bottom: 0 !important;
 }
+.panel-canadaday-card-compact img {
+    border-radius: 18px 0 0 18px !important;
+}
+
+.panel-canadaday-card p[class^="h"], .panel-canadaday-card p[class*=" h"] {
+    margin-top: 0 !important;
+}
+
+.panel-canadaday-card header {
+	position: inherit;
+}
+
+