# Block Variations: Notice Box and Card

> Adds "Notice box" and "Card" to the inserter as ready-made Group block variations with starter content, so editors insert consistent components in one click.

- Type: PHP
- Runs: Run everywhere
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: variations, group, components
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/block-variations-notice-and-card/

## Code

```php
add_filter( 'get_block_type_variations', function ( $variations, $block_type ) {
    if ( 'core/group' !== $block_type->name ) {
        return $variations;
    }

    $variations[] = array(
        'name'        => 'wpide-notice',
        'title'       => 'Notice box',
        'description' => 'A highlighted box for important information.',
        'scope'       => array( 'inserter' ),
        'icon'        => 'info',
        'attributes'  => array( 'className' => 'wpide-notice', 'layout' => array( 'type' => 'constrained' ) ),
        'innerBlocks' => array(
            array( 'core/paragraph', array( 'content' => '<strong>Note:</strong> add your message here.' ) ),
        ),
    );

    $variations[] = array(
        'name'        => 'wpide-card',
        'title'       => 'Card',
        'description' => 'Heading, short text and a button.',
        'scope'       => array( 'inserter' ),
        'icon'        => 'id-alt',
        'attributes'  => array( 'className' => 'wpide-card', 'layout' => array( 'type' => 'constrained' ) ),
        'innerBlocks' => array(
            array( 'core/heading', array( 'level' => 3, 'content' => 'Card title' ) ),
            array( 'core/paragraph', array( 'content' => 'One or two sentences about this item.' ) ),
            array( 'core/buttons', array(), array( array( 'core/button', array( 'text' => 'Learn more' ) ) ) ),
        ),
    );

    return $variations;
}, 10, 2 );

add_action( 'wp_enqueue_scripts', function () {
    wp_register_style( 'wpide-group-variations', false, array(), '1.0' );
    wp_enqueue_style( 'wpide-group-variations' );
    wp_add_inline_style( 'wpide-group-variations', '.wpide-notice{border-left:4px solid #2271b1;background:rgba(34,113,177,.07);padding:1em 1.25em;border-radius:4px;}.wpide-card{padding:1.5em;border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,.08);}' );
} );
```

## Notes

Uses the class names wpide-notice and wpide-card; style them in your theme or with a CSS snippet. Needs WordPress 6.5+.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Block Variations: Notice Box and Card" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/