Media Object (media)

Complex and repetitive components where some media is positioned alongside content that doesn’t wrap around said media.

🔗 External documentation.

                        type: string
format: uri-reference

                      

                        type: string
enum:
    - before
    - after

                      

                        type: integer
enum:
    1: 1
    2: 2
    3: 3

                      

            id: media
label: 'Media Object'
description: 'Complex and repetitive components where some media is positioned alongside content that doesn’t wrap around said media. '
homepage: 'https://getbootstrap.com/docs/4.6/components/media-object/'
slots:
    body:
        id: body
        label: Body
        description: 'Media body'
props:
    image_url:
        id: image_url
        label: 'Image URL'
        schema:
            type: string
            format: uri-reference
    image_position:
        id: image_position
        label: 'Image position'
        schema:
            type: string
            enum:
                - before
                - after
    image_margin:
        id: image_margin
        label: 'Image margin'
        schema:
            type: integer
            enum:
                1: 1
                2: 2
                3: 3
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': media
            body:
                -
                    '@element': h5
                    '@content': 'Media heading'
                    '@styles':
                        - mt-0
                -
                    '@element': span
                    '@content': 'Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.'
            image_url: 'https://bulma.io/images/placeholders/64x64.png'
            image_position: before
            image_margin: 3