Components

Activity (activity)

A variation of the columns component with a parent container

Recent activities in the Web Payments community

The mission of the Web Payments Working Group is to make payments easier and more secure on the Web.
<div class="component component--activity u-full-width"> <div class="l-center"> <div class="component--columns--images component component--columns"> <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"> <div class="card__text"> <h3 class="card__heading"> <a href="path/to/page">W3C starts web payments standards work</a></h3> <p>New working group launched to make payments easier and more secure.</p> </div> <div class="l-frame l-frame--3-2 card__image"> <img src="https://design-system.w3.org/dist/assets/images/temp-developers-700.jpg" /></div> </div></li><li> <div class="card"> <div class="card__text"> <h3 class="card__heading"> <a href="path/to/page">Work begins on extensions to WCAG 2.0</a></h3> <p>A new charter for the Working Group was formally approved by W3C.</p> </div> <div class="l-frame l-frame--3-2 card__image"> <img src="https://design-system.w3.org/dist/assets/images/temp-developers-700.jpg" /></div> </div></li> </ul> </div> </div> </div>

Avatar (avatar)

Apply a circular mask to the image
<div class="avatar"> <img loading="lazy" src="https://www.w3.org/thumbnails/200/avatar-images/7mtpjeh4in8kw04ksso8ss4ocsksswo.webp" /> </div> <div class="avatar--med avatar"> <img loading="lazy" src="https://www.w3.org/thumbnails/200/avatar-images/7mtpjeh4in8kw04ksso8ss4ocsksswo.webp" /> </div> <div class="avatar--small avatar"> <img loading="lazy" src="https://www.w3.org/thumbnails/200/avatar-images/7mtpjeh4in8kw04ksso8ss4ocsksswo.webp" /> </div>

Button (button)

Text link Text link Text link
<a class="button" href="#1"> Text link </a> <a class="button--alt button" href="#1"> Text link </a> <a class="button--ghost button" href="#1"> Text link </a>

Card (card)

Cards are used in multiple places.

W3C starts web payments standards work

New working group launched to make payments easier and more secure.

W3C starts web payments standards workLearn more
A Macbook screen with code, as seen from over the developer's shoulder

W3C starts web payments standards work

New working group launched to make payments easier and more secure.

W3C starts web payments standards workLearn more
A Macbook screen with code, as seen from over the developer's shoulder

W3C starts web payments standards work

New working group launched to make payments easier and more secure.

W3C starts web payments standards workLearn more
A Macbook screen with code, as seen from over the developer's shoulder

W3C starts web payments standards work

New working group launched to make payments easier and more secure.

W3C starts web payments standards workLearn more
A Macbook screen with code, as seen from over the developer's shoulder

W3C starts web payments standards work

New working group launched to make payments easier and more secure.

W3C starts web payments standards workLearn more
A Macbook screen with code, as seen from over the developer's shoulder
<div class="card"> <div class="card__text"> <h3 class="card__heading">W3C starts web payments standards work</h3> <p>New working group launched to make payments easier and more secure.</p> <a href="path/to/page"> <span class="visuallyhidden">W3C starts web payments standards work</span>Learn more</a> </div> <div class="l-frame l-frame--3-2 card__image"> <img alt="A Macbook screen with code, as seen from over the developer's shoulder" loading="lazy" src="https://data.dilla.io/w3c_1/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" /></div> </div> <div class="card--event card"> <div class="card__text"> <h3 class="card__heading">W3C starts web payments standards work</h3> <p>New working group launched to make payments easier and more secure.</p> <a href="path/to/page"> <span class="visuallyhidden">W3C starts web payments standards work</span>Learn more</a> </div> <div class="l-frame l-frame--3-2 card__image"> <img alt="A Macbook screen with code, as seen from over the developer's shoulder" loading="lazy" src="https://data.dilla.io/w3c_1/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" /></div> </div> <div class="card--member card"> <div class="card__text"> <h3 class="card__heading">W3C starts web payments standards work</h3> <p>New working group launched to make payments easier and more secure.</p> <a href="path/to/page"> <span class="visuallyhidden">W3C starts web payments standards work</span>Learn more</a> </div> <div class="l-frame l-frame--3-2 card__image"> <img alt="A Macbook screen with code, as seen from over the developer's shoulder" loading="lazy" src="https://data.dilla.io/w3c_1/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" /></div> </div> <div class="card--news card"> <div class="card__text"> <h3 class="card__heading">W3C starts web payments standards work</h3> <p>New working group launched to make payments easier and more secure.</p> <a href="path/to/page"> <span class="visuallyhidden">W3C starts web payments standards work</span>Learn more</a> </div> <div class="l-frame l-frame--3-2 card__image"> <img alt="A Macbook screen with code, as seen from over the developer's shoulder" loading="lazy" src="https://data.dilla.io/w3c_1/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" /></div> </div> <div class="card--group card"> <div class="card__text"> <h3 class="card__heading">W3C starts web payments standards work</h3> <p>New working group launched to make payments easier and more secure.</p> <a href="path/to/page"> <span class="visuallyhidden">W3C starts web payments standards work</span>Learn more</a> </div> <div class="l-frame l-frame--3-2 card__image"> <img alt="A Macbook screen with code, as seen from over the developer's shoulder" loading="lazy" src="https://data.dilla.io/w3c_1/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" /></div> </div>

Columns (columns)

Columns are used to gather groups of cards into listings.

Section heading for these teasers

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Section heading for these teasers

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Section heading for these teasers

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="component component--columns"> <div class="component--columns__intro"> <h2>Section heading for these teasers</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></div> <ul class="clean-list" role="presentation"> <li>[Card markup...]</li><li>[Card markup...]</li><li>[Card markup...]</li> </ul> </div> <div class="component--columns--images component component--columns"> <div class="component--columns__intro"> <h2>Section heading for these teasers</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></div> <ul class="clean-list" role="presentation"> <li>[Card markup...]</li><li>[Card markup...]</li><li>[Card markup...]</li> </ul> </div> <div class="component--columns--icons component component--columns"> <div class="component--columns__intro"> <h2>Section heading for these teasers</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></div> <ul class="clean-list" role="presentation"> <li>[Card markup...]</li><li>[Card markup...]</li><li>[Card markup...]</li> </ul> </div>

A variation of the columns component, which a specific container.

Evangelist (evangelist)

Joseph Lorem-Ipsum

W3 editor

Tel: 49 157 0156

Email: name@w3c.org
<div class="l-sidebar"> <div> <div class="sidebar"> <div class="avatar"> <img loading="lazy" src="https://www.w3.org/thumbnails/200/avatar-images/7mtpjeh4in8kw04ksso8ss4ocsksswo.webp" /></div> </div> <div class="not-sidebar"> <p class="txt-saturn bold">Joseph Lorem-Ipsum</p> <p>W3 editor</p> <p>Tel: <a href="tel:+49.157.0156">49 157 0156</a></p> <p>Email: <a href="mailto:name@w3c.org">name@w3c.org</a></p> </div> </div> </div>

Evangelists (evangelists)

Need more information tailored to your organisation?

Our Evangelists understand that every organisation is different! They represent W3C in various locations and are an extension of W3C's Business Development Team. They are responsible for identifying and recruiting new W3C Members, running local events, promoting W3C Training and fostering Sponsorship.
<div class="component component--evangelists"> <div class="component--evangelists__text"> <h2 class="txt-earth">Need more information tailored to your organisation?</h2> <p>Our Evangelists understand that every organisation is different! They represent W3C in various locations and are an extension of W3C&#x27;s Business Development Team. They are responsible for identifying and recruiting new W3C Members, running local events, promoting W3C Training and fostering Sponsorship.</p> </div> </div>

Hero (hero)

Hero title

A very short introduction/summary of the page.

Hero title

A very short introduction/summary of the page.
<div class="hero u-full-width"> <div class="l-center"> <div class="l-sidebar"> <div> <div class="not-sidebar"> <h1>Hero title</h1> <p class="lead">A very short introduction&#x2f;summary of the page.</p> </div> <div class="sidebar"> <img src="https://www.w3.org/thumbnails/200/avatar-images/7mtpjeh4in8kw04ksso8ss4ocsksswo.webp" /></div> </div> </div> </div> </div> <div class="hero--listing hero u-full-width"> <div class="l-center"> <div class="l-sidebar"> <div> <div class="not-sidebar"> <h1>Hero title</h1> <p class="lead">A very short introduction&#x2f;summary of the page.</p> </div> <div class="sidebar"> <img src="https://www.w3.org/thumbnails/200/avatar-images/7mtpjeh4in8kw04ksso8ss4ocsksswo.webp" /></div> </div> </div> </div> </div>

Icon (icon)

Beta Beta
<img alt="Beta" class="icon" role="img" src="https://design-system.w3.org/dist/assets/svg/beta.svg" /> <img alt="Beta" class="icon--larger icon" role="img" src="https://design-system.w3.org/dist/assets/svg/beta.svg" />

Members (members)

For displaying a grid of member logos, and linking to the members area of the website.

W3C Members

20 member organizations are involved in the web payment ecosystem, including:

Name of company
Name of company
Name of company
Name of company
Name of company
Name of company
View all members of the web payment ecosystem
Ways to get involved: Join Donate
<div class="component component--members u-full-width"> <div class="l-center"> <h2 class="visuallyhidden">W3C Members</h2> <p>20 member organizations are involved in the web payment ecosystem, including:</p> <div class="component--members__grid"> <figure> <div class="l-box l-box--no-border"> <img alt="Name of company" loading="lazy" src="https://design-system.w3.org/dist/assets/svg/placeholder-logo.svg" /></div> </figure> <figure> <div class="l-box l-box--no-border"> <img alt="Name of company" loading="lazy" src="https://design-system.w3.org/dist/assets/svg/placeholder-logo.svg" /></div> </figure> <figure> <div class="l-box l-box--no-border"> <img alt="Name of company" loading="lazy" src="https://design-system.w3.org/dist/assets/svg/placeholder-logo.svg" /></div> </figure> <figure> <div class="l-box l-box--no-border"> <img alt="Name of company" loading="lazy" src="https://design-system.w3.org/dist/assets/svg/placeholder-logo.svg" /></div> </figure> <figure> <div class="l-box l-box--no-border"> <img alt="Name of company" loading="lazy" src="https://design-system.w3.org/dist/assets/svg/placeholder-logo.svg" /></div> </figure> <figure> <div class="l-box l-box--no-border"> <img alt="Name of company" loading="lazy" src="https://design-system.w3.org/dist/assets/svg/placeholder-logo.svg" /></div> </figure> </div> <a href="path/to/page">View all members of the web payment ecosystem</a> <div class="l-cluster component--members__cta"> <div> Ways to get involved: <a class="button--alt button" href="path/to/page"> Join </a> <a class="button--alt button" href="path/to/page"> Donate </a> </div> </div> </div> </div>

Quote (quote)

The goal of the Web is to serve humanity. We build it now so that those who come to it later will be able to create things we cannot ourselves imagine.

Sir Tim Berners-Lee
<figure class="component component--quote"> <blockquote> <p>The goal of the Web is to serve humanity. We build it now so that those who come to it later will be able to create things we cannot ourselves imagine.</p> </blockquote> <figcaption>Sir Tim Berners-Lee</figcaption> </figure>

Slide (slide)

The School of Informatics at the University of Edinburgh is a world leader in research and teaching in Computer Science, Artificial Intelligence and Cognitive Science.

W3C technologies are both used and studied here, and we are proud to contribute to their development."

Dierdre De Veloper

Lead Dev
<figure class="slide"> <blockquote class="slide__quote"> <p> <p>The School of Informatics at the University of Edinburgh is a world leader in research and teaching in Computer Science, Artificial Intelligence and Cognitive Science.</p> <p>W3C technologies are both used and studied here, and we are proud to contribute to their development.&quot;</p></p> </blockquote> <figcaption class="slide__cite l-sidebar"> <div> <div class="sidebar"> <div class="slide__logo"> <img alt="The University of Edinburgh" loading="lazy" src="https://design-system.w3.org/dist/assets/images/edinburgh-uni.png" /></div> </div> <div class="not-sidebar"> <p>Dierdre De Veloper</p> <p>Lead Dev</p></div> </div> </figcaption> </figure>

Slider (slider)

What organizations think about us
<div class="component component--slider u-full-width" data-component="slider"> <div class="l-center"> <h2 id="slider-title">What organizations think about us</h2> <section aria-labelledby="slider-title"> <ul class="clean-list" role="presentation"> <li> <figure class="slide"> <blockquote class="slide__quote"> <p> <p>The School of Informatics at the University of Edinburgh is a world leader in research and teaching in Computer Science, Artificial Intelligence and Cognitive Science.</p> <p>W3C technologies are both used and studied here, and we are proud to contribute to their development.</p></p> </blockquote> <figcaption class="slide__cite l-sidebar"> <div> <div class="sidebar"> <div class="slide__logo"> <img alt="The University of Edinburgh" loading="lazy" src="https://design-system.w3.org/dist/assets/images/edinburgh-uni.png" /></div> </div> <div class="not-sidebar"> <p>Dierdre De Veloper</p> <p>Lead Dev</p></div> </div> </figcaption> </figure></li><li> <figure class="slide"> <blockquote class="slide__quote"> <p> <p>Google LLC is an American multinational technology company that specializes in Internet-related services and products, which include online advertising technologies, a search engine, cloud computing, software, and hardware.</p></p> </blockquote> <figcaption class="slide__cite l-sidebar"> <div> <div class="sidebar"> <div class="slide__logo"> <img loading="lazy" src="https://design-system.w3.org/dist/assets/images/google.png" /></div> </div> <div class="not-sidebar"> <p>Ann Other-Developer</p> <p>Lead Dev</p></div> </div> </figcaption> </figure></li><li> <figure class="slide"> <blockquote class="slide__quote"> <p> <p>Amazon.com, Inc. is an American multinational technology company based in Seattle, Washington, which focuses on e-commerce, cloud computing, digital streaming, and artificial intelligence.</p></p> </blockquote> <figcaption class="slide__cite l-sidebar"> <div> <div class="sidebar"> <div class="slide__logo"> <img loading="lazy" src="https://design-system.w3.org/dist/assets/images/amazon.png" /></div> </div> <div class="not-sidebar"> <p>Joe Bloggs</p> <p>Lead Dev</p></div> </div> </figcaption> </figure></li> </ul> </section> </div> </div>