Home page template
An example of the home page template. It is broadly similar to the landing page template, with some minor differences as shown. This example does not include:
- the complete global navigation
- the complete list of site links for the footer.
Open this Home 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>Home template - W3C Design System</title>
<meta property="og:description" name="description" content="Home 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="home">
<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>
<main id="main" data-anchor="no">
<div class="u-full-width hero">
<div class="l-center">
<div class="l-sidebar">
<div>
<div class="not-sidebar">
<h1>We believe in one web for all</h1>
<p class="lead">We develop <a href="path/to/page">standards and guidelines</a> to help everyone build a web based on the principles of <a href="path/to/page">accessibility</a>, <a href="path/to/page">internationalization</a>, <a href="path/top/page">privacy</a> and <a href="path/top/page">security</a>.</p>
<a href="path/to/page" class="button button--alt">Find out more about W3C</a>
</div>
<div class="sidebar">
<img src="/dist/assets/svg/illustration-3.svg" alt />
</div>
</div>
</div>
</div>
</div>
<div class="component component--members u-full-width">
<div class="l-center">
<h2>Working with industry</h2>
<p>We work with a range of organizations to drive the direction of core web technologies and exchange ideas with industry and research leaders. We work in a range of business ecosystems including <a href="path/to/page">E-commerce</a>, <a href="path/to/page">Media & Entertainment</a> and <a href="path/to/page">Web of Things</a>.</p>
<div class="component--members__grid">
<figure>
<div class="l-box l-box--no-border">
<img src="/dist/assets/svg/placeholder-logo.svg" alt role="presentation" loading="lazy">
</div>
</figure>
<figure>
<div class="l-box l-box--no-border">
<img src="/dist/assets/svg/placeholder-logo.svg" alt role="presentation" loading="lazy">
</div>
</figure>
<figure>
<div class="l-box l-box--no-border">
<img src="/dist/assets/svg/placeholder-logo.svg" alt role="presentation" loading="lazy">
</div>
</figure>
<figure>
<div class="l-box l-box--no-border">
<img src="/dist/assets/svg/placeholder-logo.svg" alt role="presentation" loading="lazy">
</div>
</figure>
<figure>
<div class="l-box l-box--no-border">
<img src="/dist/assets/svg/placeholder-logo.svg" alt role="presentation" loading="lazy">
</div>
</figure>
<figure>
<div class="l-box l-box--no-border">
<img src="/dist/assets/svg/placeholder-logo.svg" alt role="presentation" loading="lazy">
</div>
</figure>
</div>
<a class="button button--alt" href="../page.html">Discover how W3C supports organizations</a>
</div>
</div>
<section class="component component--fifty-fifty">
<div class="illustration">
<div class="l-frame">
<img src="/dist/assets/svg/illustration-join.svg" alt role="presentation" />
</div>
</div>
<div class="component--fifty-fifty__text">
<h2 class="txt-earth">The Open Web Platform is Transforming Payments</h2>
<p>To help ensure that the Web evolves to meet new industry needs, we're convening banks, processors, regulators, card networks, e-commerce companies, telecom operators, multiple service vendors, browser and software vendors and others who are shaping the way Web Payments are developed.</p>
<div class="l-box l-box--no-border l-box--no-padding">
<a class="button button--alt" href="path/to/page">An optional link</a>
<a href="path/to/page">Another optional link</a>
</div>
</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>
</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 .home class applied to <body>. The <h1> on this template uses the larger .txt-mercury font-size.