Developer Programs

Learn

Docs

Section Intro

Formatting your Content > Shortcodes > Section Intro
shortcode
shortcode
content
content

If you want to add some visual oomph to your top-level site sections, consider using the jhdocs-section-intro shortcode.

This shortcode displays a hero image and a short block of introductory text.

This shortcode is meant to be placed at the top of your top-level navigation pages, offering a soft, marketing-style intro to each major section of your site. It’s a nice way to ease users into a new section of your site, helping them get a feel for what that site section is about before diving down into the details of that section’s content.

You can see examples of section intros at the top of each site section page in this site.

This shortcode takes the following parameters:

  • imgPath: The path to the image in your site
  • imgAlt: The alternate text to display for the image
  • detail: The intro text to display

Example

Below is an example of a section intro. (You would typically only display this at the top of a section intro page, but we’re displaying it inline here as an example.)

Section intro example markdown
{{< jhdocs-section-intro imgPath="../../../images/hero-support.jpg" imgAlt="Two White Message Balloons" detail="Contact us if you have any thoughts or questions on how you can use the jhDocs Hugo theme in your documentation site" >}}

Here is the rendered result of this markdown:

Contact us if you have any thoughts or questions on how you can use the jhDocs Hugo theme in your documentation site
Next topic: Swagger UI

Support options
Have questions on this topic?
Join the jhDocs team in Microsoft Teams to connect with the community.
See something in this page that needs to change?
Send us feedback on this page.

Did this page help you?

Last updated Wed Dec 17 2025