1024w, /congo/samples/rich-content/feature-alexander-shatov-mr4JG4SYOF8-unsplash_hu155f404c35e9686a73aa8cdc88b17fb3_131160_1320x0_resize_q75_box.jpg 2x" src=/congo/samples/rich-content/feature-alexander-shatov-mr4JG4SYOF8-unsplash_hu155f404c35e9686a73aa8cdc88b17fb3_131160_660x0_resize_q75_box.jpg alt="An example cover image depicting icons of some popular media organisations."><figcaptionclass="mb-6 -mt-3 text-center">This is an example cover image with a caption.</figcaption></div></header><sectionclass="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row"><divclass="order-first px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8"><divclass="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-10"><detailsopenclass="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5"><summaryclass="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">Table of Contents</summary><divclass="py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-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-w-0 min-h-0 max-w-prose grow"><p>Hugo ships with several <ahref=https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodestarget=_blankrel="noreferrer noopener">built-in shortcodes</a>
for rich content, along with a <ahref=https://gohugo.io/about/hugo-and-gdpr/target=_blankrel="noreferrer noopener">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 ltr:-left-6 rtl:-right-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 ltr:-left-6 rtl:-right-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>— 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 ltr:-left-6 rtl:-right-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><scripttype=application/javascriptsrc=https://gist.github.com/jpanther/a873e1219ffeaa80a926bbe8255f348e.js></script><h2id=vimeoclass="relative group">Vimeo <spanclass="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-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"cy="30.5"r="30.5"opa
