Group details
An example of the group details page template. This example does not include:
- the complete global navigation
- the complete list of site links for the footer.
Open this Group details 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>Group details template - W3C Design System</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta property="og:description" name="description" content="Group details 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";
});
</script>
<link rel="stylesheet" href="/dist/assets/styles/core.css?ver=1.4.1" 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.1" 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.1';
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="group">
<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">
<img src="/dist/assets/svg/beta.svg" class="icon icon--beta" alt="Beta icon" role="img"/>
<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 class="clean-list" role="list">
<li><a href="/zh" hreflang="zh-hans" lang="zh-hans">简体中文首页</a></li>
<li><a href="/ja" hreflang="ja" lang="ja">日本語ホームページ</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="/dist/assets/svg/w3c-logo.svg" alt="W3C logo" role="img"/>
</span>
<span class="visuallyhidden">W3C homepage</span>
</a>
</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">
<h1>Name of group</h1>
<button type="button" class="button button--ghost with-icon with-icon--after" style="display:none;" data-toggle="true">Toggle group navigation <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320 512" class="icon" focusable="false" aria-hidden="true" width="1em" height="1em"><use class="angle-down" href="/dist/assets/svg/nav-icons.svg#angle-down"></use><use class="angle-up" href="/dist/assets/svg/nav-icons.svg#angle-up"></use></svg></button>
<nav id="group-nav" aria-label="Group details">
<div class="group-nav__inner">
<ul class="clean-list" role="list">
<li><a href="#" aria-current="true">Summary</a></li>
<li><a href="path/to/page">News</a></li>
<li><a href="path/to/page">Activity</a></li>
<li><a href="path/to/page">Participants</a></li>
<li><a href="path/to/page">Calendar</a></li>
<li><a href="path/to/page">Tools</a></li>
<li><a href="path/to/page">Publications</a></li>
<li><a href="path/to/page">Task Forces</a></li>
<li><a href="path/to/page">IPR</a></li>
</ul>
</div>
</nav>
<div class="details">
<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>
</div>
</div>
</main>
</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://twitter.com/W3C">
<img class="icon icon--larger" src="/dist/assets/svg/twitter.svg" width="20" height="20" alt aria-hidden="true" />
<span class="visuallyhidden">W3C on Twitter</span></a>
</li>
<li><a class="with-icon--larger" href="https://github.com/w3c/">
<img class="icon icon--larger" src="/dist/assets/svg/github.svg" width="20" height="20" alt aria-hidden="true" />
<span class="visuallyhidden">W3C on GitHub</span></a>
</li>
</ul>
</div>
<p class="copyright">Copyright © 20XX W3C <sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
<a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>) <a href="/Consortium/Legal/ipr-notice">Usage policies apply</a>.</p>
</div>
</footer>
</div>
<script src="/assets/design-system/js/libraries/iframe-resizer/iframeResizer.contentWindow.min.js"></script>
</body>
</html>Considerations
Note the .group class applied to <body>.
Note the use of the inline style display: none; on the button element with the data attribute data-toggle="true". This data attribute is targeted by JavaScript for expanding/closing the secondary navigation on this template. In the absence of JavaScript the button remains hidden to users and the navigation is expanded by default.
A media query is used so that when the viewport size is at least 1024px wide, the button is hidden again and the navigation is fully displayed in a sidebar.