Figure (figure)

Used to display a piece of self-contained content (illustrations, diagrams, photos, code, etc) along with an optional caption. This content can be removed from the document without affecting the meaning of the document.

🔗 External documentation.

                        type: object
patternProperties:
    .+:
        anyOf:
            -
                type:
                    - string
                    - number
            -
                type: array
                items:
                    type:
                        - string
                        - number

                      

            id: figure
label: Figure
description: 'Used to display a piece of self-contained content (illustrations, diagrams, photos, code, etc) along with an optional caption. This content can be removed from the document without affecting the meaning of the document.'
homepage: 'https://getbootstrap.com/docs/5.3/content/figures/'
slots:
    image:
        id: image
        label: Image
        description: 'The content of the figure.'
    caption:
        id: caption
        label: Caption
        description: 'The caption that appears under the content.'
props:
    figcaption_attributes:
        id: figcaption_attributes
        label: 'Figcaption attributes'
        description: 'The attributes to customize the figcaption tag.'
        schema:
            type: object
            patternProperties:
                .+:
                    anyOf:
                        -
                            type:
                                - string
                                - number
                        -
                            type: array
                            items:
                                type:
                                    - string
                                    - number
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': figure
            image:
                '@element': img
                src: 'data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZm9udC1zaXplOiAxLjEyNXJlbTsgdGV4dC1hbmNob3I6IG1pZGRsZTsgdXNlci1zZWxlY3Q6IG5vbmU7IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyNTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiIGZvY3VzYWJsZT0iZmFsc2UiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iUGxhY2Vob2xkZXI6IEltYWdlIGNhcCI+PHRpdGxlPlBsYWNlaG9sZGVyPC90aXRsZT48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjODY4ZTk2Ij48L3JlY3Q+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiNkZWUyZTYiIGR5PSIuM2VtIj5JbWFnZSBjYXA8L3RleHQ+PC9zdmc+Cg=='
                alt: '© 2017 John Smith photography'
            caption: 'A caption for the above image.'
            figcaption_attributes:
                class: text-end