themes/hugo-book/exampleSite/content.en/docs/shortcodes/cards.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

# Cards

## Example

{{% columns %}}
- {{< card image="placeholder.svg" >}}
  ### Line 1
  Line 2
  {{< /card >}}

- {{< card image="placeholder.svg" >}}
  This is tab MacOS content.
  {{< /card >}}
{{% /columns %}}

{{% columns %}}
- {{< card href="/docs/shortcodes/cards" >}}
  **Markdown**  
  Suspendisse sed congue orci, eu congue metus. Nullam feugiat urna massa.
  {{< /card >}}

- {{< card >}}
  Suspendisse sed congue orci, eu congue metus. Nullam feugiat urna massa, et fringilla metus consectetur molestie.
  {{< /card >}}

- {{< card title="Card" >}}
  ### Heading
  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 %}}