Responsive Gutenberg Addons
Responsive Gutenberg Blocks Library
Search…
⌃K

Inline Notice Block

Inline Notice Block allows you to highlight important information on your page.

How To Add The Inline Notice Block

  1. 1.
    Open a page or a post and click on the plus icon to add a new block and look for the Inline Notice or you can search for it if it doesn’t pop up quickly for you.
  2. 2.
    By default, you'll get the below design-

How To Configure The Inline Notice Block

Under the Content Tab, General Settings like Layout, Notification Type, Heading tag, and options to display type are available.

Layout

There are two types of layouts available. Modern and Default.
Could not load image
Could not load image

Notification Type

This setting allows you to set the color for your notice according to the notification type. The different types of notification available are Default, Warning, Error, Information, Notification.
Could not load image

Primary Heading

This setting allows you to choose the tag for your notification title. The different tags available are - H1, H2, H3, H4
Could not load image

Notice Display

This setting allows you to choose if the user should get an option to dismiss the notice or not. The options available are - Always Dismiss and Always Allow.
Always Dismiss: Selecting this option will provide two options-
  1. 1.
    To select Icon
  2. 2.
    To enable cookies
Could not load image
If you enable cookies, you will get an option to set the number of days for cookies. Enabling cookies will make sure that if a user has dismissed notifications, it will not appear again on refresh.
Could not load image

How To Style The Inline Notice Block

Under the Style Tab, various style settings for Colors, Typography, and Padding for Inline notice are available.

Colors

This panel has the following options-
  1. 1.
    Title Color - Choose the color for the notice title.
  2. 2.
    Highlight Color - Choose the highlight color for notification. This option will be available if you have selected the ‘Default’ notification type in the Content Tab.
  3. 3.
    Content Color- Choose the color for your notice text.
  4. 4.
    Content Background Color - Choose the background color for your notice text.
Could not load image

Typography

Choose the values for font family, font size, font weight, line height and letter spacing for your notification title and content.
Could not load image
Could not load image

Padding

This panel provides options to set notification padding for desktop, tablet, and mobile devices.
The settings available are - Title Padding Horizontal, Title Padding Vertical, Content Padding Horizontal, and Content Padding Vertical.
Could not load image

Advanced Settings

Under the Advanced Tab, padding, margin, and default advanced settings for the notification block are available.

Block Padding

This setting provides options to set padding for the entire block for desktop, tablet and mobile devices.
Could not load image

Block Margin

This setting provides options to set margin for the entire block for desktop, tablet and mobile devices.
Could not load image

Advanced

This panel provides a z-index setting for your block.
Could not load image