Media and Content Embeddings

Card

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

Example

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

Example.com

Description.

Article Card

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

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

89468

8338

Email

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

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

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

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

The float shortcode wraps arbitrary content with text flowing around it, floating left or right with configurable width. Below is example lorem ipsum text that will wrap around the float img.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Example:

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

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

{{% /float %}}

Cols

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.

See more examples in rich-content.

Carousel

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

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

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

The audio shortcode embeds a HTML5 audio player.

Example: Looped muted audio

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

Video

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

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

YouTube

The youtube shortcode embeds an optimized YouTube video player.

Example: Specific video with start time

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

TypeIt

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