⏱
11 mins remaining
Shortcodes Tutorial
Learn about the various shortcodes used on this website
Cards
card/breadcrumb
A breadcrumb style card that links to another page.
| Attribute | Description |
|---|---|
| href | The html href to the content when the card is clicked. |
| first | The first text element in the breadcrumb |
| second | The second text element in the breadcrumb |
| third | The third text element in the breadcrumb |
Example
{{< card/breadcrumb href="#" first="First" >}}
{{< card/breadcrumb href="#" first="First" second="Second" >}}
{{< card/breadcrumb href="#" first="First" second="Second" third="Third" >}}
card/feature
A feature style card that links to another page.
| Attribute | Description |
|---|---|
| href | The html href to the content when the card is clicked. |
| class | Additional css classes to apply to the card. |
| title | The title for the card |
| text | The text in the body of the card |
See bootstrap cards for more information.
Example
{{< card/feature class="w-50" href="#" title="My Card" text="My text goes here..." >}}
card/group
A wrapper for cards using bootstrap’s deck style.
No attributes for this shortcode.
Example
{{< card/group >}}
{{< card/feature class="w-25 min-w-250" href="/contribute/shortcodes/card"
title="Feature Card 1" text="This is the first card to show the deck example.">}}
{{< card/feature class="w-25 min-w-250" href="/contribute/shortcodes/card"
title="Feature Card 2" text="This is the second card to show the deck example.">}}
{{< /card/group >}}
card/grid
A css-grid based wrapper for cards best used for an even number of cards.
| Attribute | Description |
|---|---|
| class | Additional css classes to apply to the wrapper. |
Example
{{< card/grid class="grid-col-4 grid-col-md-2 grid-col-sm-1">}}
{{< card/feature class="w-25 min-w-250" href="/contribute/shortcodes/card"
title="Feature Card 1" text="This is the first card to show the deck example." >}}
{{< card/feature class="w-25 min-w-250" href="/contribute/shortcodes/card"
title="Feature Card 2" text="This is the second card to show the deck example." >}}
{{< /card/grid >}}
card/flex
A css flexbox based wrapper to automatically layout cards.
| Attribute | Description |
|---|---|
| class | Additional css classes to apply to the wrapper. |
card/social
A card for linking to a social platform.
| Attribute | Description |
|---|---|
| class | Additional css classes to apply to the bootstrap card element. |
| title | The title for the card. |
| img-src | The src for the img element. |
| img-class | Additional css classes to apply to the img tag. |
| img-type | The type of image, can be one of ‘page’, ‘asset’, or ‘remote’ (default) |
| bg-class | Additional css classes to apply to the img container |
Example
Wavi
Start contributing, this is where the code hits the fan.
{{< card/social href="https://github.com/" class="w-25 min-w-250" title="Wavi" img-src="https://wavi.ng/assets/img/wavimetalogo.jpeg" img-class="bg-white p-5" >}}
Start contributing, this is where the code hits the fan.
{{< /card/social >}}
card/showcase
A card for showcasing a single item.
| Attribute | Description |
|---|---|
| class | Additional css classes to apply to the bootstrap card element. |
| title | The title for the card. |
| img-src | The src for the img element. |
| img-class | Additional css classes to apply to the img tag. |
| img-type | The type of image, can be one of ‘page’, ‘asset’, or ‘remote’ (default) |
| bg-class | Additional css classes to apply to the img container |
Example
{{< card/showcase class="w-50" title="Wavi" img-src="https://wavi.ng/assets/img/wavimetalogo.jpeg" img-class="bg-white p-5" >}}
{{< card/showcase-item >}}Your space on the privacy-first web.{{< /card/showcase-item >}}
{{< card/showcase-link href="https://atsign.com/apps/wavi" >}}Learn more{{< /card/showcase-link >}}
{{< card/showcase-link href="https://wavi.ng/@wavi" >}}Wavi.ng{{< /card/showcase-link >}}
{{< /card/showcase >}}