Skip to content
Design System
  • Home
  • Settings
  • Styles
  • Layouts
  • Components
  • Scripts
  • Templates
  • Basic page
  • Business ecosystem template
  • Default template
  • Event template
  • Home page template
  • Landing page template
  • Landing page with new logo v1
  • Landing page with new logo v2
  • Listing templates
  • Post template
  • Profile template
  • Technical reports template

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 &amp; Entertainment</a>
								</li>
								<li>
									<a href="path/to/page">Network &amp; 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 &amp; 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 &copy; 20XX <a href="https://www.w3.org/">World Wide Web	Consortium</a>.<br>
			<abbr title="World Wide Web Consortium">W3C</abbr><sup>&reg;</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.

Copyright © 2025 W3C - generated 10 Jan 2025, 12:43:28 UTC

Feedback is welcome and can be submitted as a GitHub issue.