⏱ 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.

AttributeDescription
hrefThe html href to the content when the card is clicked.
firstThe first text element in the breadcrumb
secondThe second text element in the breadcrumb
thirdThe 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.

AttributeDescription
hrefThe html href to the content when the card is clicked.
classAdditional css classes to apply to the card.
titleThe title for the card
textThe 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.

AttributeDescription
classAdditional 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.

AttributeDescription
classAdditional css classes to apply to the wrapper.

card/social

A card for linking to a social platform.

AttributeDescription
classAdditional css classes to apply to the bootstrap card element.
titleThe title for the card.
img-srcThe src for the img element.
img-classAdditional css classes to apply to the img tag.
img-typeThe type of image, can be one of ‘page’, ‘asset’, or ‘remote’ (default)
bg-classAdditional 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.

AttributeDescription
classAdditional css classes to apply to the bootstrap card element.
titleThe title for the card.
img-srcThe src for the img element.
img-classAdditional css classes to apply to the img tag.
img-typeThe type of image, can be one of ‘page’, ‘asset’, or ‘remote’ (default)
bg-classAdditional css classes to apply to the img container

Example

Wavi

Your space on the privacy-first web.

Learn more Wavi.ng

  {{< 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 >}}