Help me make cards for posts under ##posts using loops in hugo.

This is my home page contents/_index.md
---
layout: hextra-theme
width: full
toc: false
---

<div style='display: flex; align-items: center;'>
  <div style='flex: 2;'>
<div class="hx-mt-6 hx-mb-6">
{{< hextra/hero-headline >}}
  Harikrishnan S&nbsp;<br class="sm:hx-block hx-hidden" />School of Mathematics
{{< /hextra/hero-headline >}}
</div>

<div class="hx-mb-12">
{{< hextra/hero-subtitle >}}
  Indian Institute of Science Education and Research&nbsp;<br class="sm:hx-block hx-hidden" />Thiruvananthapuram
{{< /hextra/hero-subtitle >}}
</div>

  </div>
  <div style='flex: 1;'>
    <img src='/images/Designer.png' alt='Description of image' style='max-width: 100%; height: auto;' />
  </div>
</div>


{{< cards >}}
  {{< card link="/blog" title="My Blog" icon="pencil" >}}
  {{< card link="/about" title="About Me" icon="information-circle" >}}
  {{< card link="/files/Curriculum_Vitae_Harikrishnan_S.pdf" title="Curriculum Vitae" icon="academic-cap" >}}
{{< /cards >}}





## Posts

{{< cards >}}
  {{< card link="/blog/master-stability-function" title="Master Stability Function" image="/blog/master-stability-function/msf_classes.jpg" subtitle="Determining stability of synchronised states in coupled dynamical systems." >}}
{{< /cards >}}


This is my directory structure

├── archetypes
│   └── default.md
├── config.yaml
├── content
│   ├── about.md
│   ├── blog
│   │   ├── _index.md
│   │   ├── master-stability-function
│   │   │   ├── _index.md
│   │   │   ├── LorenzScene.mp4
│   │   │   ├── lyapunov.svg
│   │   │   ├── msf_classes.jpg
│   │   │   └── network_abcd.png
│   │   ├── reinhardt-domain
│   │   │   └── _index.md
│   │   ├── Reynolds Transport Theorem
│   │   │   └── _index.md
│   │   └── symplectic-complement
│   │       └── _index.md
│   ├── contact.md
│   └── _index.md
├── deploy.sh
├── i18n
│   └── en.yaml
├── layouts
│   ├── 404.html
│   ├── index_deprecated.html
│   ├── partials
│   └── shortcodes
│       ├── blogcards.html
│       ├── justify.html
│       └── video.html
├── public
│   ├── 404.html
│   ├── about
│   │   └── index.html
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   ├── apple-touch-icon.png
│   ├── blog
│   │   ├── index.html
│   │   ├── index.xml
│   │   ├── master-stability-function
│   │   │   ├── index.html
│   │   │   ├── index.xml
│   │   │   ├── LorenzScene.mp4
│   │   │   ├── lyapunov.svg
│   │   │   ├── msf_classes.jpg
│   │   │   └── network_abcd.png
│   │   ├── msf
│   │   │   └── index.html
│   │   ├── reinhardt-domain
│   │   │   ├── index.html
│   │   │   └── index.xml
│   │   ├── reynolds-transport-theorem
│   │   │   ├── index.html
│   │   │   └── index.xml
│   │   └── symplectic-complement
│   │       ├── index.html
│   │       └── index.xml
│   ├── categories
│   │   ├── index.html
│   │   └── index.xml
│   ├── contact
│   │   └── index.html
│   ├── css
│   │   ├── compiled
│   │   │   ├── main.css
│   │   │   └── main.min.2d281924a07a1379a60f9457cf36eb70902cce95508ab4fff261f9e49a6bb326.css
│   │   ├── custom.css
│   │   └── custom.min.e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css
│   ├── en.search-data.json
│   ├── en.search.js
│   ├── en.search.min.3db95834d7cbb513c5e7bd8ff469faec73b56798f9d73f74f2e09a725dbbeac2.js
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon-dark.svg
│   ├── favicon.ico
│   ├── favicon.svg
│   ├── files
│   │   └── Curriculum_Vitae_Harikrishnan_S.pdf
│   ├── google63e05c52ea528227.html
│   ├── images
│   │   ├── Designer.png
│   │   ├── logo-dark.svg
│   │   └── logo.svg
│   ├── index.html
│   ├── index.xml
│   ├── js
│   │   ├── main.js
│   │   └── main.min.68a95033e849596f4c2f19b90b510fb2fc576e5559227d705246f6aba2e1645b.js
│   ├── lib
│   │   ├── flexsearch
│   │   │   └── flexsearch.bundle.min.0425860527cc9968f9f049421c7a56b39327d475e2e3a8f550416be3a9134327.js
│   │   └── katex
│   │       ├── auto-render.min.7b57d427ac6270677daf8d8380ded2cc73336f9149a167b8e1fe0d6ef66604ae.js
│   │       ├── fonts
│   │       │   ├── KaTeX_AMS-Regular.ttf
│   │       │   ├── KaTeX_AMS-Regular.woff
│   │       │   ├── KaTeX_AMS-Regular.woff2
│   │       │   ├── KaTeX_Caligraphic-Bold.ttf
│   │       │   ├── KaTeX_Caligraphic-Bold.woff
│   │       │   ├── KaTeX_Caligraphic-Bold.woff2
│   │       │   ├── KaTeX_Caligraphic-Regular.ttf
│   │       │   ├── KaTeX_Caligraphic-Regular.woff
│   │       │   ├── KaTeX_Caligraphic-Regular.woff2
│   │       │   ├── KaTeX_Fraktur-Bold.ttf
│   │       │   ├── KaTeX_Fraktur-Bold.woff
│   │       │   ├── KaTeX_Fraktur-Bold.woff2
│   │       │   ├── KaTeX_Fraktur-Regular.ttf
│   │       │   ├── KaTeX_Fraktur-Regular.woff
│   │       │   ├── KaTeX_Fraktur-Regular.woff2
│   │       │   ├── KaTeX_Main-BoldItalic.ttf
│   │       │   ├── KaTeX_Main-BoldItalic.woff
│   │       │   ├── KaTeX_Main-BoldItalic.woff2
│   │       │   ├── KaTeX_Main-Bold.ttf
│   │       │   ├── KaTeX_Main-Bold.woff
│   │       │   ├── KaTeX_Main-Bold.woff2
│   │       │   ├── KaTeX_Main-Italic.ttf
│   │       │   ├── KaTeX_Main-Italic.woff
│   │       │   ├── KaTeX_Main-Italic.woff2
│   │       │   ├── KaTeX_Main-Regular.ttf
│   │       │   ├── KaTeX_Main-Regular.woff
│   │       │   ├── KaTeX_Main-Regular.woff2
│   │       │   ├── KaTeX_Math-BoldItalic.ttf
│   │       │   ├── KaTeX_Math-BoldItalic.woff
│   │       │   ├── KaTeX_Math-BoldItalic.woff2
│   │       │   ├── KaTeX_Math-Italic.ttf
│   │       │   ├── KaTeX_Math-Italic.woff
│   │       │   ├── KaTeX_Math-Italic.woff2
│   │       │   ├── KaTeX_SansSerif-Bold.ttf
│   │       │   ├── KaTeX_SansSerif-Bold.woff
│   │       │   ├── KaTeX_SansSerif-Bold.woff2
│   │       │   ├── KaTeX_SansSerif-Italic.ttf
│   │       │   ├── KaTeX_SansSerif-Italic.woff
│   │       │   ├── KaTeX_SansSerif-Italic.woff2
│   │       │   ├── KaTeX_SansSerif-Regular.ttf
│   │       │   ├── KaTeX_SansSerif-Regular.woff
│   │       │   ├── KaTeX_SansSerif-Regular.woff2
│   │       │   ├── KaTeX_Script-Regular.ttf
│   │       │   ├── KaTeX_Script-Regular.woff
│   │       │   ├── KaTeX_Script-Regular.woff2
│   │       │   ├── KaTeX_Size1-Regular.ttf
│   │       │   ├── KaTeX_Size1-Regular.woff
│   │       │   ├── KaTeX_Size1-Regular.woff2
│   │       │   ├── KaTeX_Size2-Regular.ttf
│   │       │   ├── KaTeX_Size2-Regular.woff
│   │       │   ├── KaTeX_Size2-Regular.woff2
│   │       │   ├── KaTeX_Size3-Regular.ttf
│   │       │   ├── KaTeX_Size3-Regular.woff
│   │       │   ├── KaTeX_Size3-Regular.woff2
│   │       │   ├── KaTeX_Size4-Regular.ttf
│   │       │   ├── KaTeX_Size4-Regular.woff
│   │       │   ├── KaTeX_Size4-Regular.woff2
│   │       │   ├── KaTeX_Typewriter-Regular.ttf
│   │       │   ├── KaTeX_Typewriter-Regular.woff
│   │       │   └── KaTeX_Typewriter-Regular.woff2
│   │       ├── katex.min.7e5db7914b97e596a36c1abb67ccc7f174f8bb71d38c9a88c55b262ed1737f97.css
│   │       ├── katex.min.9f45307c5794ed247a0d095f3a62e52ef2215a67b2327203a7fd919959ae79d1.js
│   │       └── mhchem.min.f0ca03df194b8c3d6017ff455db6a0ef98857905663fa311a6cded788b15340b.js
│   ├── sitemap.xml
│   ├── site.webmanifest
│   ├── tags
│   │   ├── index.html
│   │   └── index.xml
│   ├── video
│   └── videos
│       ├── LorenzScene.mp4
│       └── master-stability-function
│           └── LorenzScene.mp4
├── static
│   ├── files
│   │   └── Curriculum_Vitae_Harikrishnan_S.pdf
│   ├── google63e05c52ea528227.html
│   ├── images
│   │   └── Designer.png
│   └── videos
│       └── master-stability-function
├── themes
│   └── hextra
│       ├── assets
│       │   ├── css
│       │   │   ├── chroma
│       │   │   │   ├── dark.css
│       │   │   │   └── light.css
│       │   │   ├── compiled
│       │   │   │   └── main.css
│       │   │   ├── components
│       │   │   │   ├── cards.css
│       │   │   │   ├── code-copy.css
│       │   │   │   ├── hextra
│       │   │   │   │   └── feature-grid.css
│       │   │   │   ├── navbar.css
│       │   │   │   ├── scrollbar.css
│       │   │   │   ├── search.css
│       │   │   │   ├── sidebar.css
│       │   │   │   └── steps.css
│       │   │   ├── custom.css
│       │   │   ├── highlight.css
│       │   │   ├── styles.css
│       │   │   ├── tailwind.css
│       │   │   └── typography.css
│       │   ├── js
│       │   │   ├── back-to-top.js
│       │   │   ├── code-copy.js
│       │   │   ├── filetree.js
│       │   │   ├── flexsearch.js
│       │   │   ├── lang.js
│       │   │   ├── menu.js
│       │   │   ├── sidebar.js
│       │   │   ├── tabs.js
│       │   │   └── theme.js
│       │   ├── json
│       │   │   └── search-data.json
│       │   └── lib
│       │       ├── flexsearch
│       │       │   └── flexsearch.bundle.min.js
│       │       ├── katex
│       │       │   ├── auto-render.min.js
│       │       │   ├── fonts
│       │       │   │   ├── KaTeX_AMS-Regular.ttf
│       │       │   │   ├── KaTeX_AMS-Regular.woff
│       │       │   │   ├── KaTeX_AMS-Regular.woff2
│       │       │   │   ├── KaTeX_Caligraphic-Bold.ttf
│       │       │   │   ├── KaTeX_Caligraphic-Bold.woff
│       │       │   │   ├── KaTeX_Caligraphic-Bold.woff2
│       │       │   │   ├── KaTeX_Caligraphic-Regular.ttf
│       │       │   │   ├── KaTeX_Caligraphic-Regular.woff
│       │       │   │   ├── KaTeX_Caligraphic-Regular.woff2
│       │       │   │   ├── KaTeX_Fraktur-Bold.ttf
│       │       │   │   ├── KaTeX_Fraktur-Bold.woff
│       │       │   │   ├── KaTeX_Fraktur-Bold.woff2
│       │       │   │   ├── KaTeX_Fraktur-Regular.ttf
│       │       │   │   ├── KaTeX_Fraktur-Regular.woff
│       │       │   │   ├── KaTeX_Fraktur-Regular.woff2
│       │       │   │   ├── KaTeX_Main-BoldItalic.ttf
│       │       │   │   ├── KaTeX_Main-BoldItalic.woff
│       │       │   │   ├── KaTeX_Main-BoldItalic.woff2
│       │       │   │   ├── KaTeX_Main-Bold.ttf
│       │       │   │   ├── KaTeX_Main-Bold.woff
│       │       │   │   ├── KaTeX_Main-Bold.woff2
│       │       │   │   ├── KaTeX_Main-Italic.ttf
│       │       │   │   ├── KaTeX_Main-Italic.woff
│       │       │   │   ├── KaTeX_Main-Italic.woff2
│       │       │   │   ├── KaTeX_Main-Regular.ttf
│       │       │   │   ├── KaTeX_Main-Regular.woff
│       │       │   │   ├── KaTeX_Main-Regular.woff2
│       │       │   │   ├── KaTeX_Math-BoldItalic.ttf
│       │       │   │   ├── KaTeX_Math-BoldItalic.woff
│       │       │   │   ├── KaTeX_Math-BoldItalic.woff2
│       │       │   │   ├── KaTeX_Math-Italic.ttf
│       │       │   │   ├── KaTeX_Math-Italic.woff
│       │       │   │   ├── KaTeX_Math-Italic.woff2
│       │       │   │   ├── KaTeX_SansSerif-Bold.ttf
│       │       │   │   ├── KaTeX_SansSerif-Bold.woff
│       │       │   │   ├── KaTeX_SansSerif-Bold.woff2
│       │       │   │   ├── KaTeX_SansSerif-Italic.ttf
│       │       │   │   ├── KaTeX_SansSerif-Italic.woff
│       │       │   │   ├── KaTeX_SansSerif-Italic.woff2
│       │       │   │   ├── KaTeX_SansSerif-Regular.ttf
│       │       │   │   ├── KaTeX_SansSerif-Regular.woff
│       │       │   │   ├── KaTeX_SansSerif-Regular.woff2
│       │       │   │   ├── KaTeX_Script-Regular.ttf
│       │       │   │   ├── KaTeX_Script-Regular.woff
│       │       │   │   ├── KaTeX_Script-Regular.woff2
│       │       │   │   ├── KaTeX_Size1-Regular.ttf
│       │       │   │   ├── KaTeX_Size1-Regular.woff
│       │       │   │   ├── KaTeX_Size1-Regular.woff2
│       │       │   │   ├── KaTeX_Size2-Regular.ttf
│       │       │   │   ├── KaTeX_Size2-Regular.woff
│       │       │   │   ├── KaTeX_Size2-Regular.woff2
│       │       │   │   ├── KaTeX_Size3-Regular.ttf
│       │       │   │   ├── KaTeX_Size3-Regular.woff
│       │       │   │   ├── KaTeX_Size3-Regular.woff2
│       │       │   │   ├── KaTeX_Size4-Regular.ttf
│       │       │   │   ├── KaTeX_Size4-Regular.woff
│       │       │   │   ├── KaTeX_Size4-Regular.woff2
│       │       │   │   ├── KaTeX_Typewriter-Regular.ttf
│       │       │   │   ├── KaTeX_Typewriter-Regular.woff
│       │       │   │   └── KaTeX_Typewriter-Regular.woff2
│       │       │   ├── katex.min.css
│       │       │   ├── katex.min.js
│       │       │   └── mhchem.min.js
│       │       └── mermaid
│       │           └── mermaid.min.js
│       ├── data
│       │   └── icons.yaml
│       ├── dev.toml
│       ├── exampleSite
│       │   ├── assets
│       │   │   └── images
│       │   │       └── space.jpg
│       │   ├── content
│       │   │   ├── about
│       │   │   │   ├── index.fa.md
│       │   │   │   ├── index.md
│       │   │   │   └── index.zh-cn.md
│       │   │   ├── blog
│       │   │   │   ├── _index.fa.md
│       │   │   │   ├── _index.md
│       │   │   │   ├── _index.zh-cn.md
│       │   │   │   ├── markdown.fa.md
│       │   │   │   ├── markdown.md
│       │   │   │   └── markdown.zh-cn.md
│       │   │   ├── docs
│       │   │   │   ├── advanced
│       │   │   │   │   ├── comments.fa.md
│       │   │   │   │   ├── comments.md
│       │   │   │   │   ├── comments.zh-cn.md
│       │   │   │   │   ├── customization.fa.md
│       │   │   │   │   ├── customization.md
│       │   │   │   │   ├── customization.zh-cn.md
│       │   │   │   │   ├── _index.fa.md
│       │   │   │   │   ├── _index.md
│       │   │   │   │   ├── _index.zh-cn.md
│       │   │   │   │   ├── multi-language.fa.md
│       │   │   │   │   ├── multi-language.md
│       │   │   │   │   └── multi-language.zh-cn.md
│       │   │   │   ├── getting-started.fa.md
│       │   │   │   ├── getting-started.md
│       │   │   │   ├── getting-started.zh-cn.md
│       │   │   │   ├── guide
│       │   │   │   │   ├── configuration.fa.md
│       │   │   │   │   ├── configuration.md
│       │   │   │   │   ├── configuration.zh-cn.md
│       │   │   │   │   ├── deploy-site.fa.md
│       │   │   │   │   ├── deploy-site.md
│       │   │   │   │   ├── deploy-site.zh-cn.md
│       │   │   │   │   ├── diagrams.fa.md
│       │   │   │   │   ├── diagrams.md
│       │   │   │   │   ├── diagrams.zh-cn.md
│       │   │   │   │   ├── _index.fa.md
│       │   │   │   │   ├── _index.md
│       │   │   │   │   ├── _index.zh-cn.md
│       │   │   │   │   ├── latex.fa.md
│       │   │   │   │   ├── latex.md
│       │   │   │   │   ├── latex.zh-cn.md
│       │   │   │   │   ├── markdown.fa.md
│       │   │   │   │   ├── markdown.md
│       │   │   │   │   ├── markdown.zh-cn.md
│       │   │   │   │   ├── organize-files.fa.md
│       │   │   │   │   ├── organize-files.md
│       │   │   │   │   ├── organize-files.zh-cn.md
│       │   │   │   │   ├── shortcodes
│       │   │   │   │   │   ├── callout.fa.md
│       │   │   │   │   │   ├── callout.md
│       │   │   │   │   │   ├── callout.zh-cn.md
│       │   │   │   │   │   ├── cards.fa.md
│       │   │   │   │   │   ├── cards.md
│       │   │   │   │   │   ├── cards.zh-cn.md
│       │   │   │   │   │   ├── details.fa.md
│       │   │   │   │   │   ├── details.md
│       │   │   │   │   │   ├── details.zh-cn.md
│       │   │   │   │   │   ├── filetree.fa.md
│       │   │   │   │   │   ├── filetree.md
│       │   │   │   │   │   ├── filetree.zh-cn.md
│       │   │   │   │   │   ├── icon.fa.md
│       │   │   │   │   │   ├── icon.md
│       │   │   │   │   │   ├── icon.zh-cn.md
│       │   │   │   │   │   ├── _index.fa.md
│       │   │   │   │   │   ├── _index.md
│       │   │   │   │   │   ├── _index.zh-cn.md
│       │   │   │   │   │   ├── steps.fa.md
│       │   │   │   │   │   ├── steps.md
│       │   │   │   │   │   ├── steps.zh-cn.md
│       │   │   │   │   │   ├── tabs.fa.md
│       │   │   │   │   │   ├── tabs.md
│       │   │   │   │   │   └── tabs.zh-cn.md
│       │   │   │   │   ├── syntax-highlighting.fa.md
│       │   │   │   │   ├── syntax-highlighting.md
│       │   │   │   │   └── syntax-highlighting.zh-cn.md
│       │   │   │   ├── _index.fa.md
│       │   │   │   ├── _index.md
│       │   │   │   └── _index.zh-cn.md
│       │   │   ├── _index.fa.md
│       │   │   ├── _index.md
│       │   │   ├── _index.zh-cn.md
│       │   │   └── showcase
│       │   │       ├── index.fa.md
│       │   │       ├── index.md
│       │   │       └── index.zh-cn.md
│       │   ├── go.mod
│       │   ├── hugo_stats.json
│       │   ├── hugo.work
│       │   ├── hugo.yaml
│       │   ├── i18n
│       │   │   ├── fa.yaml
│       │   │   └── zh-cn.yaml
│       │   ├── layouts
│       │   │   └── partials
│       │   │       └── custom
│       │   │           └── head-end.html
│       │   └── static
│       │       └── images
│       │           ├── card-image-unprocessed.jpg
│       │           ├── hextra-doc.webp
│       │           ├── hextra-markdown.webp
│       │           └── hextra-search.webp
│       ├── go.mod
│       ├── i18n
│       │   ├── cs.yaml
│       │   ├── de.yaml
│       │   ├── en.yaml
│       │   ├── es.yaml
│       │   ├── fa.yaml
│       │   ├── fr.yaml
│       │   ├── he.yaml
│       │   ├── ja.yaml
│       │   ├── ko.yaml
│       │   ├── nb.yaml
│       │   ├── nl.yaml
│       │   ├── nn.yaml
│       │   ├── pt.yaml
│       │   ├── ro.yaml
│       │   ├── sw.yaml
│       │   ├── uk.yaml
│       │   ├── vi.yaml
│       │   ├── zh-cn.yaml
│       │   └── zh-tw.yaml
│       ├── images
│       │   ├── screenshot.jpg
│       │   └── tn.jpg
│       ├── layouts
│       │   ├── 404.html
│       │   ├── blog
│       │   │   ├── list.html
│       │   │   └── single.html
│       │   ├── _default
│       │   │   ├── baseof.html
│       │   │   ├── list.html
│       │   │   ├── list.rss.xml
│       │   │   ├── _markup
│       │   │   │   ├── render-codeblock.html
│       │   │   │   ├── render-codeblock-mermaid.html
│       │   │   │   ├── render-heading.html
│       │   │   │   ├── render-image.html
│       │   │   │   └── render-link.html
│       │   │   ├── single.html
│       │   │   └── wide.html
│       │   ├── docs
│       │   │   ├── list.html
│       │   │   └── single.html
│       │   ├── hextra-home.html
│       │   ├── index.html
│       │   ├── partials
│       │   │   ├── breadcrumb.html
│       │   │   ├── components
│       │   │   │   ├── codeblock-copy-button.html
│       │   │   │   ├── codeblock.html
│       │   │   │   ├── comments.html
│       │   │   │   ├── giscus.html
│       │   │   │   ├── last-updated.html
│       │   │   │   └── pager.html
│       │   │   ├── custom
│       │   │   │   └── head-end.html
│       │   │   ├── favicons.html
│       │   │   ├── footer.html
│       │   │   ├── google-analytics.html
│       │   │   ├── head-css.html
│       │   │   ├── head.html
│       │   │   ├── language-switch.html
│       │   │   ├── navbar.html
│       │   │   ├── opengraph.html
│       │   │   ├── scripts.html
│       │   │   ├── search.html
│       │   │   ├── shortcodes
│       │   │   │   └── card.html
│       │   │   ├── sidebar.html
│       │   │   ├── theme-toggle.html
│       │   │   ├── toc.html
│       │   │   └── utils
│       │   │       ├── file-path.html
│       │   │       ├── format-date.html
│       │   │       ├── fragments.html
│       │   │       ├── icon.html
│       │   │       ├── lang-link.html
│       │   │       ├── page-description.html
│       │   │       ├── page-width.html
│       │   │       ├── sort-pages.html
│       │   │       └── title.html
│       │   └── shortcodes
│       │       ├── callout.html
│       │       ├── card.html
│       │       ├── cards.html
│       │       ├── details.html
│       │       ├── filetree
│       │       │   ├── container.html
│       │       │   ├── file.html
│       │       │   └── folder.html
│       │       ├── hextra
│       │       │   ├── feature-card.html
│       │       │   ├── feature-grid.html
│       │       │   ├── hero-badge.html
│       │       │   ├── hero-button.html
│       │       │   ├── hero-container.html
│       │       │   ├── hero-headline.html
│       │       │   └── hero-subtitle.html
│       │       ├── icon.html
│       │       ├── include.html
│       │       ├── pdf.html
│       │       ├── steps.html
│       │       ├── tab.html
│       │       └── tabs.html
│       ├── LICENSE
│       ├── netlify.toml
│       ├── package.json
│       ├── package-lock.json
│       ├── postcss.config.js
│       ├── README.fa.md
│       ├── README.md
│       ├── README.zh-cn.md
│       ├── static
│       │   ├── android-chrome-192x192.png
│       │   ├── android-chrome-512x512.png
│       │   ├── apple-touch-icon.png
│       │   ├── favicon-16x16.png
│       │   ├── favicon-32x32.png
│       │   ├── favicon-dark.svg
│       │   ├── favicon.ico
│       │   ├── favicon.svg
│       │   ├── images
│       │   │   ├── logo-dark.svg
│       │   │   └── logo.svg
│       │   └── site.webmanifest
│       ├── tailwind.config.js
│       ├── taskfile.yaml
│       └── theme.toml
└── TODO.md

This is themes/hextra/layouts/shortcodes/cards.html

{{- $cols := .Get "cols" | default 3 -}}

<div class="hextra-cards hx-mt-4 hx-gap-4 hx-grid not-prose" style="--hextra-cards-grid-cols: {{ $cols }};">
  {{- .Inner -}}
</div>


This is themes/hextra/layouts/shortcodes/card.html

{{- $context := . -}}
{{- $link := .Get "link" -}}
{{- $title := .Get "title" -}}
{{- $icon := .Get "icon" -}}
{{- $subtitle := .Get "subtitle" -}}
{{- $image := .Get "image" -}}
{{- $width := 0 -}}
{{- $height := 0 -}}
{{- $imageStyle := .Get "imageStyle" -}}

{{/* Image processing options */}}
{{- $method := .Get "method" | default "Resize" | humanize -}}
{{- $options := .Get "options" | default "800x webp q80" -}}

{{- if and $image (not (urls.Parse $image).Scheme) -}}
  {{/* Process images in assets */}}
  {{- with resources.Get $image -}}
    {{- $processed := "" -}}
    {{- if eq $method "Resize" -}}
      {{- $processed = (.Resize $options) -}}
    {{- else if eq $method "Fit" -}}
      {{- $processed = (.Fit $options) -}}
    {{- else if eq $method "Fill" -}}
      {{- $processed = (.Fill $options) -}}
    {{- else if eq $method "Crop" -}}
      {{- $processed = (.Crop $options) -}}
    {{- else -}}
      {{- errorf "Invalid image processing command: Must be one of Crop, Fit, Fill or Resize." -}}
    {{- end -}}
    {{- $width = $processed.Width -}}
    {{- $height = $processed.Height -}}
    {{- $image = $processed.RelPermalink -}}
  {{- else -}}
    {{/* Otherwise, use relative link of the image */}}
    {{- if hasPrefix $image "/" -}}
      {{- $image = relURL (strings.TrimPrefix "/" $image) -}}
    {{- end -}}
  {{- end -}}
{{- end -}}

{{- partial "shortcodes/card" (dict
  "page"        .Page
  "link"        $link
  "title"       $title
  "icon"        $icon
  "subtitle"    $subtitle
  "image"       $image
  "width"       $width
  "height"      $height
  "imageStyle"  $imageStyle
  )
-}}


This is themes/hextra/layouts/partials/shortcodes/card.html

{{- $page := .page -}}
{{- $link := .link -}}
{{- $title := .title -}}
{{- $icon := .icon -}}
{{- $subtitle := .subtitle -}}
{{- $image := .image -}}
{{- $width := .width -}}
{{- $height := .height -}}
{{- $imageStyle := .imageStyle -}}

{{ $linkClass := "hover:hx-border-gray-300 hx-bg-transparent hx-shadow-sm dark:hx-border-neutral-800 hover:hx-bg-slate-50 hover:hx-shadow-md dark:hover:hx-border-neutral-700 dark:hover:hx-bg-neutral-900" }}
{{- with $image -}}
  {{ $linkClass = "hover:hx-border-gray-300 hx-bg-gray-100 hx-shadow dark:hx-border-neutral-700 dark:hx-bg-neutral-800 dark:hx-text-gray-50 hover:hx-shadow-lg dark:hover:hx-border-neutral-500 dark:hover:hx-bg-neutral-700" }}
{{- end -}}

{{- $external := strings.HasPrefix $link "http" -}}
{{- $href := cond (strings.HasPrefix $link "/") ($link | relURL) $link -}}


<a
  class="hextra-card hx-group hx-flex hx-flex-col hx-justify-start hx-overflow-hidden hx-rounded-lg hx-border hx-border-gray-200 hx-text-current hx-no-underline dark:hx-shadow-none hover:hx-shadow-gray-100 dark:hover:hx-shadow-none hx-shadow-gray-100 active:hx-shadow-sm active:hx-shadow-gray-200 hx-transition-all hx-duration-200 {{ $linkClass }}"
  {{- if $link -}}
    href="{{ $href }}"
    {{ with $external }}target="_blank" rel="noreferrer"{{ end -}}
  {{- end -}}
>
  {{- with $image -}}
    <img
      alt="{{ $title }}"
      class="hextra-card-image"
      loading="lazy"
      decoding="async"
      src="{{ $image | safeURL }}"
      {{ with $width }}width="{{ . }}"{{ end }}
      {{ with $height }}height="{{ . }}"{{ end }}
      {{ with $imageStyle }}style="{{ . | safeCSS }}"{{ end }}
    />
  {{- end -}}

  {{- $padding := "hx-p-4" -}}
  {{- with $subtitle -}}
    {{- $padding = "hx-pt-4 hx-px-4" -}}
  {{- end -}}


  <span class="hextra-card-icon hx-flex hx-font-semibold hx-items-start hx-gap-2 {{ $padding }} hx-text-gray-700 hover:hx-text-gray-900 dark:hx-text-neutral-200 dark:hover:hx-text-neutral-50">
    {{- with $icon }}{{ partial "utils/icon.html" (dict "name" $icon) -}}{{- end -}}
    {{- $title -}}
  </span>
  {{- with $subtitle -}}
    <div class="hextra-card-subtitle hx-line-clamp-3 hx-text-sm hx-font-normal hx-text-gray-500 dark:hx-text-gray-400 hx-px-4 hx-mb-4 hx-mt-2">{{- $subtitle | markdownify -}}</div>
  {{- end -}}
</a>
{{- /* Strip trailing newline. */ -}}