Card (card)

Cards contain content and actions about a single subject.

🔗 External documentation.

                        type: boolean

                      

                        type: boolean

                      

                        type: boolean

                      

                        type: integer
enum:
    - 2
    - 3
    - 4
    - 5
    - 6

                      

                        type: boolean

                      

                        type: boolean

                      

                        type: boolean

                      

                        type: boolean

                      

            id: card
label: Card
description: 'Cards contain content and actions about a single subject.'
group: Card
homepage: 'https://designsystem.digital.gov/components/card/'
variants:
    default:
        id: default
        label: Default
    flag:
        id: flag
        label: flag
slots:
    header:
        id: header
        label: Header
        description: 'Card header.'
    image:
        id: image
        label: Image
        description: 'Card image.'
    content:
        id: content
        label: Content
        description: 'Card body.'
    footer:
        id: footer
        label: Footer
        description: 'Card footer.'
    footer_url:
        id: footer_url
        label: 'Footer URL'
        description: 'Card footer URL.'
props:
    list:
        id: list
        label: List
        description: 'Is this card part of a group of cards'
        schema:
            type: boolean
    header_first:
        id: header_first
        label: 'Header First'
        description: 'Displays the header element before the media element.'
        schema:
            type: boolean
    header_exdent:
        id: header_exdent
        label: 'Header Exdent'
        description: 'Extends the header element out over the card border. Useful for light-bordered cards.'
        schema:
            type: boolean
    heading_level:
        id: heading_level
        label: 'Heading level'
        schema:
            type: integer
            enum:
                - 2
                - 3
                - 4
                - 5
                - 6
    media_inset:
        id: media_inset
        label: 'Media Inset'
        description: 'Indents the media element so it doesn’t extend to the edge of the card.'
        schema:
            type: boolean
    media_exdent:
        id: media_exdent
        label: 'Media Exdent'
        description: 'Extends the media element out over the card border. Useful for light-bordered cards.'
        schema:
            type: boolean
    body_exdent:
        id: body_exdent
        label: 'Body Exdent'
        description: 'Extends the body element out over the card border. Useful for light-bordered cards.'
        schema:
            type: boolean
    footer_exdent:
        id: footer_exdent
        label: 'Footer Exdent'
        description: 'Extends the footer element out over the card border. Useful for light-bordered cards.'
        schema:
            type: boolean
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': card
            header: Featured
            image:
                '@element': img
                src: 'data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAxLjEyNXJlbTsgdGV4dC1hbmNob3I6IG1pZGRsZTsgdXNlci1zZWxlY3Q6IG5vbmU7IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyNTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEltYWdlIGNhcCI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjODY4ZTk2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiNkZWUyZTYiIGR5PSIuM2VtIj5JbWFnZSBjYXA8L3RleHQ+PC9zdmc+Cg=='
                alt: '© 2017 John Smith photography'
            content:
                -
                    '@template': '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p>'
            footer: 'Visit Florida Keys'
            footer_url: '#'
            header_exdent: true
            heading_level: 2
            media_exdent: true
            body_exdent: true