Accordion Alerts / Banner Buttons Card Collection Combo box Forms Language Layout List Navigation Other Search Social Summary box

Media block (media_block)

Not found in the upstream documentation, but found in the USWDS examples.

ID Label Description Schema
image Image Expects a renderable image.
body Body 
            id: media_block
label: 'Media block'
description: 'Not found in the upstream documentation, but found in the USWDS examples.'
group: Layout
slots:
    image:
        id: image
        label: Image
        description: 'Expects a renderable image.'
    body:
        id: body
        label: Body
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': media_block
            image:
                '@element': img
                src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMaWdodCBCbHVlIENpcmNsZSIgdmlld2JveD0iMCAwIDEyNCAxMjQiIHdpZHRoPSIxMjQiIGhlaWdodD0iMTI0Ij48Y2lyY2xlIGlkPSJsaWdodF9ibHVlX2NpcmNsZSIgZmlsbD0iIzAwNzFiYyIgY3g9IjYyIiBjeT0iNjIiIHI9IjYyIi8+PC9zdmc+Cg=='
            body:
                -
                    '@element': h2
                    '@content': 'Graphic headings can vary.'
                -
                    '@element': p
                    '@content': 'Graphic headings can be used a few different ways, depending on what your landing page is for. Highlight your values, specific program areas, or results.'

Graphic headings can vary.

Graphic headings can be used a few different ways, depending on what your landing page is for. Highlight your values, specific program areas, or results.
<div class="usa-media-block"> <img class="usa-media-block__img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMaWdodCBCbHVlIENpcmNsZSIgdmlld2JveD0iMCAwIDEyNCAxMjQiIHdpZHRoPSIxMjQiIGhlaWdodD0iMTI0Ij48Y2lyY2xlIGlkPSJsaWdodF9ibHVlX2NpcmNsZSIgZmlsbD0iIzAwNzFiYyIgY3g9IjYyIiBjeT0iNjIiIHI9IjYyIi8+PC9zdmc+Cg==" /> <div class="usa-media-block__body"> <h2>Graphic headings can vary.</h2> <p>Graphic headings can be used a few different ways, depending on what your landing page is for. Highlight your values, specific program areas, or results.</p></div> </div>