Feature Callout Widget

Feature Callout Widget

Last updated 11.02.22

The Feature Callout Widget is new to Kentico 12. It is a rectangular box with a solid color background that fills the available space in a grid. This box contains editable text and up to two buttons. Great for a snippet of information and a link that is called out on the page. Provides a basic element in the development of a custom layout. 

Add Feature Callout to the page

1. Select where on the page you would like the widget to appear. 
2. Click on the blue plus add widget icon   
3. Select the Feature Callout widget from the widget pop up 
4. Once the widget is added to the page, hover over the added widget until it displays the properties and trash icons. Click on the gear-shaped properties icon. 

Feature Callout Properties

5. In the Feature Callout properties pop up, adjust various settings including text content, background color, number of buttons (1-2), button text, button style, button color and content alignment. 

Note each button is styled separately. They can be different colors and styles.

6. Click Apply button to update the widget with selected properties. The properties pop up will automatically close.

How to delete the Feature Callout Widget

Hover over the Feature Callout widget until it displays the properties and trash icons and click on the trash icon to delete. 

How to reposition the Feature Callout Widget

Hover over the Feature Callout widget until it displays the grab icon on the left. Simply drag and drop in a new location. 
 

Feature Callout Widget Properties

PROPERTYDESCRIPTION
HeaderText entry field for a limited large headline.
Header AlignmentSelect where within feature the header will be aligned
   • Center  
   • Left  
   • Right  

SubheaderText entry field for a limited medium headline.
Subheader AlignmentSelect where within feature the subheader will be aligned
   • Center  
   • Left  
   • Right  

ContentText entry field for any amount of body copy in the default paragraph style. Note this property has a light text editor for adding text effects, small tables and text links.
Button Properties: Number of ButtonsThe widget can feature none, one or two buttons by selecting a number from the menu. If the user selects 0 no buttons will display.  Anything other than 0 the Button and the below properties will display  
[Button] TextEnter text to be featured on each button. Typically shorter text is better for ease of reading and to keep the design tidy. If text field is blank, the button will not display.
[Button] StyleSelect pre-built style options from the menu. Note that if two buttons are featured, each one may have its own style. Below is the list of styles that can be selected:
• Default - a rectangular shape with a solid-color fill
• Round - a pill shape with a solid-color fill
• Radius - a rectangle with slightly rounded corners with a solid-color fill
• Hollow - a rectangular outline shape with a transparent fill
• Expanded - an extra-wide rectangular shape with a solid-color fill
• Disabled - a rectangular shape faded back to denote that it is disabled
• Clear - a transparent button with only text visible

[Button] ColorSelect from your custom brand colors or grayscale options from the menu for button fills or outlines. Note that if two buttons are featured, each one may have its own color. Below is the list of colors that may be selected:
• Default  
• Primary Color  
• Primary Color – Light  
• Primary Color – Dark  
• Secondary Color  
• Secondary Color – Light  
• Secondary Color – Dark  
• Gradient  
• White  
• Light Gray  
• Medium Gray  
• Dark Gray  
• Black

[Button] Target Below are the targets to choose from:
• Default – this will open in the same tab of the browser and is typically used to move around within your site
• Blank – this will open in a new tab of the browser and is typically used for links that leave your site
[Button] Target URL The URLs attached to the button can simply link to another page of the website, to an anchor link on a page, to a different website, can automatically open a pre-addressed email, link to a phone number or a document from the Media Library Application.
Check the “URL is Internal” checkbox to access the Pages Application or the Media Library Application to select a page in the site or a document.
Button AlignmentSelect where within the feature the button(s) will be aligned
• Center
• Left
• Right
Background Color The background color attribute effects the color behind the text and button in the feature. Initially, Default is selected, which is no color added. Select from your custom brand colors or grayscale options from the menu. Additionally, you can select any color by adding the hexidecimal color code. Below is the list of Background colors that can be selected:
• Default (None)
• Primary
• Primary Color - Light
• Primary Color - Dark
• Secondary
• Secondary - Light
• Secondary - Dark
• Gradient
• White
• Light Gray
• Medium Gray
• Dark Gray
• Black
• Custom (enter color in hex format – ex. #2c6090)
Invert Text ColorTypically the widget can guess if the text should be dark or white depending on what color background is behind it. But if the visual can be improved by a change from one to the other, click the Invert Text Color checkbox.
PaddingUse padding to increase spacing within the feature callout background area. This is especially useful when using a background color to provide space between the text/buttons content and the outside edges of the feature callout rectangle.

Top
User can select from 1-5 rems to increase room in the top of feature callout background area

Bottom
User can select from 1-5 rems to increase room in the bottom of the feature callout background area

Right
User can select from 1-5 rems to increase room in the right of the feature callout background area

Left
User can select from 1-5 rems to increase room in the left of the feature callout background area
MarginUse margin to increase spacing between the Feature Callout widget and other widgets on the page. This is helpful to provide visual room between elements and increase readability.

Top
User can select from 1-5 rems to increase spacing above the feature callout background area

Bottom
User can select from 1-5 rems to increase spacing below the feature callout background area

Right
User can select from 1-5 rems to increase to the right of the feature callout background area

Left
User can select from 1-5 rems to increase spacing to the left of the feature callout background area

Feature Callout Widget Examples

The Feature Callout Widget expands to fill whatever grid section it is placed in. This means it can be a small box off to one side or a larger element across the page. It's a simple way to add messaging with buttons.

Feature Callout Widget

This is the Feature Callout Widget.

The Feature Callout Widget is new to Kentico 12. It is a rectangular box with a solid color background that fills the available space in a grid. This box contains editable text and up to two buttons. Great for a snippet of information and a link that is called out on the page. Provides a basic element in the development of a custom layout.

Feature Callout

Callout 1/3

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Feature Callout

Callout 2/3

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Feature Callout

Callout 3/3

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Feature Callout

Callout 1/2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Feature Callout

Callout 2/2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.