Card (card)

Cards are used in multiple places.

🔗 External documentation.

                        type: string
enum:
    - 3-2
    - 16-9

                      

            id: card
label: Card
description: 'Cards are used in multiple places.'
homepage: 'https://design-system.w3.org/components/cards.html'
variants:
    default:
        id: default
        label: Default
    event:
        id: event
        label: Event
    member:
        id: member
        label: Member
    news:
        id: news
        label: News
    group:
        id: group
        label: Group
slots:
    heading:
        id: heading
        label: Heading
    text:
        id: text
        label: Text
    icon:
        id: icon
        label: Icon
    image:
        id: image
        label: Image
        description: 'An image element'
props:
    image_frame:
        id: image_frame
        label: 'Image frame'
        schema:
            type: string
            enum:
                - 3-2
                - 16-9
examples:
    simple_with_icon:
        id: simple_with_icon
        label: 'Simple with icon'
        renderable:
            '@component': card
            heading: 'Web Design and Applications'
            text:
                -
                    '@element': p
                    '@content': 'The standards for building and Rendering Web pages, including HTML, CSS, SVG, Ajax, and other technologies for Web Applications (“WebApps”). Includes information on how to make pages accessible (WCAG), to internationalize them, and make them work on mobile devices.'
                -
                    '@element': a
                    '@content':
                        -
                            '@element': span
                            '@content': 'Web Design and Applications'
                            class:
                                - visuallyhidden
                        - 'Learn more'
                    href: path/to/page
            icon:
                '@component': icon
                '@variant': larger
    simple_with_image:
        id: simple_with_image
        label: 'Simple with image'
        renderable:
            '@component': card
            heading: 'W3C starts web payments standards work'
            text:
                -
                    '@element': p
                    '@content': 'New working group launched to make payments easier and more secure.'
                -
                    '@element': a
                    '@content':
                        -
                            '@element': span
                            '@content': 'W3C starts web payments standards work'
                            class:
                                - visuallyhidden
                        - 'Learn more'
                    href: path/to/page
            image:
                '@element': img
                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'
                loading: lazy
                alt: "A Macbook screen with code, as seen from over the developer's shoulder"