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

iFrame Embed

Embed an iframe from C-SPAN into the document. Provide the src url and title attributes.

{{< cspan-iframe src="https://www.c-span.org/video/standalone/?512480-1/confirmation-hearing-gsa-administration-intelligence-agencies-nominees" title="Confirmation Hearing for GSA Administration and Intelligence Agencies Nominees" >}}

Accordion

For the accordion shortcode, use USWDS icons to pass in the name of the icon. You must use the name of the icon from the list otherwise it will not display.

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

Card Policy

For an example of card policy shortcode, see https://digital.gov/resources/21st-century-integrated-digital-experience-act/ that uses card-policy.

Shortcode for linking to legislation excerpts.

• kicker
• title
• link to pdf at bottom of shortcode

resources/21st-century-integrated-digital-experience-act.md Line 59

{{< card-policy src="https://www.congress.gov/115/plaws/publ336/PLAW-115publ336.pdf" kicker="Law" title="**P.L. 115-336**: 21st Century Integrated Digital Experience Act" >}}

To improve executive agency digital services, and for other purposes.

Be it enacted by the Senate and House of Representatives of the United States of America in Congress assembled,

**SECTION 1. SHORT TITLE.**

This Act may be cited as the 21st Century Integrated Digital
Experience Act or the 21st Century IDEA.

{{ </card-policy >}}

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

When using an img-right with a note, the code should be on the same line to render properly.

{{< note "comment" >}}{{< img-right src="anil-chaudry-veterans-day-2021-600" >}}

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

Asset Static (AWS hosted pdf, docs, excel files)

After uploading a static file on workflow, the file will be hosted on AWS. This short code will prepend the AWS path to the file. Use button for external hosted files.

{{< asset-static file="Management1-Panel-Remote-Teams.pdf" label="Read the transcript (PDF, 58 KB, 7 pages)" >}}

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

Checklist

Use a checklist for creating a list of checkbox items that is not a web based checklist but for print.

1. Use the {{ < checklist >}} shortcode when you want to have a printable checklist
2. Use an H2 (**) before the {{ < checklist >}}, the {{ < checklist >}} will generate a top gray border
3. Nest {{< checkbox >}} shortcodes within the {{< checklist >}} to create a list of checkbox items
4. Use {{< checkbox-sublist-item >}} will create a bullet point sublist item
5. Follow the same nesting structure as below, don't indent {{< checkbox-sublist-item >}} in the {{< checkbox-sublist >}} shortcode, else it will break

  ## Header goes here
  {{< checklist >}} 

    {{< checkbox >}}Dress professionally (business casual).{{< /checkbox >}} 
    {{< checkbox >}}Speak slowly and clearly.{{< /checkbox >}} 
    {{< checkbox >}}Keep your camera on. This allows people to see you, including those who lip read.{{< /checkbox >}} 
    {{< checkbox >}}Announce the slide number instead of saying &#34;Next slide.&#34;"{{< /checkbox >}} 
    {{< checkbox >}}To meet [Section 508](https://www.section508.gov/manage/laws-and-policies) requirements for accessibility, provide “audio descriptions” as follows:" {{< /checkbox >}}

    {{< checklist-sublist >}}
    {{< checkbox-sublist-item >}} Use large text. {{< /checkbox-sublist-item >}}
    {{< checkbox-sublist-item >}}Say your name each time you begin to speak, or announce the new speaker when there is a speaker change{{< /checkbox-sublist-item >}}
    {{< checkbox-sublist-item >}}Describe all images on the slides{{< /checkbox-sublist-item >}}
    {{< checkbox-sublist-item >}}Speak to the text on the slides including any links referenced on the slides{{< /checkbox-sublist-item >}} 
    {{< checkbox-sublist-item >}}Describe the information that is important for understanding the content{{< /checkbox-sublist-item >}} 
    {{< checkbox-sublist-item >}}Try not to read your slides word-for-word{{< /checkbox-sublist-item >}}
    {{< /checklist-sublist >}}

  {{< /checklist >}}
  

Do-Don't Table

When needing to provide a list of do's and don't, use the do-dont-table:

When setting up a do-dont-table, you need to make sure you have the correct formatting.

1. Start with a a do-dont-table
2. Add a caption to do-dont-table that describes the table contents
3. Create an opening and closing {{< row >}}
4. Nest do-row and dont-row inside
5. Place text, markdown and shortcodes between the {{ do-row }} & {{ dont-row }}

{{< do-dont-table caption="This is a table" >}}
  {{< row >}}
    {{< do-row >}} [Multilingual](https://digital.gov/communities/multilingual/)
    {{< /do-row >}}
    {{< dont-row >}} Don't follow these bad
    practices{{< /dont-row >}}
  {{< /row >}}

  {{< row >}}
    {{< do-row >}} open &#34;the door&#34; for those who need a hand{{< /do-row >}}
    {{< dont-row >}} Don't follow these bad practices{{< /dont-row >}}
  {{< /row >}}

  {{< row >}}
    {{< do-row >}} read `the directions` before using{{< /do-row >}}
    {{< dont-row >}}
      forget {{< highlight >}}to wash your hands{{< /highlight >}} for 20 seconds
    {{< /dont-row >}}
  {{< /row >}}
{{< /do-dont-table >}}

Box with Border Outline

Displays a blue ring around a piece of content in order to highlight it. Can accept nested text based shortcodes like note and box. img shortcodes will not render, do not use within ring shortcode.

Shortcode example:

{{< ring title="Case in point">}}
  This is a ring shortcode
{{< /ring >}}

Nested shortcode example:

{{< ring title="Nested text only shortcodes" >}}
  {{< note "plain" >}}
  **Note Goes Here** More note content goes into here
  {{< /note >}}
{{< /ring >}}

Featured Resource

Featured rounded box that displays a guide kicker, title, summary, and image and links to a resource.

Shortcode example:

{{< featured-resource resourcePath = "/guides/dap/" kicker = "kicker to display">}}
{{< featured-resource resourcePath = "/resources/an-introduction-to-plain-language/" kicker = "Plain Language">}}

resourcePath is a relative hugo path to a resource, guide or other page.

primary_image field is used to populate an image if the front matter field exists.

Flexible Image

Displays an image with a setting to show the image at 400px width if set to small="true", otherwise display image as full size.

Shortcode example:

{{< img-flexible src=hcd-design-operations-8 small="true" >}}

---