Members (members)

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

🔗 External documentation.

ID Label Description Schema
title Title Visually hidden
intro Introduction
members Members A list of image elements
link Link A link element
ctas CTAs A list of button elements 
            id: members
label: Members
description: 'For displaying a grid of member logos, and linking to the members area of the website.'
homepage: 'https://design-system.w3.org/components/members.html'
slots:
    title:
        id: title
        label: Title
        description: 'Visually hidden'
    intro:
        id: intro
        label: Introduction
    members:
        id: members
        label: Members
        description: 'A list of image elements'
    link:
        id: link
        label: Link
        description: 'A link element'
    ctas:
        id: ctas
        label: CTAs
        description: 'A list of button elements'
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': members
            title: 'W3C Members'
            intro:
                '@element': p
                '@content': '20 member organizations are involved in the web payment ecosystem, including:'
            members:
                -
                    '@element': img
                    src: 'https://design-system.w3.org/dist/assets/svg/placeholder-logo.svg'
                    alt: 'Name of company'
                -
                    '@element': img
                    src: 'https://design-system.w3.org/dist/assets/svg/placeholder-logo.svg'
                    alt: 'Name of company'
                -
                    '@element': img
                    src: 'https://design-system.w3.org/dist/assets/svg/placeholder-logo.svg'
                    alt: 'Name of company'
                -
                    '@element': img
                    src: 'https://design-system.w3.org/dist/assets/svg/placeholder-logo.svg'
                    alt: 'Name of company'
                -
                    '@element': img
                    src: 'https://design-system.w3.org/dist/assets/svg/placeholder-logo.svg'
                    alt: 'Name of company'
                -
                    '@element': img
                    src: 'https://design-system.w3.org/dist/assets/svg/placeholder-logo.svg'
                    alt: 'Name of company'
            link:
                '@element': a
                '@content': 'View all members of the web payment ecosystem'
                href: path/to/page
            ctas:
                -
                    '@component': button
                    '@variant': alt
                    label: Join
                    url: path/to/page
                -
                    '@component': button
                    '@variant': alt
                    label: Donate
                    url: path/to/page

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>