Introduce expandable image shortcode, improve portable links logic

exampleSite/content.en/docs/shortcodes/cards.md

@@ -3,18 +3,18 @@
 ## Example
 
 {{% columns %}}
-- {{< card image="docs/shortcodes/cards/placeholder.svg" >}}
+- {{< card image="placeholder.svg" >}}
   ### Line 1
   Line 2
   {{< /card >}}
 
-- {{< card image="docs/shortcodes/cards/placeholder.svg" >}}
+- {{< card image="placeholder.svg" >}}
   This is tab MacOS content.
   {{< /card >}}
 {{% /columns %}}
 
 {{% columns %}}
-- {{< card href="/" >}}
+- {{< card href="/docs/shortcodes/cards" >}}
   **Markdown**  
   Suspendisse sed congue orci, eu congue metus. Nullam feugiat urna massa.
   {{< /card >}}
@@ -28,3 +28,36 @@
   This is tab MacOS content.
   {{< /card >}}
 {{% /columns %}}
+
+## Build-in figure shortcode
+Hugo's built-in figure shortcode is also styled as a card
+
+{{% columns %}}
+- ```go-html-template
+  {{</* figure
+    src="placeholder.svg"
+    alt="A placeholder image"
+    link="#"
+    caption="A placeholder image caption"
+    loading="lazy"
+    target="_blank"
+    title="Figure Title"
+    caption="A caption for the figure"
+    attr="An attribution"
+    attrlink="#"
+  */>}}
+  ```
+
+- {{< figure
+    src="placeholder.svg"
+    alt="A placeholder image"
+    link="#"
+    caption="A placeholder image caption"
+    loading="lazy"
+    target="_blank"
+    title="Figure Title"
+    caption="A caption for the figure"
+    attr="An attribution"
+    attrlink="#"
+  >}}
+{{% /columns %}}