Media and Content Embeddings

Card Link to this heading

The card shortcode renders a general-purpose preview card with a title, description, optional image or icon, and metadata.

Example

{{< card
  title="Getting Started"
  url="https://example.com"
  desc="Description."
  image="/img/01.webp"
>}}

Example.com

Description.

Article Card Link to this heading

The article shortcode generates a visual preview card for a specified internal page.

Example

{{< article path="/docs/40-getting-started" desc=true meta=false >}}

Getting Started

Learn how to install the Yore Hugo theme using Git Submodule or Hugo Module, configure it for your site, and launch your first local build in minutes.

GitHub Card Link to this heading

The github shortcode creates a dynamic preview card for a GitHub repository.

Example: Repository preview with thumbnail

{{< github repo="gohugoio/hugo" >}}

(external link)

gohugoio/hugo

The world’s fastest framework for building websites.

Go

89987

8389

Email Link to this heading

The email shortcode obfuscates an email address to reduce exposure to scrapers. The address is base64-encoded at build time and decoded client-side into a mailto link.

Example

{{< email address="hello@example.com" >}}

Embed Code Link to this heading

The embed-code shortcode fetches source code from a remote URL and renders it as a highlighted code block.

Example: Fetching specific lines from GitHub

{{< embed-code url="https://raw.githubusercontent.com/githubtraining/hellogitworld/refs/heads/master/src/main/java/com/github/App.java" type="java" lines="3-7" >}}

/**
 * Hello again
 * Hello world!
 * Hello
 */

Embed Markdown Link to this heading

The embed-md shortcode fetches and renders remote Markdown content. This shortcode must be called with markdown notation ({{/*% %*/}})

Example

Include an external page:

{{% embed-md url="https://github.com/ZhenShuo2021/hugo-yore/raw/refs/heads/main/README.md" md=false %}}

Include an internal page:

{{% embed-md page="/docs/shortcodes/40-math/index.md" %}}

Fig Link to this heading

The fig shortcode renders an image inside a <figure> element with a figcaption that supports footnotes. Use it only when the caption needs a footnote, otherwise use standard Markdown image syntax.

Example

{{% fig
  attrs="class='center-cap center-img' style='width:50%'"
  src="/img/04.webp"
  alt="alt"
  caption="*1234*[^fn_a]"
%}}

[^fn_a]: Footnote text.

This is equivalent to the standard markdown image syntax below, but the syntax does not support footnotes.

![alt](/img/04.webp "*1234*")
{class="center-cap center-img" style="width:50%"}

Float Link to this heading

The float shortcode wraps arbitrary content with text flowing around it, floating left or right with configurable width.

Example:

{{% float side="end" %}}

![alt](/img/04.webp)

{{% /float %}}

Use {{% float-clear %}} to cancel the float effect.

Cols Link to this heading

cols shortcode allows you to create flexible multi-column layouts with custom widths and optional responsive behaviors. Note that it uses markdown notation ({{% %}}).

{{% cols widths="70%,30%" rwd=false %}}

![qwe](/img/01.webp)

<!-- cell -->

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.

{{% /cols %}}

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.

Carousel Link to this heading

The carousel shortcode displays an image carousel with a main viewport, navigation buttons, and a scrollable thumbnail strip. The inner content uses YAML format to define images.

Images can be specified individually with src, or batch-loaded with match.

YAML fields per item:

Example 1: fit="cover" arrows=false

{{< carousel ratio="32/9" fit="cover" arrows=false >}}

- match: /img/*[5-7]* # 05, 06, 07
- src: /img/drop.svg
  caption: carousel caption
  alt: carousel alt

{{< /carousel >}}

1 / 4

Example 2: thumbs=false counter=false

{{< carousel ratio="32/9" thumbs=false counter=false >}}

- match: /img/*[5-7]* # 05, 06, 07
- src: /img/drop.svg
  caption: carousel caption
  alt: carousel alt

{{< /carousel >}}

1 / 4

Masonry Link to this heading

masonry shortcode allows you to create a fluid, masonry-style image wall where items are arranged in columns with varying heights. The inner content uses YAML format to define images.

Images can be specified individually with src, or batch-loaded with match.

YAML fields per item:

Example

{{< masonry maxCols="3" >}}

- src: /img/02.webp
  alt: Fly high
  caption: Hello world!
- src: /img/03.webp
  alt: Contrails
- src: /img/04.webp
  alt: Parapet
- src: /img/05.webp
  alt: Wing
- src: /img/06.webp
  alt: Eaves
- src: /img/07.webp
  alt: Biplane sunset
- src: /img/drop.svg
  alt: SVG sample

{{< /masonry >}}

Icon Link to this heading

The icon shortcode renders an inline SVG icon from the theme's icon library.

Example

{{< icon "activity" >}}
{{< icon "arrow-left-circle" >}}
{{< icon "clock" >}}

See all available icons in reference page.

Audio Link to this heading

The audio shortcode embeds a HTML5 audio player.

Example: Looped muted audio

{{< audio
  src="/audio/beep.mp3"
  caption="*beep*"
  loop=true
>}}

Video Link to this heading

The video shortcode embeds a HTML5 video player.

Example: Autoplay muted video

{{< video
    src="https://upload.wikimedia.org/wikipedia/commons/5/5a/CC0_-_Public_Domain_Dedication_video_bumper.webm"
    caption="*Public domain demo*"
    loop=true
    muted=true
>}}

PDF Link to this heading

The pdf shortcode embeds a PDF file using an inline iframe viewer.

YouTube Link to this heading

The youtube shortcode embeds an optimized YouTube video player.

Example: Specific video with start time

{{< youtube id="ldX1Ii0MofQ" params="start=30" >}}

TypeIt Link to this heading

The typeit shortcode creates dynamic typewriter animations.

Example: Looping animation with custom speed

{{< typeit speed="50" loop="true" tag="h2" >}}
Yore - A Simple Yet Powerful Hugo Theme
{{< /typeit >}}