⚡ add cta link option to feature grid template #128

colinwilson · Nov 20, 2023 · 2f77c3c · 2f77c3c
1 parent f10ce84
commit 2f77c3c
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 1 deletion.
diff --git a/exampleSite/data/landing.yaml b/exampleSite/data/landing.yaml
@@ -58,38 +58,65 @@ featureGrid:
     - title: Fast
       icon: speed
       description: 4 x 100's score on Google Lighthouse by default. Lotus Docs removes unused CSS, prefetches asset links, and lazy loads content images.
+      ctaLink:
+        text: learn more
+        url: /docs/
 
     - title: SEO Friendly
       icon: trending_up
       description: Data is automatically structured to be SEO friendly. Includes Meta tags, Opengraph, and Twitter cards. Choose the settings that best suit you.
+      ctaLink:
+        text: learn more
+        url: /docs/
 
     - title: Secure by default
       icon: lock
       description: Lotus Docs' default configuration scores A+ on Mozilla Observatory. You can update the default Security Headers to suit your requirements.
+      ctaLink:
+        text: learn more
+        url: /docs/
 
     - title: Optional Features
       icon: settings
       description: Many Lotus Docs features are configurable via optional parameters. Require DocSearch for your site? Then enable it via a single setting.
+      ctaLink:
+        text: learn more
+        url: /docs/
 
     - title: Deploy to Vercel
       icon: change_history
       description: Deploy to Vercel in seconds. Vercel Functions, Vercel Redirects/Rewrites, and Vercel Headers are all configurable for an enriched experience.
+      ctaLink:
+        text: learn more
+        url: /docs/
 
     - title: Dark Mode
       icon: dark_mode
-      description: "Prefer not to be blasted by the sun while reading? Switch to a low-light UI with the click of a button. Modify colour variables to match your branding."
+      description: Prefer not to be blasted by the sun while reading? Switch to a low-light UI with the click of a button. Modify colour variables to match your branding.
+      ctaLink:
+        text: learn more
+        url: /docs/
 
     - title: Search by DocSearch
       icon: search
       description: Search your docs with DocSearch. A powerful, efficient and accessible search solution built on Algolia Crawler & Autocomplete. TBC.
+      ctaLink:
+        text: learn more
+        url: /docs/
 
     - title: Multilingual Support
       icon: translate
       description: Lotus Docs supports Hugo's Multilingual Mode. Create documentation in multiple languages side by side with i18n support.
+      ctaLink:
+        text: learn more
+        url: /docs/
 
     - title: Bootstrap v5
       icon: palette
       description: Built on Bootstrap 5, Lotus Docs allows for a familiar, flexible, and intuitive developer experience. Easily customise your site via SCSS variables and files.
+      ctaLink:
+        text: learn more
+        url: /docs/
 
 imageText:
   enable: true

diff --git a/layouts/partials/landing/feature_grid.html b/layouts/partials/landing/feature_grid.html
@@ -29,6 +29,11 @@ <h4 class="title fw-bold mb-4">{{ . }}</h4>
                                 <div class="flex-1">
                                     <h4 class="title">{{ .title }}</h4>
                                     <p class="text-muted para mb-0">{{ .description | markdownify }}</p>
+                                    {{ with .ctaLink }}
+                                    <div class="mt-2">
+                                        <a href="{{ .url }}" class="mt-3 h6 text-primary">{{ .text | markdownify }} <i class="material-icons align-top">chevron_right</i></a>
+                                    </div>
+                                    {{ end }}
                                 </div>
                             </div>
                         </div>