Technical reports template
This example shows the minimum markup of the technical reports template. It does not include:
- the complete global navigation
- the optional translations component
- the complete list of site links for the footer.
Open this Technical reports 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>Technical reports landing template - W3C Design System</title>
<meta property="og:description" name="description" content="Technical reports landing 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="listing technical-reports">
<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 hero--listing">
<div class="l-center">
<h1>Technical reports</h1>
<p class="lead">W3C publishes a range of technical reports (Standards and supporting Notes) which help move the web forward.</p>
<div class="l-box l-box--no-border">
<form role="search" onsubmit="return false" novalidate>
<div class="field">
<div id="hint-search">Search for terms such as API, Internationalization, or WAI-ARIA</div>
<input type="search" name="filter-tr-name" id="filter-tr-name" aria-label="Search technical reports" aria-describedby="hint-search">
</div>
<p>Not sure where to start? Search for <a href="">Standards only</a>, <a href="">any reports in progress</a>, <a href="">everything tagged with Accessibility</a>, or <a href="">all reports</a>.</p>
<details>
<summary>Advanced filter options</summary>
<div class="field-group">
<h2 class="field-group__heading txt-mars">Filter by status</h2>
<div class="field">
<fieldset role="group" aria-describedby="hint-standards">
<legend class="group-legend">
Standards
</legend>
<div class="field-hint u-no-margin-top" id="hint-standards">W3C publishes Recommendations which are considered Web Standards. Standards are normative. They are endorsed by W3C and its Members. Learn about <a href="path/to/page">our Standards process</a>.</div>
<div class="checkbox-group--cluster">
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="draftstandards" appearance="base">
<label for="draftstandards">
<span class="field-label">Draft Standards (288)</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="candidatestandard" appearance="base">
<label for="candidatestandard">
<span class="field-label">Candidate Standards (62)</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="standard" appearance="base">
<label for="standard">
<span class="field-label">Standards (298)</span>
</label>
</div>
</div>
</fieldset>
</div>
<div class="field">
<fieldset role="group" aria-describedby="hint-notes">
<legend class="group-legend">
Supporting Notes
</legend>
<div class="field-hint u-no-margin-top" id="hint-notes">Notes are informative. They give you use cases, practices, and code examples.</div>
<div class="checkbox-group--cluster">
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="draftnote" appearance="base">
<label for="draftnote">
<span class="field-label">Draft Notes</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="notes" appearance="base">
<label for="notes">
<span class="field-label">Notes (369)</span>
</label>
</div>
</div>
</fieldset>
</div>
</div>
<div class="field-group">
<h2 class="field-group__heading txt-mars">Filter by tags</h2>
<div class="field">
<fieldset role="group" aria-describedby="hint-tags">
<legend class="group-legend">
Tags
</legend>
<div class="field-hint u-no-margin-top" id="hint-tags">Tags are broad groups of web technologies.</div>
<div class="checkbox-group--cluster">
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="accessibility" appearance="base">
<label for="accessibility">
<span class="field-label">Accessibility</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="css" appearance="base">
<label for="css">
<span class="field-label">CSS</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="data" appearance="base">
<label for="data">
<span class="field-label">Data</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="dom" appearance="base">
<label for="dom">
<span class="field-label">DOM</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="graphics" appearance="base">
<label for="graphics">
<span class="field-label">Graphics</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="html" appearance="base">
<label for="html">
<span class="field-label">HTML</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="http" appearance="base">
<label for="http">
<span class="field-label">HTTP</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="i18n" appearance="base">
<label for="i18n">
<span class="field-label">i18n</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="media" appearance="base">
<label for="media">
<span class="field-label">Media</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="performance" appearance="base">
<label for="performance">
<span class="field-label">Performance</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="privacy" appearance="base">
<label for="privacy">
<span class="field-label">Privacy</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="security" appearance="base">
<label for="security">
<span class="field-label">Security</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="webapi" appearance="base">
<label for="webapi">
<span class="field-label">Web API</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="wot" appearance="base">
<label for="wot">
<span class="field-label">WoT</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="xml" appearance="base">
<label for="xml">
<span class="field-label">XML</span>
</label>
</div>
</div>
</fieldset>
</div>
</div>
</details>
<div class="input-group">
<button class="button" type="submit">Show reports</button>
<a href="path/to/page">Clear all</a>
</div>
</form>
</div>
</div>
</div>
<div aria-live="polite" aria-atomic="true">Showing <strong>1017</strong>
reports across 281 families, filtered by Draft Standards, Candidate Standards, Standards, Draft Notes, Notes
</div>
<div class="tr-list">
<section class="family-grouping">
<h2>Family name</h2>
<div class="tr-list__item">
<div class="tr-list__item__header">
<h3>
<a href="https://www.w3.org/TR/2019/NOTE-wai-aria-practices-1.1-20190814/">WAI-ARIA Authoring Practices 1.1</a>
</h3>
<span class="maturity-level maturity-level--note">Note</span>
</div>
<div><time>14 August 2019</time></div>
<dl class="inline">
<div>
<dt>Tags</dt>
<dd>Accessibility</dd>
</div>
</dl>
</div>
<div class="tr-list__item">
<div class="tr-list__item__header">
<h3>
<a href="https://www.w3.org/TR/2019/WD-accname-1.2-20190711/">Accessible Name and Description Computation 1.2</a>
</h3>
<span class="maturity-level">Draft Standard</span>
</div>
<div><time>11 July 2019</time></div>
<dl class="inline">
<div>
<dt>Tags</dt>
<dd>Accessibility</dd>
</div>
<div>
<dt>Editors</dt>
<dd>Bryan Garaventa</dd>
<dd>Joanmarie Diggs</dd>
<dd>Michael Cooper</dd>
</div>
</dl>
</div>
<div class="tr-list__item">
<div class="tr-list__item__header">
<h3>
<a href="https://www.w3.org/TR/2014/REC-wai-aria-20140320/">Accessible Rich Internet Applications (WAI-ARIA) 1.0</a>
</h3>
<span class="maturity-level maturity-level--highlighted">Standard</span>
</div>
<div><time>20 March 2014</time></div>
<dl class="inline">
<div>
<dt>Tags</dt>
<dd>Accessibility</dd>
</div>
<div>
<dt>Editors</dt>
<dd>James Craig</dd>
<dd>Michael Cooper</dd>
</div>
<div class="translation-list">
<dt>Translations <span class="visuallyhidden">for Accessible Rich Internet Applications (WAI-ARIA) 1.0</span></dt>
<dd><a hreflang="ja" href="path/to/page"><span lang="ja">日本語</span></a></dd>
<dd><a hreflang="hu-HU" href="path/to/page"><span lang="hu-HU">Magyar</span></a></dd>
</div>
</dl>
</div>
</section>
</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 src="/assets/design-system/js/libraries/iframe-resizer/iframeResizer.contentWindow.min.js"></script>
</body>
</html>
Considerations
Note the .listing and .technical-reports classes applied to <body>.
Search
Filtering options for the hero
To help users we provide links directly to certain results, just below the search input. These results have been carefully selected based on user needs as well as illustrating how the search options work:
Open this Search options in a new tab
HTML:
<div class="u-full-width hero hero--listing">
<div class="l-center">
<h1>Technical reports</h1>
<p class="lead">W3C publishes a range of technical reports (Standards and supporting Notes) which help move the web forward.</p>
<div class="l-box l-box--no-border">
<form role="search" onsubmit="return false" novalidate>
<div class="field">
<div id="hint-search">Search for terms such as API, Internationalization, or WAI-ARIA</div>
<input type="search" name="filter-tr-name" id="filter-tr-name" aria-label="Search technical reports" aria-describedby="hint-search">
</div>
<p>Not sure where to start? Search for <a href="">Standards only</a>, <a href="">any reports in progress</a>, <a href="">everything tagged with Accessibility</a>, or <a href="">all reports</a>.</p>
<details>
<summary>Advanced filter options</summary>
<div class="field-group">
<h2 class="field-group__heading txt-mars">Filter by status</h2>
<div class="field">
<fieldset role="group" aria-describedby="hint-standards">
<legend class="group-legend">
Standards
</legend>
<div class="field-hint u-no-margin-top" id="hint-standards">W3C publishes Recommendations which are considered Web Standards. Standards are normative. They are endorsed by W3C and its Members. Learn about <a href="path/to/page">our Standards process</a>.</div>
<div class="checkbox-group--cluster">
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="draftstandards" appearance="base">
<label for="draftstandards">
<span class="field-label">Draft Standards (288)</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="candidatestandard" appearance="base">
<label for="candidatestandard">
<span class="field-label">Candidate Standards (62)</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="standard" appearance="base">
<label for="standard">
<span class="field-label">Standards (298)</span>
</label>
</div>
</div>
</fieldset>
</div>
<div class="field">
<fieldset role="group" aria-describedby="hint-notes">
<legend class="group-legend">
Supporting Notes
</legend>
<div class="field-hint u-no-margin-top" id="hint-notes">Notes are informative. They give you use cases, practices, and code examples.</div>
<div class="checkbox-group--cluster">
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="draftnote" appearance="base">
<label for="draftnote">
<span class="field-label">Draft Notes</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="notes" appearance="base">
<label for="notes">
<span class="field-label">Notes (369)</span>
</label>
</div>
</div>
</fieldset>
</div>
</div>
<div class="field-group">
<h2 class="field-group__heading txt-mars">Filter by tags</h2>
<div class="field">
<fieldset role="group" aria-describedby="hint-tags">
<legend class="group-legend">
Tags
</legend>
<div class="field-hint u-no-margin-top" id="hint-tags">Tags are broad groups of web technologies.</div>
<div class="checkbox-group--cluster">
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="accessibility" appearance="base">
<label for="accessibility">
<span class="field-label">Accessibility</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="css" appearance="base">
<label for="css">
<span class="field-label">CSS</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="data" appearance="base">
<label for="data">
<span class="field-label">Data</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="dom" appearance="base">
<label for="dom">
<span class="field-label">DOM</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="graphics" appearance="base">
<label for="graphics">
<span class="field-label">Graphics</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="html" appearance="base">
<label for="html">
<span class="field-label">HTML</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="http" appearance="base">
<label for="http">
<span class="field-label">HTTP</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="i18n" appearance="base">
<label for="i18n">
<span class="field-label">i18n</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="media" appearance="base">
<label for="media">
<span class="field-label">Media</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="performance" appearance="base">
<label for="performance">
<span class="field-label">Performance</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="privacy" appearance="base">
<label for="privacy">
<span class="field-label">Privacy</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="security" appearance="base">
<label for="security">
<span class="field-label">Security</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="webapi" appearance="base">
<label for="webapi">
<span class="field-label">Web API</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="wot" appearance="base">
<label for="wot">
<span class="field-label">WoT</span>
</label>
</div>
<div class="checkbox-item">
<input type="checkbox" name="filterByTagsOptions" id="xml" appearance="base">
<label for="xml">
<span class="field-label">XML</span>
</label>
</div>
</div>
</fieldset>
</div>
</div>
</details>
<div class="input-group">
<button class="button" type="submit">Show reports</button>
<a href="path/to/page">Clear all</a>
</div>
</form>
</div>
</div>
</div>
Technical report item
Content on a single report item
Note that report titles and their maturity status is contained by .tr-list__item__header class. This is so that we can use flex-box to change their visual order. Whenever you're changing the visual order, make sure the tab order remains predictable.
Maturity statuses are contained in span elements with the following class, .maturity-level. Additionally, we use the following classes to further qualify statuses:
- Standard: Add
.maturity-level--highlighted(previously: Recommendation) - All standards which are in progress: only
.maturity-level - Note: Add
.maturity-level--note
Standard
When Standards have translations, we link to them in the following way:
Open this A Standard report in a new tab
HTML:
<div class="tr-list">
<div class="tr-list__item">
<div class="tr-list__item__header">
<h3>
<a href="https://www.w3.org/TR/2014/REC-wai-aria-20140320/">Accessible Rich Internet Applications (WAI-ARIA) 1.0</a>
</h3>
<span class="maturity-level maturity-level--highlighted">Standard</span>
</div>
<div><time>20 March 2014</time></div>
<dl class="inline">
<div>
<dt>Tags</dt>
<dd>Accessibility</dd>
</div>
<div>
<dt>Editors</dt>
<dd>James Craig</dd>
<dd>Michael Cooper</dd>
</div>
<div class="translation-list">
<dt>Translations <span class="visuallyhidden">for Accessible Rich Internet Applications (WAI-ARIA) 1.0</span></dt>
<dd><a hreflang="ja" href="path/to/page"><span lang="ja">日本語</span></a></dd>
<dd><a hreflang="hu-HU" href="path/to/page"><span lang="hu-HU">Magyar</span></a></dd>
</div>
</dl>
</div>
</div>
A note about Notes
For Notes we don't show their editors in the listing. This is to reduce the content and visual affordance for Notes.
Open this A Note report in a new tab
HTML:
<div class="tr-list">
<div class="tr-list__item">
<div class="tr-list__item__header">
<h3>
<a href="https://www.w3.org/TR/2021/NOTE-did-spec-registries-20210624/">DID
Specification Registries</a>
</h3>
<span class="maturity-level maturity-level--note">Note</span>
</div>
<div><time>24 June 2021</time></div>
<dl class="inline">
<div>
<dt>Tags</dt>
<dd>Privacy</dd>
<dd>Security</dd>
</div>
</dl>
</div>
</div>