Card (card)

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

🔗 External documentation.

                        type: string
enum:
    - top
    - bottom

                      

                        type: string
default: col-md-4

                      

                        type: string
default: col-md-8

                      

            id: card
label: Card
description: 'A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.'
group: Card
homepage: 'https://getbootstrap.com/docs/5.3/components/card/'
variants:
    default:
        id: default
        label: Default
    horizontal:
        id: horizontal
        label: Horizontal
slots:
    image:
        id: image
        label: Image
        description: 'Card image.'
    header:
        id: header
        label: Header
        description: 'Card header.'
    content:
        id: content
        label: Content
        description: 'Card body.'
    footer:
        id: footer
        label: Footer
        description: 'Card footer.'
props:
    image_position:
        id: image_position
        label: 'Image position'
        description: 'Only for default variant.'
        schema:
            type: string
            enum:
                - top
                - bottom
    image_col_classes:
        id: image_col_classes
        label: 'Image column classes'
        description: 'Only for horizontal variant. Default value: col-md-4'
        schema:
            type: string
            default: col-md-4
    content_col_classes:
        id: content_col_classes
        label: 'Content column classes'
        description: 'Only for horizontal variant. Default value: col-md-8'
        schema:
            type: string
            default: col-md-8
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': card
            image:
                '@element': img
                src: 'data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAxLjEyNXJlbTsgdGV4dC1hbmNob3I6IG1pZGRsZTsgdXNlci1zZWxlY3Q6IG5vbmU7IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyNTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEltYWdlIGNhcCI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjODY4ZTk2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiNkZWUyZTYiIGR5PSIuM2VtIj5JbWFnZSBjYXA8L3RleHQ+PC9zdmc+Cg=='
                alt: '© 2017 John Smith photography'
            header: Featured
            content:
                -
                    '@component': card_body
                    '@variant': body
                    title: 'Card title'
                    subtitle: 'Card subtitle'
                    text: 'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.'
                    content:
                        '@component': button
                        '@variant': primary
                        label: 'Go somewhere'
                    links:
                        -
                            '@element': a
                            '@content': 'Card link'
                            href: '#'
                        -
                            '@element': a
                            '@content': 'Another link'
                            href: '#'
            footer:
                '@element': span
                '@content': '2 days ago'
            image_position: top
            image_col_classes: col-md-4
            content_col_classes: col-md-8