A big eye-catching image with info, usually in the above-the-fold zone of the page right below the header.

                        type: string

                      

                        type: string
format: uri-reference

                      

            id: hero
label: Hero
description: 'A big eye-catching image with info, usually in the above-the-fold zone of the page right below the header.'
group: Layout
slots:
    title_alt:
        id: title_alt
        label: 'Text alt'
        description: 'Will render above title.'
    title:
        id: title
        label: Title
        description: 'Will render as an H1.'
    body:
        id: body
        label: Body
        description: 'Small body for banner, recommended keep short.'
props:
    aria_label:
        id: aria_label
        label: 'Aria label'
        description: 'Short label for this specific banner.'
        schema:
            type: string
    bg_image:
        id: bg_image
        label: 'Background image'
        schema:
            type: string
            format: uri-reference
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': hero
            title_alt: 'Hero callout:'
            title: 'Bring attention to a project priority'
            body:
                -
                    '@element': p
                    '@content': 'Support the callout with some short explanatory text. You don’t need more than a couple of sentences.'
                -
                    '@component': button
                    label: 'Call to action'
                    url: '#'
            aria_label: Introduction
            bg_image: 'https://cdnjs.cloudflare.com/ajax/libs/uswds/3.7.0/img/hero.jpg'