Activity
A variation of the columns component, which has a parent container with the class .component--activity
. This is used on the business ecosystem template.
Open this Activity component in a new tab
HTML:
<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>