,/congo/samples/rich-content/feature-alexander-shatov-mr4JG4SYOF8-unsplash_hu155f404c35e9686a73aa8cdc88b17fb3_131160_1320x0_resize_q75_h2_box.webp 1320w" sizes=100vw type=image/webp><imgwidth=1920height=1440class="mb-6 -mt-4 rounded-md"alt="An example cover image depicting icons of some popular media organisations."src=/congo/samples/rich-content/feature-alexander-shatov-mr4JG4SYOF8-unsplash_hu155f404c35e9686a73aa8cdc88b17fb3_131160_660x0_resize_q75_box.jpgsrcset="/congo/samples/rich-content/feature-alexander-shatov-mr4JG4SYOF8-unsplash_hu155f404c35e9686a73aa8cdc88b17fb3_131160_330x0_resize_q75_box.jpg330w,/congo/samples/rich-content/feature-alexander-shatov-mr4JG4SYOF8-unsplash_hu155f404c35e9686a73aa8cdc88b17fb3_131160_660x0_resize_q75_box.jpg660w
,/congo/samples/rich-content/feature-alexander-shatov-mr4JG4SYOF8-unsplash_hu155f404c35e9686a73aa8cdc88b17fb3_131160_1320x0_resize_q75_box.jpg 1320w" sizes=100vw></picture><figcaptionclass="-mt-3 mb-6 text-center">This is an example cover image with a caption.</figcaption></div></header><sectionclass="prose mt-0 flex max-w-full flex-col dark:prose-invert lg:flex-row"><divclass="order-first px-0 lg:order-last lg:max-w-xs lg:ps-8"><divclass="toc pe-5 print:hidden lg:sticky lg:top-10"><detailsopenclass="-ms-5 mt-0 overflow-hidden rounded-lg ps-5"><summaryclass="-ms-5 block cursor-pointer bg-neutral-100 py-1 ps-5 text-lg font-semibold text-neutral-800 lg:hidden dark:bg-neutral-700 dark:text-neutral-100">Table of Contents</summary><divclass="-ms-5 border-s border-dotted border-neutral-300 py-2 ps-5 dark:border-neutral-600"><navid=TableOfContents><ul><li><ahref=#youtube>YouTube</a></li><li><ahref=#twitter>Twitter</a></li><li><ahref=#gist>Gist</a></li><li><ahref=#vimeo>Vimeo</a></li></ul></nav></div></details></div></div><divclass="min-h-0 min-w-0 max-w-prose grow"><p>Hugo ships with several
<ahref=https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodestarget=_blankrel=noreferrer>built-in shortcodes</a> for rich content, along with a
<ahref=https://gohugo.io/about/hugo-and-gdpr/target=_blankrel=noreferrer>privacy config</a> and a set of <em>simple shortcodes</em> that enable static and no-JS versions of various social media embeds.</p><h2id=youtubeclass="relative group">YouTube <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#youtubearia-label=Anchor>#</a></span></h2><p>Below is an example using the built-in <code>youtube</code> shortcode.</p><divstyle=position:relative;padding-bottom:56.25%;height:0;overflow:hidden><iframesrc=https://www.youtube.com/embed/ZJthWmvUzzcstyle=position:absolute;top:0;left:0;width:100%;height:100%;border:0allowfullscreentitle="YouTube Video"></iframe></div><h2id=twitterclass="relative group">Twitter <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#twitteraria-label=Anchor>#</a></span></h2><p>This example uses the <code>twitter_simple</code> shortcode to output a Tweet. It requires two named parameters <code>user</code> and <code>id</code>.</p><styletype=text/css>.twitter-tweet{font:14px/1.45'-apple-system',BlinkMacSystemFont,segoeui,Roboto,Oxygen-Sans,Ubuntu,Cantarell,helveticaneue,sans-serif;border-left:4pxsolid#2b7bb9;padding-left:1.5em;color:#555}.twitter-tweeta{color:#2b7bb9;text-decoration:none}blockquote.twitter-tweeta:hover,blockquote.twitter-tweeta:focus{text-decoration:underline}</style><blockquoteclass=twitter-tweet><plang=endir=ltr>“In addition to being more logical, asymmetry has the advantage that its complete appearance is far more optically effective than symmetry.”<br>— Jan Tschichold <ahref=https://t.co/gcv7SrhvJb>pic.twitter.com/gcv7SrhvJb</a></p>— Design Reviewed | Graphic Design History (@DesignReviewed) <ahref="https://twitter.com/DesignReviewed/status/1085870671291310081?ref_src=twsrc%5Etfw">January 17, 2019</a></blockquote><p>Alternatively, the <code>tweet</code> shortcode can be used to embed a fully marked up Twitter card.</p><h2id=gistclass="relative group">Gist <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#gistaria-label=Anchor>#</a></span></h2><p>The <code>gist</code> shortcode can be used to embed a GitHub Gist. It requires two unnamed parameters: the username and ID of the Gist.</p><scriptsrc=https://gist.github.com/jpanther/a873e1219ffeaa80a926bbe8255f348e.js></script><h2id=vimeoclass="relative group">Vimeo <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#vimeoaria-label=Anchor>#</a></span></h2><p>The <code>vimeo_simple</code> shortcode will embed a Vimeo video.</p><style>.__h_video{position:relative;padding-bottom:56.23%;height:0;overflow:hidden;width:100%;background:#000}.__h_videoimg{width:100%;height:auto;color:#000}.__h_video.play{height:72px;width:72px;left:50%;top:50%;margin-left:-36px;margin-top:-36px;position:absolute;cursor:pointer}</style><divclass="s_video_simple __h_video"><ahref=https://vimeo.com/4.8912912e+07rel=noopenertarget=_blank><imgsrc=https://i.vimeocdn.com/video/337401969-979f0cc9f55fdf305fb8984e90d92639ec9d7ecc4c9dfbc6536e28edb43784ce-d_640srcset="https://i.vimeocdn.com/video/337401969-979f0cc9f55fdf305fb8984e90d92639ec9d7ecc4c9dfbc6536e28edb43784ce-d_640 1x, https://i.vimeocdn.com/video/337401969-979f0cc9f55fdf305fb8984e90d92639ec9d7ecc4c9dfbc6536e28edb43784ce-d_640 2x"alt="Sing Jan Swing - Kinetic Type"><divclass=play><svgversion="1"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 61 61"><circlecx="30.5"c
