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

(Graphic list item) (graphic_list_item)

An variation of 'media block' component. To be used with 'Graphic list' component. Not found in the upstream documentation, but found in the USWDS examples.

ID Label Description Schema
image Image Expects a renderable image.
heading Heading
content Heading 
            id: graphic_list_item
label: '(Graphic list item)'
description: "An variation of 'media block' component. To be used with 'Graphic list' component. 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.'
    heading:
        id: heading
        label: Heading
    content:
        id: content
        label: Heading
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': graphic_list_item
            image:
                '@element': img
                src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMaWdodCBCbHVlIENpcmNsZSIgdmlld2JveD0iMCAwIDEyNCAxMjQiIHdpZHRoPSIxMjQiIGhlaWdodD0iMTI0Ij48Y2lyY2xlIGlkPSJsaWdodF9ibHVlX2NpcmNsZSIgZmlsbD0iIzAwNzFiYyIgY3g9IjYyIiBjeT0iNjIiIHI9IjYyIi8+PC9zdmc+Cg=='
            heading: 'Graphic headings can vary.'
            content:
                '@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 class="usa-graphic-list__heading">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>