Skip to main content
    Search syntax tips

    Shortcodes

    Div

    Simple wrapper with a div tag, this shortcode can also take class in attributes like it would for an HTML element. Content written inside is rendered with Hugo.

    <!-- With markdown content -->
{{% div class="CSS classes" %}}

Markdown content:
- A bullet point ...

{{% /div %}}

<!-- Without markdown content -->
{{< div class="CSS classes" >}}

{{< non-markdown-content >}}

{{< /div >}}

    SVG

    A simple shortcode to display an SVG without going through the img tag. It can also be equipped with a tooltip if tooltip attribute is given. SVGs are fetched as raw HTML during Hugo build and can be remote (src starts with https://) or local.

    Example

    {{< svg src="/static/primer/book-16.svg" class="octicon" height="22" width="22" tooltip="A book" >}}

    Image

    An alternative to the Hugo native figure shortcode. Without the caption attribute, only the img tag is created.

    When caption isn’t given, the class attribute shouldn’t be given either since it will not be used.

    The HTML attribute alt cannot be provided and will have the image name as value (i.e. src="/images/my-image.jpg" then alt="my-image").

    {{< img
  class="CSS classes for the figure"
  src="image URL"
  img-class="CSS classes for the image"
  width="image width"
  height="image height"
  caption="Caption"
>}}

    Example

    {{< img
  class="col-2"
  src="/logo/10.webp"
  height="100px"
  img-class="mb-1"
  caption="Arthur in The Beginning After the End"
  caption-class="text-italic text-center"
>}}
    10
    Arthur in The Beginning After the End

    Avatar item

    Simple wrapper (with div tag) to place an image on the side of a text / content. The image is vertically centered. Without content (self-closing shortcode), only the image is rendered and class is ignored.

    {{% avatar-item
  class="CSS classes for the wrapper"
  img-class="CSS classes for the image, e.g. circle (optional)"
  src="URL de l'image"
  width="image width"
  height="image height"
%}}

Markdown content:
- A bullet point ...

{{% /avatar-item %}}

    Example

    {{% avatar-item
  class="row-gap-3 col-gap-3 mt-3"
  img-class="circle"
  src="/logo/10.webp"
  height="50px"
%}}

Markdown content:
{class="mb-0"}
- A bullet point ...

{{% /avatar-item %}}
    10

    Markdown content:

    • A bullet point …

    Example without content

    {{% avatar-item src="/logo/10.webp" height="50px" img-class="circle" /%}}
    10

    Media card

    A card with an image on the side of its Markdown content. With url, icon (required) is shown in the top-right corner and links to it. By default each card is a grid column, so place the cards inside a flex grid div (class overrides it).

    {{% div class="d-flex flex-wrap gutter-condensed row-gap-6 mb-3" %}}

{{% media-card
  class="column CSS classes (optional)" icon="icon SVG source (required with url)" icon-class="icon CSS classes (optional)"
  url="verification URL (optional)" src="image URL"
%}}

### Card title
{class="m-0"}
Subtitle
{class="m-0"}
Date
{class="m-0 text-small"}

{{% /media-card %}}

{{% /div %}}

    Example

    {{% div class="d-flex flex-wrap flex-justify-center gutter-condensed row-gap-6 mb-3" %}}

{{% media-card src="/logo/10.webp" url="https://gohugo.io" icon="/static/primer/link-16.svg" icon-class="fgColor-accent" class="col-12 col-lg-4" %}}
### Card title
{class="m-0"}
Subtitle
{class="m-0"}
Date
{class="m-0 text-small"}
{{% /media-card %}}

{{% media-card src="/logo/10.webp" class="col-12 col-lg-4" %}}
### Without URL
{class="m-0"}
Subtitle
{class="m-0"}
Date
{class="m-0 text-small"}
{{% /media-card %}}

{{% /div %}}
    10

    Card title

    Subtitle

    Date

    10

    Without URL

    Subtitle

    Date

    Alert

    A Primer banner with an icon and a title matching its type: note (default), tip, important, warning or caution. GitHub alerts in Markdown blockquotes are rendered the same way.

    > [!tip]
> Markdown content.

{{< alert type="alert type (optional)" title="custom title (optional)" >}}
Markdown content.
{{< /alert >}}

    Example

    > [!note]
> Rendered from a **GitHub** alert.

{{< alert type="warning" title="Careful" >}}
Rendered from the shortcode with a custom title.
{{< /alert >}}

    Progress bar

    A Primer progress bar filled up to value percent.

    {{< progress-bar
  class="CSS classes of the filled part (optional)" size="small or large (optional)"
  value="percentage"
>}}

    Example

    {{< progress-bar value="75" >}}
{{< progress-bar value="40" class="bgColor-accent-emphasis" size="large" >}}

    Label

    A Primer label around a short text, class sets its variant and size.

    {{< label class="CSS classes (optional)" >}}text{{< /label >}}

    Example

    {{< label >}}default{{< /label >}}
{{< label class="Label--success" >}}stable{{< /label >}}
{{< label class="Label--attention Label--large" >}}beta{{< /label >}}
    default stable beta

    Timeline item

    A timeline item uses associated Primer style (here). It is a simple item with a side badge and some content.

    {{% timeline-item
  badge="/primer/book-16.svg"
  class="CSS classes for the item"
  inner-class="CSS classes for the content"
%}}

Markdown content:
- A bullet point ...

{{% /timeline-item %}}

    Example

    {{% timeline-item badge="/logo/10.webp" inner-class="fgColor-default" %}}

Markdown content:
{class="mb-0"}
- A bullet point ...

{{% /timeline-item %}}
{{% timeline-item badge="/logo/10.webp" inner-class="fgColor-default" %}}

Markdown content:
{class="mb-0"}
- A bullet point ...

{{% /timeline-item %}}
    10

    Markdown content:

    • A bullet point …
    10

    Markdown content:

    • A bullet point …

    Paginate

    A simple shortcode to display two buttons side by side (or only one), < Previous and Next >, with custom URLs:

    {{< paginate next="/path/to/next" prev="/path/to/previous" format="default OU terse" >}}

    In terse mode, if next or prev isn’t provided, then the associated button is not displayed. In default mode, the associated button is shown but disabled.

    Example

    {{< paginate next="/en/walkthrough/shortcodes#paginate" prev="/en/walkthrough/shortcodes#paginate" format="terse" >}}
{{< paginate next="/en/walkthrough/shortcodes#paginate" prev="/en/walkthrough/shortcodes#paginate" format="default" >}}


    {{< paginate prev="/en/walkthrough/shortcodes#paginate" format="terse" >}}
{{< paginate next="/en/walkthrough/shortcodes#paginate" format="terse" >}}
{{< paginate prev="/en/walkthrough/shortcodes#paginate" format="default" >}}
{{< paginate next="/en/walkthrough/shortcodes#paginate" format="default" >}}