Post template
This example shows the minimum markup of a post template. It does not include:
- the complete global navigation
- the optional translations component
- the complete list of site links for the footer.
It does show the markup of the post meta details, the sidebar links to related content, and the comments section.
The beta banner is contained within <div class="banner"> and can be removed when no longer required.
Open this Post page in a new tab
HTML:
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Post page template - W3C Design System</title>
<meta property="og:description" name="description" content="Post page template from the W3C design system"/>
<meta property="og:image" name="image" content="/dist/assets/images/w3c-opengraph-image.png">
<script src="/dist/assets/js/libraries/fontfaceobserver.js"></script>
<script>
let myFont = new FontFaceObserver('Noto Sans');
Promise.all([myFont.load()]).then(function () {
document.documentElement.className += " fonts-loaded";
});
var jsAssetsPath = "/dist/assets/";
</script>
<link rel="stylesheet" href="/dist/assets/styles/core.css?ver=1.4.3" media="screen"/>
<!--
CSS Mustard Cut
Print (Edge doesn't apply to print otherwise)
Edge, Chrome 39+, Opera 26+, Safari 9+, iOS 9+, Android ~5+, Android UCBrowser ~11.8+
FF 47+
-->
<link rel="stylesheet" id="advanced-stylesheet" href="/dist/assets/styles/advanced.css?ver=1.4.3" media="
only print,
only all and (pointer: fine), only all and (pointer: coarse), only all and (pointer: none),
only all and (min--moz-device-pixel-ratio:0) and (display-mode:browser), (min--moz-device-pixel-ratio:0) and (display-mode:fullscreen)
">
<link rel="stylesheet" href="/dist/assets/styles/print.css" media="print"/>
<script>
(function() {
let linkEl = document.getElementById('advanced-stylesheet');
if (window.matchMedia && window.matchMedia(linkEl.media).matches) {
let head = document.querySelector('head');
// Add main JS
let jsMain = document.createElement('script');
jsMain.src = '/dist/assets/js/main.js?ver=1.4.3';
jsMain.defer = true;
head.appendChild(jsMain);
// Update classname to show JS is available
(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement);
}
})();
</script>
</head>
<body class="post">
<a class="skip-link" href="#main">Skip to content</a>
<div class="grid-wrap">
<div class="wrap">
<header class="global-header">
<span role="status" aria-live="polite"></span>
<div class="banner">
<div class="banner__inner l-center">
<p>This is a new website. <a href="https://github.com/w3c/w3c-website">Give feedback</a> to help us improve it.</p>
</div>
</div>
<nav id="lang-nav" aria-label="Language options">
<div class="l-center">
<div class="l-cluster">
<ul>
<li><a href="/ja" hreflang="ja" lang="ja">日本語ホームページ<span class="visuallyhidden" lang="en"> (Japanese website)</span></a></li>
<li><a href="/zh" hreflang="zh-hans" lang="zh-hans">简体中文首页<span class="visuallyhidden" lang="en"> (Chinese website)</span></a></li>
</ul>
</div>
</div>
</nav>
<nav id="global-nav" aria-label="Main">
<div class="global-nav__inner l-center">
<a class="logo-link" href="/">
<span class="logo">
<img src="https://www.w3.org/assets/logos/w3c/w3c-no-bars.svg" alt="W3C" role="img"/>
</span>
<span class="visuallyhidden">Visit the W3C homepage</span>
</a>
<button type="button" class="button button--ghost with-icon--after with-icon--larger" data-trigger="mobile-nav" style="display: none;"></button>
<ul data-component="nav-double-intro">
<li class="top-nav-item has-children">
<a href="path/to/page" class="nav-link">Standards</a>
<div class="nav__submenu" data-nav="submenu" style="display: none;">
<div class="l-center">
<div class="nav__submenu__intro">
<h2 class="nav__submenu__intro__heading">Standards</h2>
<div class="nav__submenu__intro__text">
<p>Understand the various specifications, their maturity levels on the Web Standards track, and their adoption.</p>
<a href="path/to/page">Explore Web Standards</a>
</div>
</div>
<ul>
<li>
<a href="path/to/page">Technical reports</a>
</li>
<li>
<a href="path/to/page">Translations of technical reports</a>
</li>
<li>
<a href="path/to/page"> Liaisons</a>
</li>
<li>
<a href="path/to/page">Promote web standards</a>
</li>
</ul>
</div>
</div>
</li>
<li class="top-nav-item has-children">
<a href="path/to/page" class="nav-link">Groups</a>
<div class="nav__submenu" data-nav="submenu" style="display: none;">
<div class="l-center">
<div class="nav__submenu__intro">
<h2 class="nav__submenu__intro__heading">Groups</h2>
<div class="nav__submenu__intro__text">
<p>A variety of groups develop Web Standards, guidelines, or supporting materials.</p>
<a href="path/to/page">Discover W3C groups</a>
</div>
</div>
<ul>
<li>
<a href="path/to/page">Working groups</a>
</li>
<li>
<a href="path/to/page">Interest groups</a>
</li>
<li>
<a href="path/to/page">Community groups</a>
</li>
<li>
<a href="path/to/page">Business groups</a>
</li>
<li>
<a href="path/to/page">Technical architecture group</a>
</li>
<li>
<a href="path/to/page">Advisory Board</a>
</li>
<li>
<a href="path/to/page">Invited experts</a>
</li>
<li>
<a href="path/to/page">Participant guidebook</a>
</li>
<li>
<a href="path/to/page">Mailing lists</a>
</li>
</ul>
</div>
</div>
</li>
<li class="top-nav-item has-children">
<a href="path/to/page" class="nav-link">Get involved</a>
<div class="nav__submenu" data-nav="submenu" style="display: none;">
<div class="l-center">
<div class="nav__submenu__intro">
<h2 class="nav__submenu__intro__heading">Get involved</h2>
<div class="nav__submenu__intro__text">
<p>W3C works at the nexus of core technology, industry needs, and societal needs.</p>
<a href="path/to/page">Find ways to get involved</a>
</div>
</div>
<ul>
<li>
<a href="path/to/page">Working in business ecosystems</a>
</li>
<li>
<a href="path/to/page">E-commerce</a>
</li>
<li>
<a href="path/to/page">Media & Entertainment</a>
</li>
<li>
<a href="path/to/page">Network & Communications</a>
</li>
<li>
<a href="path/to/page">Publishing</a>
</li>
<li>
<a href="path/to/page">Smart Cities</a>
</li>
<li>
<a href="path/to/page">Transportation</a>
</li>
<li>
<a href="path/to/page">Web Advertising</a>
</li>
<li class="break-after">
<a href="path/to/page">Web of Things</a>
</li>
<li>
<a href="path/to/page">W3C Membership</a>
</li>
<li>
<a href="path/to/page">Donate</a>
</li>
<li>
<a href="path/to/page">Sponsoring W3C</a>
</li>
</ul>
</div>
</div>
</li>
<li class="top-nav-item has-children">
<a href="path/to/page" class="nav-link">Resources</a>
<div class="nav__submenu" data-nav="submenu" style="display: none;">
<div class="l-center">
<div class="nav__submenu__intro">
<h2 class="nav__submenu__intro__heading">Resources</h2>
<div class="nav__submenu__intro__text">
<p>Master Web technology fundamentals, use our developer tools, or contribute code.</p>
<a href="path/to/page">Learn from W3C resources</a>
</div>
</div>
<ul>
<li>
<a href="path/to/page">Validators and tools</a>
</li>
<li>
<a href="path/to/page">Accessibility fundamentals</a>
</li>
<li>
<a href="path/to/page">Internationalization</a>
</li>
<li>
<a href="path/to/page">Learn CSS</a>
</li>
</ul>
</div>
</div>
</li>
<li class="top-nav-item has-children">
<a href="path/to/page" class="nav-link">News and events</a>
<div class="nav__submenu" data-nav="submenu" style="display: none;">
<div class="l-center">
<div class="nav__submenu__intro">
<h2 class="nav__submenu__intro__heading">News and events</h2>
<div class="nav__submenu__intro__text">
<p>Recent content across news, blogs, press releases, media; upcoming events.</p>
<a href="path/to/page">Follow news and events</a>
</div>
</div>
<ul>
<li>
<a href="path/to/page">News</a>
</li>
<li>
<a href="path/to/page">Blog</a>
</li>
<li>
<a href="path/to/page">Press releases</a>
</li>
<li class="break-after">
<a href="path/to/page">In the media</a>
</li>
<li>
<a href="path/to/page">Events</a>
</li>
<li>
<a href="path/to/page">Talks</a>
</li>
<li>
<a href="path/to/page">Workshops</a>
</li>
<li>
<a href="path/to/page">Meetings</a>
</li>
<li>
<a href="path/to/page">Conferences</a>
</li>
</ul>
</div>
</div>
</li>
<li class="top-nav-item has-children">
<a href="path/to/page" class="nav-link">About</a>
<div class="nav__submenu" data-nav="submenu" style="display: none;">
<div class="l-center">
<div class="nav__submenu__intro">
<h2 class="nav__submenu__intro__heading">About</h2>
<div class="nav__submenu__intro__text">
<p>Understand our values and principles, learn our history, look into our policies, meet our people.</p>
<a href="path/to/page">Find out more about us</a>
</div>
</div>
<ul>
<li>
<a href="path/to/page">Our mission</a>
</li>
<li>
<a href="path/to/page">Sponsoring W3C</a>
</li>
<li>
<a href="path/to/page">History</a>
</li>
<li>
<a href="path/to/page">Leadership</a>
</li>
<li>
<a href="path/to/page">Staff</a>
</li>
<li>
<a href="path/to/page">Evangelists</a>
</li>
<li>
<a href="path/to/page">Careers</a>
</li>
<li>
<a href="path/to/page">Press and media</a>
</li>
<li>
<a href="path/to/page">Contact</a>
</li>
<li>
<a href="path/to/page">Policies and legal information</a>
</li>
</ul>
</div>
</div>
</li>
<li class="top-nav-item">
<a href="path/to/page" class="nav-link icon-link"><img class="icon" src="/dist/assets/svg/search.svg" width="24" height="24" alt aria-hidden="true"><span class="hide-at-max-width">Search</span></a>
</li>
<li class="top-nav-item">
<a href="path/to/page" class="account-login icon-link with-icon--after">My account <span class="avatar avatar--small icon"><img src="/dist/assets/svg/avatar.svg" width="32" height="32" alt aria-hidden="true" /></span></a>
</li>
</ul>
</div>
</nav>
</header>
<nav id="breadcrumb" aria-label="Breadcrumb">
<div class="l-center">
<div class="l-cluster">
<ol class="breadcrumbs clean-list" role="list">
<li><a href="/">Home</a></li>
<li><a href="/pg2">Second Page</a></li>
<li><a href="/pg2/this-pg" aria-current="page">This page</a></li>
</ol>
</div>
</div>
</nav>
<main id="main" >
<div class="content">
<article>
<h1>Page title</h1>
<div class="sub-head">Part of <a href="path/to/page">W3C life</a></div>
<!-- translations component would go here -->
<section class="meta">
<h2 class="visuallyhidden">Author(s) and publish date</h2>
<dl>
<dt>By:</dt>
<dd class="l-cluster">
<ul class="clean-list" role="presentation">
<li>
<span class="with-icon--before with-icon--larger"><span class="avatar avatar--small icon"><img src="/dist/assets/svg/avatar.svg" width="32" height="32" alt aria-hidden="true" /></span> Name of author</span>
</li>
<li>
<span class="with-icon--before with-icon--larger"><span class="avatar avatar--small icon"><img src="/dist/assets/svg/avatar.svg" width="32" height="32" alt aria-hidden="true" /></span> Name of author</span>
</li>
</ul>
</dd>
<dt>Published:</dt>
<dd>4 January 2021</dd>
</dl>
<a href="#comments" class="skip-to-comments txt-pluto">Skip to 6 Comments</a>
</section>
<div class="component component--text">
<h2>Example text component</h2>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</div>
<figure class="component component--image">
<div class="l-frame l-frame--16-9">
<img src="/dist/assets/images/temp-developers-920.jpg"
srcset="/dist/assets/images/temp-developers-360.jpg 360w, /dist/assets/images/temp-developers-580.jpg 580w, /dist/assets/images/temp-developers-920.jpg 920w, /dist/assets/images/temp-developers-1520.jpg 1520w"
sizes="100vw"
loading="lazy"
alt="A Macbook screen with code, as seen from over the developer's shoulder" />
</div>
<figcaption>
<p>The figcaption is not a replacement for the image's <code>alt</code> attribute. It should be used for providing relevant supporting content.</p>
</figcaption>
</figure>
<!-- etc -->
</article>
<div class="related">
<nav class="related__inner" aria-labelledby="related-label">
<h2 id="related-label" class="txt-jupiter">Related to this post</h2>
<div>
<h3>Tags</h3>
<ul class="clean-list" role="list">
<li><a href="path/to/page">Tag name 1</a></li>
<li><a href="path/to/page">Tag name 2</a></li>
<li><a href="path/to/page">Tag name 3</a></li>
</ul>
</div>
<div>
<h3>Ecosystems</h3>
<ul class="clean-list" role="list">
<li><a href="path/to/page">Ecosystem name A</a></li>
<li><a href="path/to/page">Ecosystem name B</a></li>
</ul>
</div>
<div>
<h3>Groups</h3>
<ul class="clean-list" role="list">
<li><a href="path/to/page">Working Group X</a></li>
<li><a href="path/to/page">Working Group Y</a></li>
</ul>
</div>
<div>
<h3>Specifications</h3>
<ul class="clean-list" role="list">
<li><a href="path/to/page">Specification 1</a></li>
<li><a href="path/to/page">Specification 2</a></li>
</ul>
</div>
</nav>
</div>
</div>
<section class="rss">
<h2 class="txt-jupiter">Related RSS feed</h2>
<div class="with-icon--before with-icon--larger">
<img class="icon icon--larger" src="/dist/assets/svg/rss.svg" width="30" height="30" alt aria-hidden="true" />
<a href="https://www.w3.org/blog/feed">Subscribe to our Blog feed</a>
</div>
</section> </main>
<aside class="crosslinks">
<div class="l-center">
<div class="component component--columns component--columns--images">
<div class="component--columns__intro">
<h2>Section heading for these teasers</h2>
<p>Highlights from across our News, Press Releases and Blog</p>
</div>
<ul class="clean-list" role="presentation">
<li>
<div class="card" data-component="card">
<div class="card__text">
<h3 class="card__heading"><a href="path/to/page" class="card__link">W3C starts web payments standards work</a></h3>
<p>New working group launched to make payments easier and more secure.</p>
<p class="txt-pluto">News</p>
</div>
<div class="l-frame l-frame--16-9 card__image">
<img src="/dist/assets/images/temp-developers-920.jpg"
srcset="/dist/assets/images/temp-developers-360.jpg 360w, /dist/assets/images/temp-developers-580.jpg 580w, /dist/assets/images/temp-developers-700.jpg 700w, /dist/assets/images/temp-developers-920.jpg 920w, /dist/assets/images/temp-developers-1520.jpg 1520w"
sizes="(min-width: 64em) 33vw, (min-width: 48em) 50vw, 100vw"
loading="lazy"
alt="A Macbook screen with code, as seen from over the developer's shoulder" />
</div>
</div>
</li>
<li>
<div class="card" data-component="card">
<div class="card__text">
<h3 class="card__heading"><a href="path/to/page" class="card__link">Work begins on extensions to WCAG 2.0</a></h3>
<p>A new charter for the Working Group was formally approved by W3C.</p>
<p class="txt-pluto">Blog</p>
</div>
<div class="l-frame l-frame--16-9 card__image">
<img src="/dist/assets/images/temp-developers-920.jpg"
srcset="/dist/assets/images/temp-developers-360.jpg 360w, /dist/assets/images/temp-developers-580.jpg 580w, /dist/assets/images/temp-developers-700.jpg 700w, /dist/assets/images/temp-developers-920.jpg 920w, /dist/assets/images/temp-developers-1520.jpg 1520w"
sizes="(min-width: 64em) 33vw, (min-width: 48em) 50vw, 100vw"
loading="lazy"
alt="A Macbook screen with code, as seen from over the developer's shoulder" />
</div>
</div>
</li>
<li>
<div class="card" data-component="card">
<div class="card__text">
<h3 class="card__heading"><a href="path/to/page" class="card__link">Contributions to ISOC report on mobile internet</a></h3>
<p>The HTML5Apps team contributed significantly to the report.</p>
<p class="txt-pluto">Press release</p>
</div>
</div>
</li>
<li>
<div class="card" data-component="card">
<div class="card__text">
<h3 class="card__heading"><a href="path/to/page" class="card__link">W3C starts web payments standards work</a></h3>
<p>New working group launched to make payments easier and more secure.</p>
<p class="txt-pluto">News</p>
</div>
<div class="l-frame l-frame--16-9 card__image">
<img src="/dist/assets/images/temp-developers-920.jpg"
srcset="/dist/assets/images/temp-developers-360.jpg 360w, /dist/assets/images/temp-developers-580.jpg 580w, /dist/assets/images/temp-developers-700.jpg 700w, /dist/assets/images/temp-developers-920.jpg 920w, /dist/assets/images/temp-developers-1520.jpg 1520w"
sizes="(min-width: 64em) 33vw, (min-width: 48em) 50vw, 100vw"
loading="lazy"
alt="A Macbook screen with code, as seen from over the developer's shoulder" />
</div>
</div>
</li>
</ul>
</div>
</div>
</aside>
<section class="comments">
<div class="l-center">
<h2 id="comments">Comments <span>(6)</span></h2>
<a class="skip-to-comment-form" href="#respond">Skip to comment form</a>
<ol class="clean-list comment-list" role="list">
<li>
<article id="comment-106895" class="l-sidebar comment">
<div>
<div class="not-sidebar">
<div class="comment__author">Joseph Lorem-Ipsum - 6 months ago</div>
<div class="comment__body">
<p>The work achieved by the W3C community is really helpful for developers and users alike :)</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</div>
<a rel="nofollow" href="post.html?replytocom=106895#respond" data-replylink data-commentid="106895" data-postid="18930" data-belowelement="comment-106895" data-replyto="Reply to Joseph Lorem-Ipsum">Reply <span class="visuallyhidden">to Joseph Lorem-Ipsum</span></a>
</div>
<div class="sidebar comment__img">
<div class="avatar avatar--med">
<img alt="" src="https://www.w3.org/thumbnails/200/avatar-images/7mtpjeh4in8kw04ksso8ss4ocsksswo.webp" loading="lazy">
</div>
</div>
</div>
</article>
<ul class="clean-list reply-list" role="list">
<li>
<article id="comment-204687" class="l-sidebar comment">
<div>
<div class="not-sidebar">
<div class="comment__author">Jake Weary - 6 months ago</div>
<div class="comment__body">
<p>Hear hear!!</p>
</div>
<a rel="nofollow" href="post.html?replytocom=204687#respond" data-replylink data-commentid="204687" data-postid="18930" data-belowelement="comment-204687" data-replyto="Reply to Jake Weary">Reply <span class="visuallyhidden">to Jake Weary</span></a>
</div>
<div class="sidebar">
<div class="avatar avatar--med">
<img alt="" src="https://www.w3.org/thumbnails/200/avatar-images/7mtpjeh4in8kw04ksso8ss4ocsksswo.webp" loading="lazy">
</div>
</div>
</div>
</article>
</li>
<li>
<article id="comment-345071" class="l-sidebar comment">
<div>
<div class="not-sidebar">
<div class="comment__author">Celeste Magritte - 5 months ago</div>
<div class="comment__body">
<p>I second that!</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</div>
<a rel="nofollow" href="post.html?replytocom=345071#respond" data-replylink data-commentid="345071" data-postid="18930" data-belowelement="comment-345071" data-replyto="Reply to Celeste Magritte">Reply <span class="visuallyhidden">to Celeste Magritte</span></a>
</div>
<div class="sidebar">
<div class="avatar avatar--med">
<img alt="" src="https://www.w3.org/thumbnails/200/avatar-images/7mtpjeh4in8kw04ksso8ss4ocsksswo.webp" loading="lazy">
</div>
</div>
</div>
</article>
</li>
</ul>
</li>
<li>
<article id="comment-854034" class="l-sidebar comment">
<div>
<div class="not-sidebar">
<div class="comment__author">Beatrice Willow - 1 month ago</div>
<div class="comment__body">
<p>Where can I find out details about the CSS Working Group?</p>
</div>
<a rel="nofollow" href="post.html?replytocom=854034#respond" data-replylink data-commentid="854034" data-postid="18930" data-belowelement="comment-854034" data-replyto="Reply to Beatrice Willow">Reply <span class="visuallyhidden">to Beatrice Willow</span></a>
</div>
<div class="sidebar">
<div class="avatar avatar--med">
<img alt="" src="https://www.w3.org/thumbnails/200/avatar-images/7mtpjeh4in8kw04ksso8ss4ocsksswo.webp" loading="lazy">
</div>
</div>
</div>
</article>
<ul class="clean-list reply-list" role="list">
<li>
<article id="comment-120738" class="l-sidebar comment">
<div>
<div class="not-sidebar">
<div class="comment__author">Deidre De Veloper - 3 weeks ago</div>
<div class="comment__body">
<p>Here is a link: <a href="https://www.w3.org/groups/wg/css">https://www.w3.org/groups/wg/css</a></p>
</div>
<a rel="nofollow" href="post.html?replytocom=120738#respond" data-replylink data-commentid="120738" data-postid="18930" data-belowelement="comment-120738" data-replyto="Reply to Deidre De Veloper">Reply <span class="visuallyhidden">to Deidre De Veloper</span></a>
</div>
<div class="sidebar">
<div class="avatar avatar--med">
<img alt="" src="https://www.w3.org/thumbnails/200/avatar-images/7mtpjeh4in8kw04ksso8ss4ocsksswo.webp" loading="lazy">
</div>
</div>
</div>
</article>
</li>
</ul>
</li>
<li>
<article id="comment-306724" class="l-sidebar comment">
<div>
<div class="not-sidebar">
<div class="comment__author">Nadia Brown - 1 week ago</div>
<div class="comment__body">
<p>This was a very interesting and informative article</p>
</div>
<a rel="nofollow" href="post.html?replytocom=306724#respond" data-replylink data-commentid="306724" data-postid="18930" data-belowelement="comment-306724" data-replyto="Reply to Nadia Brown">Reply <span class="visuallyhidden">to Nadia Brown</span></a>
</div>
<div class="sidebar">
<div class="avatar avatar--med">
<img src="/dist/assets/svg/avatar.svg" width="50" height="50" alt aria-hidden="true" />
</div>
</div>
</div>
</article>
</li>
</ol>
<div id="respond" class="l-box l-box--no-border l-box--no-padding" data-respondelement>
<div>
<h3 class="txt-saturn" data-title="reply">Post a new comment</h3>
</div>
<div class="l-sidebar comment-form-wrap">
<div>
<div class="not-sidebar">
<form id="comment-form" name="comment-form" onsubmit="return false" novalidate>
<div class="field">
<label for="comment">
<span class="field-label">Comment</span>
<span class="field-hint">Your email address will not be published.</span>
</label>
<textarea id="comment" name="comment"></textarea>
</div>
<div class="l-switcher">
<div>
<div>
<div class="field">
<label for="name">
<span class="field-label">Name</span>
</label>
<input type="text" id="name" name="name" autocomplete="name">
</div>
</div>
<div>
<div class="field">
<label for="email">
<span class="field-label">Email address</span>
</label>
<input type="email" id="email" name="email" autocomplete="email" autocapitalize="none" autocorrect="off" spellcheck="false" inputmode="email">
</div>
</div>
</div>
</div>
<div class="field">
<button class="button" type="submit">Post comment</button>
</div>
</form>
</div>
<div class="sidebar">
<div class="avatar avatar--med">
<img src="/dist/assets/svg/avatar.svg" width="50" height="50" alt aria-hidden="true" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="global-footer">
<div class="l-center">
<div class="global-footer__links">
<div class="l-cluster">
<ul class="clean-list" role="list">
<li><a href="/">Home</a></li>
</ul>
</div>
<ul class="clean-list" role="list">
<li><a class="with-icon--larger" href="https://w3c.social/@w3c" hreflang="en">
<img class="icon icon--larger" src="/dist/assets/svg/mastodon.svg" width="20"
height="20" alt aria-hidden="true" loading="lazy"/>
<span class="visuallyhidden">W3C on Mastodon</span></a>
</li>
<li><a class="with-icon--larger" href="https://github.com/w3c/" hreflang="en">
<img class="icon icon--larger" src="/dist/assets/svg/github.svg" width="20"
height="20" alt aria-hidden="true" loading="lazy"/>
<span class="visuallyhidden">W3C on GitHub</span></a>
</li>
</ul>
</div>
<p class="copyright">Copyright © 20XX <a href="https://www.w3.org/">World Wide Web Consortium</a>.<br>
<abbr title="World Wide Web Consortium">W3C</abbr><sup>®</sup>
<a href="https://www.w3.org/policies/#disclaimers">liability</a>,
<a href="https://www.w3.org/policies/#trademarks">trademark</a> and
<a rel="license" href="https://www.w3.org/copyright/software-license/" title="W3C Software License">permissive license</a>
rules apply.</p>
</div>
</footer>
</div>
<script src="/assets/design-system/js/libraries/iframe-resizer/iframeResizer.contentWindow.min.js"></script>
</body>
</html>
Considerations
Note the .post class applied to <body>.