Add card design to guide pages

app/assets/stylesheets/application.scss

@@ -10,6 +10,7 @@ $govuk-assets-path: "/";
 @import 'leaflet-gesture-handling/dist/leaflet-gesture-handling';
 
 @import 'base/global';
+@import 'base/guide_card';
 @import 'base/govuk/components/accordion';
 @import 'base/govuk/components/error-summary';
 @import 'base/govuk/components/inset-text';

app/assets/stylesheets/base/_guide_card.scss

@@ -0,0 +1,39 @@
+.hf-card-container {
+  background-color: #f3f2f1;
+  border-bottom: 3px solid #1d70b8;
+  margin-bottom: 30px;
+
+  .hf-card-image {
+    max-width:100%;
+    height: 200px;
+    object-fit: cover;
+  }
+}
+
+.hf-card-details {
+  padding: 30px;
+  min-height: 190px;
+}
+
+.hf-card a {
+  text-decoration: none;
+}
+
+.hf-card a .hf-card-details p {
+  color: #0b0c0c;
+}
+
+.hf-card a .hf-card-details h3 {
+  color: #1d70b8;
+}
+
+.hf-card a:hover .hf-card-container, .hf-card a:focus .hf-card-container {
+  background-color: #1d70b8;
+}
+
+.hf-card a:hover .hf-card-container .hf-card-details p,
+.hf-card a:hover .hf-card-container .hf-card-details h3,
+.hf-card a:focus .hf-card-container .hf-card-details p,
+.hf-card a:focus .hf-card-container .hf-card-details h3 {
+  color: #ffffff;
+}

app/services/markdown_document.rb

@@ -40,6 +40,10 @@ def meta_description
     @front_matter["meta_description"]
   end
 
+  def card_image
+    @front_matter["card-image"]
+  end
+
   def content
     @kramdown_document.to_html
   end

app/views/posts/show.html.slim

@@ -12,7 +12,7 @@
   .govuk-grid-column-two-thirds
     h1 = @post.title
 
-    == sanitize @post.content
+    == @post.content
 
     - if @post.date_posted
       span.govuk-body-s

app/views/posts/subcategory.html.slim

@@ -8,9 +8,11 @@
     formatted_subcategory => "" }
 
 .govuk-grid-row
-  .govuk-grid-column-full
-    h1.govuk-heading-xl = formatted_subcategory.to_s
-    p.govuk-body = t(".#{params[:section]}.#{params[:subcategory]}")
-    ul.govuk-list
-      - @posts.sort.each do |post|
-        li = govuk_link_to(post.title, post_path(section: post.section, subcategory: post.subcategory, post_name: post.post_name))
+  - @posts.sort.each do |post|
+    .govuk-grid-column-one-third
+      .hf-card
+        .hf-card-container
+          img src=image_path(post.card_image) alt=post.title class="hf-card-image"
+          .hf-card-details
+            .govuk-heading-m = govuk_link_to(post.title, post_path(section: post.section, subcategory: post.subcategory, post_name: post.post_name))
+