Skip to content
Design System
  • Home
  • Settings
  • Styles
  • Layouts
  • Components
  • Scripts
  • Templates
  • Access control banner
  • Activity
  • Archived content
  • Breadcrumbs
  • Cards
  • Collapsible containers
  • Columns
  • Content slider (carousel)
  • Crosslinks (You may also like)
  • Disclosure button
  • Evangelists
  • Fifty-fifty
  • Footer
  • Group list
  • Header
  • Hero
  • Image component
  • Members
  • Navigation
  • Navigation with new logo v1
  • Navigation with new logo v2
  • Notes
  • Pagination
  • Pre-footer
  • Quote component
  • RSS
  • Table of contents
  • Tag list
  • Text component
  • Translations
  • Video component

Crosslinks (You may also like)

A variation of the columns component, which has a parent container with the class .crosslinks. This is used on the default and landing page templates.

Open this Crosslinks in a new tab

HTML:

<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>

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

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