Banner (banner)

A banner displays a prominent message and related optional actions.

🔗 External documentation.

                        type: string

                      

            id: banner
label: Banner
description: 'A banner displays a prominent message and related optional actions. '
homepage: 'https://m2.material.io/components/banners'
variants:
    default:
        id: default
        label: Default
    centered:
        id: centered
        label: Centered
    mobile_stacked:
        id: mobile_stacked
        label: 'Mobile stacked'
slots:
    text:
        id: text
        label: Text
        description: 'The banner text'
    primary_action:
        id: primary_action
        label: 'Primary action'
        description: 'An optional single renderable button.'
    secondary_action:
        id: secondary_action
        label: 'Secondary action'
        description: 'An optional single renderable button.'
props:
    graphic:
        id: graphic
        label: 'Graphic icon'
        description: 'Icon list in https://fonts.google.com/icons?selected=Material+Icons'
        schema:
            type: string
library:
    js:
        'https://data.dilla.io/material_2/components/banner/banner_init.js': {  }
    id: banner
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': banner
            text: 'There was a problem processing a transaction on your credit card.'
            primary_action:
                '@component': button
                label: 'Action 1'
            secondary_action:
                '@component': button
                label: 'Action 2'
            graphic: search