Hugo shortcodes

Important

When using relative links (i.e. internal links) don't include a leading / at the start of the url.

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

Best Practice: Shortcode should be added above content blocks to ensure no alignment errors occur.

Correct use

{{< img-right src="image-src-goes-here" >}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 

Compared to

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

{{< img-right src="image-src-goes-here" >}}

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

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: This is useful if the linked file is a generated file (like an author page) with no .md file to reference

{{< ref "author/nirmala-ramprasad" >}}

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

Source: resources/21st-century-integrated-digital-experience-act.md: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

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

Note

The Note Short code is intended to help contributors apply call-outs and highlight important information quickly and easily.

note variant	icon	usage
default	notifications
activity	assessment
action	campaign
alert	report
comment	comment
video	fast_forward
join	groups
disclaimer	info

Note: There is also a default that will fall back to the base note format.

{{< note variant="note" >}}
  text goes here... 
{{< /note >}}

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

The following are all the variants of the "note" short code and how to use them.

A note can also include a button:

{{< note button-text="submit">}}
  text goes here...
{{< /note >}}

And has several variants with their own icons.

Activity:

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

Action:

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

Alert:

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

Comment:

{{< note variant="comment" >}} > Comment goes here as a blockquote
 additional text goes here...
{{< /note >}}

Video:

{{< note variant="video" >}}
  Video text goes here...
{{< /note >}}

Join:

{{< note variant="join" >}}
  Join text goes here...
{{< /note >}}

Disclaimer:

Please know that Disclaimer is set with default text and you will need to add the closing tag and should not add any text for this Note Variant.

{{< note variant="disclaimer" >}}{{< /note >}}

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

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

Card Quote

Example:

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

{{< 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.

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

---