Business ecosystem template
An example of the business ecosystem page template. This example does not include:
- the complete global navigation
- the complete list of site links for the footer.
Open this Business ecosystem 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>Business ecosystem template - W3C Design System</title>
<meta property="og:description" name="description" content="Business ecosystem 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="ecosystem">
<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="u-full-width hero">
<div class="l-center">
<div class="l-sidebar">
<div>
<div class="not-sidebar">
<h1>Hero title</h1>
<p class="lead">A very short introduction/summary of the page.</p>
</div>
<div class="sidebar">
<img src="/dist/assets/svg/illustration-2.svg" alt />
</div>
</div>
</div>
</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>
<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>
<section class="component component--fifty-fifty reversed">
<div class="image">
<div class="l-frame">
<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-700.jpg 700w, /dist/assets/images/temp-developers-1520.jpg 1520w"
sizes="(min-width: 48em) 50vw, 100vw"
loading="lazy"
alt="A Macbook screen with code, as seen from over the developer's shoulder" />
</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">Here's an optional link</a>
<a href="path/to/page">A unique and descriptive link</a>
</div>
</div>
</section>
<div class="u-full-width component component--group-list" data-anchor="no">
<div class="l-center">
<div class="component--group-list__intro">
<h2>Active groups</h2>
<p>Some introductory text to the listing of active groups that follows.</p>
</div>
<div class="component--collapsibles" data-component="collapsibles">
<div>
<h3 data-heading="collapsibles">AI KR (Artificial Intelligence Knowledge Representation) <span>Community group</span></h3>
<div>
<p>The overall goal/mission of this community group is to explore the requirements, best practices and implementation options for the conceptualization and specification of domain knowledge in AI.</p>
<a href="path/to/page">Visit the AI KR Community Group</a>
</div>
</div>
<div>
<h3 data-heading="collapsibles">Web Payment Security <span>Interest group</span></h3>
<div>
<p>A brief description of what this group does.</p>
<a href="path/to/page">Visit the Web Payment Security Interest Group</a>
</div>
</div>
<div>
<h3 data-heading="collapsibles">Publishing <span>Business group</span></h3>
<div>
<p>The Publishing Business Group fosters ongoing participation by members of the publishing industry and overall publishing ecosystem in the development of the Web for publishing, and serves as a conduit for feedback between the publishing ecosystem and W3C.</p>
<a href="path/to/page">Visit the Publishing Business Group</a>
</div>
</div>
<div>
<h3 data-heading="collapsibles">Accessibility Education and Outreach Working Group (EOWG) <span>Working group</span></h3>
<div>
<p>The mission of the Accessibility Education and Outreach Working Group is to develop strategies and resources to promote awareness, understanding, implementation, and conformance testing for W3C accessibility standards; and to support the accessibility work of other W3C Groups.</p>
<a href="path/to/page">Visit the Accessibility Education and Outreach Working Group</a>
</div>
</div>
</div>
</div>
</div>
<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 class="component component--activity u-full-width">
<div class="l-center">
<div class="component component--columns component--columns--images">
<h2 class="txt-earth">Recent activities in the Web Payments community</h2>
<p>The mission of the Web Payments Working Group is to make payments easier and more secure on the Web.</p>
<ul class="clean-list" role="presentation">
<li>
<div class="card card--news" 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 card--news" 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 card--event workshop" data-component="card" data-anchor="no">
<div class="card__text">
<h3 class="card__heading"><a href="path/to/page" class="card__link">How do you want to pay?</a></h3>
<p class="txt-pluto with-icon--before"><img class="icon" src="/dist/assets/svg/calendar.svg" width="15" height="15" alt aria-hidden="true" /> <time datetime="2020-11-15">15 November 2020</time></p>
<p class="txt-pluto">Workshop</p>
</div>
</div>
</li>
<li>
<div class="card card--event talk" data-component="card" data-anchor="no">
<div class="card__text">
<h3 class="card__heading"><a href="path/to/page" class="card__link">Cognitive AI - mimicking how we think</a></h3>
<p class="txt-pluto with-icon--before"><img class="icon" src="/dist/assets/svg/calendar.svg" width="15" height="15" alt aria-hidden="true" /> <time datetime="2020-12-20">20 December 2020</time></p>
<p class="txt-pluto">Talk</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="component component--slider u-full-width" data-component="slider">
<div class="l-center">
<h2 id="slider-title">What organizations think about us</h2>
<section aria-labelledby="slider-title">
<ul class="clean-list" role="presentation">
<li>
<figure class="slide">
<blockquote class="slide__quote">
<p>The School of Informatics at the University of Edinburgh is a world leader in research and teaching in Computer Science, Artificial Intelligence and Cognitive Science.</p>
<p>W3C technologies are both used and studied here, and we are proud to contribute to their development.</p>
</blockquote>
<figcaption class="slide__cite l-sidebar">
<div>
<div class="sidebar">
<div class="slide__logo">
<img src="/dist/assets/images/edinburgh-uni.png" alt="The University of Edinburgh" loading="lazy" />
</div>
</div>
<div class="not-sidebar">
<p>Dierdre De Veloper</p>
<p>Lead Dev</p>
</div>
</div>
</figcaption>
</figure>
</li>
<li>
<figure class="slide">
<blockquote class="slide__quote">
<p>Google LLC is an American multinational technology company that specializes in Internet-related services and products, which include online advertising technologies, a search engine, cloud computing, software, and hardware.</p>
</blockquote>
<figcaption class="slide__cite l-sidebar">
<div>
<div class="sidebar">
<div class="slide__logo">
<img src="/dist/assets/images/google.png" alt="Google" loading="lazy" />
</div>
</div>
<div class="not-sidebar">
<p>Ann Other-Developer</p>
<p>Lead Dev</p>
</div>
</div>
</figcaption>
</figure>
</li>
<li>
<figure class="slide">
<blockquote class="slide__quote">
<p>Amazon.com, Inc. is an American multinational technology company based in Seattle, Washington, which focuses on e-commerce, cloud computing, digital streaming, and artificial intelligence.</p>
</blockquote>
<figcaption class="slide__cite l-sidebar">
<div>
<div class="sidebar">
<div class="slide__logo">
<img src="/dist/assets/images/amazon.png" alt="Amazon" loading="lazy" />
</div>
</div>
<div class="not-sidebar">
<p>Joe Bloggs</p>
<p>Lead Dev</p>
</div>
</div>
</figcaption>
</figure>
</li>
</ul>
</section>
</div>
</div>
<div class="component component--members u-full-width" data-anchor="no">
<div class="l-center">
<h2 class="visuallyhidden">W3C Members</h2>
<p>20 member organizations are involved in the web payment ecosystem, including:</p>
<div class="component--members__grid">
<figure>
<div class="l-box l-box--no-border">
<img src="/dist/assets/svg/placeholder-logo.svg" alt="Name of company" loading="lazy">
</div>
</figure>
<figure>
<div class="l-box l-box--no-border">
<img src="/dist/assets/svg/placeholder-logo.svg" alt="Name of company" loading="lazy">
</div>
</figure>
<figure>
<div class="l-box l-box--no-border">
<img src="/dist/assets/svg/placeholder-logo.svg" alt="Name of company" loading="lazy">
</div>
</figure>
<figure>
<div class="l-box l-box--no-border">
<img src="/dist/assets/svg/placeholder-logo.svg" alt="Name of company" loading="lazy">
</div>
</figure>
<figure>
<div class="l-box l-box--no-border">
<img src="/dist/assets/svg/placeholder-logo.svg" alt="Name of company" loading="lazy">
</div>
</figure>
<figure>
<div class="l-box l-box--no-border">
<img src="/dist/assets/svg/placeholder-logo.svg" alt="Name of company" loading="lazy">
</div>
</figure>
</div>
<a href="path/to/page">View all members of the web payment ecosystem</a>
<div class="l-cluster component--members__cta">
<div>
<p>Ways to get involved:</p>
<a class="button button--alt" href="path/to/page">Join</a>
<a class="button button--alt" href="path/to/page">Donate</a>
</div>
</div>
</div>
</div>
<div class="component component--evangelists" data-anchor="no">
<div class="component--evangelists__text">
<h2 class="txt-earth">Need more information tailored to your organisation?</h2>
<p>Our Evangelists understand that every organisation is different! They represent W3C in various locations and are an extension of W3C's Business Development Team. They are responsible for identifying and recruiting new W3C Members, running local events, promoting W3C Training and fostering Sponsorship.</p>
</div>
<div class="component--evangelists__list">
<h3 class="txt-saturn">Our Web Payments Evangelists</h3>
<ul class="clean-list" role="list">
<li class="l-box l-box--no-border">
<div class="l-sidebar">
<div>
<div class="sidebar">
<div class="avatar">
<img alt src="https://www.w3.org/thumbnails/200/avatar-images/7mtpjeh4in8kw04ksso8ss4ocsksswo.webp" loading="lazy">
</div>
</div>
<div class="not-sidebar">
<p class="txt-saturn bold">Joseph Lorem-Ipsum</p>
<p>W3C editor</p>
<p>Tel: <a href="tel:+1(555)5309">+1 (555) 5309</a></p>
<p>Email: <a href="mailto:name@w3c.org">name@w3c.org</a></p>
</div>
</div>
</div>
</li>
<li class="l-box l-box--no-border">
<div class="l-sidebar">
<div>
<div class="sidebar">
<div class="avatar">
<img alt src="https://www.w3.org/thumbnails/200/avatar-images/7mtpjeh4in8kw04ksso8ss4ocsksswo.webp" loading="lazy">
</div>
</div>
<div class="not-sidebar">
<p class="txt-saturn bold">Joseph Lorem-Ipsum</p>
<p>W3C editor</p>
<p>Tel: <a href="tel:+49.157.0156">+49 157 0156</a></p>
<p>Email: <a href="mailto:name@w3c.org">name@w3c.org</a></p>
</div>
</div>
</div>
</li>
</ul>
</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://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>
if (document.documentElement.classList.contains('js')) {
let sliderScript = document.createElement('script');
sliderScript.src = '/dist/assets/js/slider.js';
document.querySelector('body').appendChild(sliderScript);
}
</script>
<script src="/assets/design-system/js/libraries/iframe-resizer/iframeResizer.contentWindow.min.js"></script>
</body>
</html>
Considerations
Note the .ecosystem class applied to <body>. The <h1> on this template uses the larger .txt-mercury font-size.
If the carousel is being used, the following script must be added before the closing body tag </body>:
<script>
if (document.documentElement.classList.contains('js')) {
let sliderScript = document.createElement('script');
sliderScript.src = 'dist/assets/js/slider.js';
document.querySelector('body').appendChild(sliderScript);
}
</script>