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">
            <div class="component--columns__intro">
                <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>
            </div>
            <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">
                        <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">
                        <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>