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>