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: integer
enum:
    - 2
    - 3
    - 4
    - 5
    - 6

                      

            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. '
homepage: 'https://getbootstrap.com/docs/4.6/components/card/'
variants:
    default:
        id: default
        label: Default
    overlay:
        id: overlay
        label: 'Image overlay'
    horizontal:
        id: horizontal
        label: Horizontal
slots:
    image:
        id: image
        label: Image
        description: 'Card image.'
    header:
        id: header
        label: Header
        description: 'Card header.'
    title:
        id: title
        label: Title
        description: 'Card title. Plain text.'
    subtitle:
        id: subtitle
        label: Subtitle
        description: 'Card subtitle. Plain text.'
    text:
        id: text
        label: Text
        description: 'Card text. Plain text.'
    body:
        id: body
        label: Body
        description: 'Card body.'
    links:
        id: links
        label: Links
        description: 'Array of link elements'
    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
    heading_level:
        id: heading_level
        label: 'Heading level'
        schema:
            type: integer
            enum:
                - 2
                - 3
                - 4
                - 5
                - 6
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': card
            image:
                '@element': img
                src: 'https://data.dilla.io/bootstrap_4/assets/card-image.svg'
                alt: '© 2017 John Smith photography'
            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.'
            body:
                '@component': button
                '@variant': primary
                label: 'Go somewhere'
            links:
                -
                    '@element': a
                    '@content': 'Card link'
                    href: '#'
                -
                    '@element': a
                    href: '#'
                    title: 'Another link'
            footer:
                '@element': span
                '@content': '2 days ago'
            image_position: top
            heading_level: 5