Hugo shortcodes

Hugo Shortcodes vs. Partials

Shortcodes are for displaying content on a page and can be dropped in on any page as needed. Partials are for displaying content in a template and would show up on every instance of that page.

So, if you wanted to show a specific author bio on a single event, you would create and use an Author shortcode.

If you wanted to display an author bio for EVERY event, you would create an Author partial and add that to the Event template.

Shortcodes are for use in content. Partials are for use in templates.
See Hugo's built-in shortcodes

Digital.gov shortcodes

Images

{{< img src="UID" alt="ALT_TEXT" >}}

• example: {{< img src="peace-corps-customer-satisfaction" alt="A bar graph showing User Satisfaction: Task Completion vs. Content Comprehension" >}}

Images, Right Aligned

{{< img-right src="UID" alt="ALT_TEXT" >}}

• example: {{< img-right src="peace-corps-customer-satisfaction" alt="A bar graph showing User Satisfaction: Task Completion vs. Content Comprehension" >}}

Facebook video

{{< fb-video "FULL_VIDEO_LINK" >}}

• example: {{< fb-video "https://www.facebook.com/nih.nccih/videos/1405263649496849/" >}}

YouTube embed

{{< youtube EMBED_STRING >}}

• example: {{< youtube iLD4Bu6I2I8 >}}

Instagram

{{< instagram PHOTO_ID HIDECAPTION* >}}

• example: {{< instagram BWNjjyYFxVx >}}
• example with hidden caption: {{< instagram BWNjjyYFxVx hidecaption >}}

Tweet

• {{< tweet USER TWEET_ID >}}
• example: {{< tweet user="Digital_Gov" id="1484206760823042055" >}}

Internal link

• {{< ref "DESTINATION" >}}
• by filename: {{< ref "communities.md" >}}
• by anchor: {{< ref "communities.md#social" >}}
• by relative url: {{< ref "author/nirmala-ramprasad" >}}
  • This is useful if the linked file is a generated file (like an author page) with no .md file to reference

External link

No shortcode required

Use standard markdown: [LINK_TEXT](LINK_URL)

Legacy image

• {{< legacy-img src="IMAGE_PATH" alt="ALT_TEXT" >}}
• example: {{< legacy-img src="/2015/09/600-x-147-howto-icons-left-text.jpg" alt="Icons from FCPCCS toolkit" >}}

Legacy image right

• {{< legacy-img-right src="IMAGE_PATH" alt="ALT_TEXT" >}}
• {{< legacy-img-right src="2016/07/250-x-444-FEMA-app-Heat-Advisory-pg-1-for-Washington-DC-area-July-25th-2016.jpg" alt="Screen capture of the FEMA app's Heat Advisory for the Washington, DC area on July 25, 2016." >}}

Legacy file

• {{< legacy-file "FILE_PATH" >}}
• example: {{< legacy-file "2014/07/metadata-in-drupal-epa.pdf" >}}

Accordion

• {{< accordion kicker="Last update" title="April 1, 2020" icon="fas fa-copy" >}} inner text of what you want to collapse {{< /accordion >}}

Button

• Ex. {{< button href="https://usdigitalregistry.digitalgov.gov/admin" text="Register and Manage Accounts" >}}

Note

Note Shortcode — the following are all the iterations of the "note" shortcode and how to use them.

Note — {{< note >}} text goes here... {{< /note >}}

A note can also include a button: {{< note button-text="submit">}} text goes here... {{< /note >}}

And has several subtypes with their own icons.

Activity — {{< note "activity" >}} Activity text goes here... {{< /note >}}

Action — {{< note "action" >}} action text goes here... {{< /note >}}

Alert — {{< note "alert" >}} Alert text goes here... {{< /note >}}

Comment — {{< note "comment" >}} > Comment goes here as a blockquote

additional text goes here... {{< /note >}}

Card Quote

• Ex. {{< card-quote text="Individual commitment to a group effort—that is what makes a team work, a company work, a society work, a civilization work." cite="Vince Lombardi, National Football League (NFL) coach" >}}

Asset Image

asset-image shortcode {{< asset-img path="/img/digitalgov-logo-black.svg" alt="" width="220" >}}

asset-image shortcode dark {{< asset-img path="/img/digitalgov-logo-white.png" alt="" width="220" bg="dark" >}}

Box

box shortcode:

{{< box >}} Box with no color {{< /box >}}

{{< box color="base" >}} Box with base {{< /box >}}

{{< box color="base-light" >}} Box with base-light {{< /box >}}

{{< box color="base-dark" >}} Box with base-dark {{< /box >}}

Footnote

{{< footnote >}} Some footnote text {{< /footnote >}}

Author bio

{{< authors-bio "authors-id" >}} eg - {{< authors-bio "kelley-holden" >}}
This will display the Author Display Name as a level H3 heading along with their agency if one exists. The bio is displayed in a <p> (paragraph) element.

If the Author does not have a bio then this component will not display.

The component does not include a heading such as 'About the Author' or 'About the Speaker' so it is up to you to add this as appropriate. When adding the heading use an H2 level to maintain the correct document outline for accessibility. Example:

## About the Speaker
{{< author-bio "dan-williams" >}}

## _About the Author_
{{< author-bio "julia-elman" >}}

---