Related Links & Videos
Feature Callout Widget Properties
| PROPERTY | DESCRIPTION |
| Visible | Checking and unchecking the checkbox toggles widget visibility on the page. This allows for prepping the content in edit mode before widget debut. |
| Header | Text entry field for a limited large headline. |
| Header Alignment | Select where within feature the header will be aligned • Center • Left • Right |
| Subheader | Text entry field for a limited medium headline. |
| Subheader Alignment | Select where within feature the subheader will be aligned • Center • Left • Right |
| Content | Text 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. |
| Enable Pop-up Feature | Checking this box will allow for additional content is displayed in a reveal window and accessed by users using the + in the upper right corner of the widget. |
| Pop-up Content | The content displayed in the reveal window when the Enable Pop-up Feature box is checked. This can include text, images, and videos. |
| Pop-up background Color | The background color attribute effects the color behind the text and content in the the Pop-up Content. Select from your custom brand colors or grayscale options from the menu. Additionally, you can select any color by adding the hexadecimal 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) |
| Pop-up Invert Text Color | Typically 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. |
| Pop-up Background Image | As an alternative to a background color it is possible to select a large image to appear behind the text and image of the widget. Care should be taken to allow for text readability and clean design. Clicking the Select button opens a dialog box allowing you to select an image via the Media Library Application. |
| Button Properties: Number of Buttons | The 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] Text | Enter 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] Style | Select 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] Color | Select 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 Alignment | Select 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 Color | Typically 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. |
| Padding | Use 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 |
| Margin | Use 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 |
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.
Add pop-up content with a background image.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Convallis posuere morbi leo urna molestie at elementum eu. Mi proin sed libero enim sed faucibus turpis in. Ullamcorper sit amet risus nullam eget felis. Nibh sed pulvinar proin gravida hendrerit lectus. Placerat orci nulla pellentesque dignissim enim sit amet venenatis urna. Ultrices dui sapien eget mi proin sed libero enim sed. Felis eget nunc lobortis mattis aliquam faucibus purus in massa. Neque viverra justo nec ultrices dui sapien eget mi. At quis risus sed vulputate odio ut enim blandit volutpat. Arcu dictum varius duis at consectetur lorem donec massa. Diam vulputate ut pharetra sit amet aliquam id diam. Quisque egestas diam in arcu cursus euismod quis viverra. Nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi. Duis at tellus at urna condimentum mattis pellentesque id. Pellentesque habitant morbi tristique senectus et netus et.
Mauris augue neque gravida in fermentum et. Enim nec dui nunc mattis enim. Tellus id interdum velit laoreet id donec ultrices tincidunt arcu. Imperdiet dui accumsan sit amet nulla facilisi morbi tempus iaculis. In egestas erat imperdiet sed euismod nisi porta. Pulvinar etiam non quam lacus suspendisse faucibus interdum posuere lorem. Lacus viverra vitae congue eu consequat. Morbi quis commodo odio aenean sed. Risus viverra adipiscing at in tellus integer feugiat. Neque egestas congue quisque egestas diam in arcu. Suspendisse potenti nullam ac tortor vitae purus. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae congue. Dolor sit amet consectetur adipiscing elit duis tristique. Tincidunt praesent semper feugiat nibh sed pulvinar proin. Ultricies leo integer malesuada nunc vel risus. Pretium fusce id velit ut tortor. Eu consequat ac felis donec et odio pellentesque diam volutpat.
Consequat id porta nibh venenatis cras. Eu mi bibendum neque egestas congue. Gravida in fermentum et sollicitudin ac orci phasellus egestas. Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Porttitor rhoncus dolor purus non enim. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci nulla. Nisi porta lorem mollis aliquam. Blandit turpis cursus in hac habitasse platea dictumst quisque sagittis. Sed faucibus turpis in eu mi bibendum neque egestas. Sed blandit libero volutpat sed cras ornare. Est sit amet facilisis magna etiam tempor. Ultricies lacus sed turpis tincidunt id aliquet risus. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Elementum facilisis leo vel fringilla est ullamcorper. Sed faucibus turpis in eu mi. Et pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Pharetra diam sit amet nisl suscipit adipiscing bibendum est ultricies. Nisl condimentum id venenatis a condimentum vitae. Morbi tempus iaculis urna id volutpat lacus laoreet.
Luctus accumsan tortor posuere ac ut consequat semper viverra. Placerat in egestas erat imperdiet sed. Ultricies tristique nulla aliquet enim tortor at auctor. Est ullamcorper eget nulla facilisi etiam dignissim diam. Sed odio morbi quis commodo odio aenean. Pharetra sit amet aliquam id diam maecenas ultricies mi eget. Urna nec tincidunt praesent semper feugiat. Pharetra et ultrices neque ornare aenean euismod elementum nisi. Pretium viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Sed vulputate mi sit amet mauris. Ligula ullamcorper malesuada proin libero nunc consequat. Lorem sed risus ultricies tristique nulla aliquet enim tortor. Ut tristique et egestas quis. Risus at ultrices mi tempus imperdiet nulla. Risus nec feugiat in fermentum posuere urna nec tincidunt praesent. Tellus integer feugiat scelerisque varius morbi enim nunc. Scelerisque in dictum non consectetur a erat nam at lectus. Et pharetra pharetra massa massa.
At quis risus sed vulputate odio ut enim blandit volutpat. Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. Accumsan sit amet nulla facilisi morbi. Montes nascetur ridiculus mus mauris. Faucibus a pellentesque sit amet porttitor eget dolor morbi. Tellus in metus vulputate eu. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Lorem ipsum dolor sit amet consectetur. Elit eget gravida cum sociis natoque penatibus et magnis dis. Ipsum dolor sit amet consectetur adipiscing elit duis. Ut eu sem integer vitae justo eget. Nunc faucibus a pellentesque sit amet porttitor eget dolor morbi. Ipsum dolor sit amet consectetur adipiscing elit duis tristique. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Aliquet sagittis id consectetur purus ut. Fringilla est ullamcorper eget nulla facilisi etiam. Ut tristique et egestas quis. Lobortis elementum nibh tellus molestie nunc non blandit. Rhoncus mattis rhoncus urna neque viverra justo nec.
Diam donec adipiscing tristique risus nec. Id aliquet lectus proin nibh nisl. Varius vel pharetra vel turpis nunc. Mi sit amet mauris commodo quis. Quis enim lobortis scelerisque fermentum dui faucibus in. Augue ut lectus arcu bibendum at. In fermentum posuere urna nec tincidunt. Molestie ac feugiat sed lectus vestibulum. Odio tempor orci dapibus ultrices in iaculis nunc sed. Nulla aliquet porttitor lacus luctus accumsan tortor posuere. Quisque sagittis purus sit amet volutpat consequat mauris nunc. Aenean euismod elementum nisi quis. Aliquet nibh praesent tristique magna. Fames ac turpis egestas sed tempus urna et pharetra pharetra. Nibh mauris cursus mattis molestie a iaculis at. Porta nibh venenatis cras sed felis eget.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Convallis posuere
morbi leo urna molestie at elementum eu.
Mi proin sed
libero enim sed faucibus turpis in.
Ullamcorper
sit amet risus nullam eget felis. Nibh sed pulvinar proin gravida hendrerit lectus. Placerat orci nulla pellentesque dignissim enim sit amet venenatis urna. Ultrices dui sapien eget mi proin sed libero enim sed. Felis eget nunc lobortis mattis aliquam faucibus purus in massa. Neque viverra justo nec ultrices dui sapien eget mi. At quis risus sed vulputate odio ut enim blandit volutpat. Arcu dictum varius duis at consectetur lorem donec massa. Diam vulputate ut pharetra sit amet aliquam id diam. Quisque egestas diam in arcu cursus euismod quis viverra. Nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi. Duis at tellus at urna condimentum mattis pellentesque id. Pellentesque habitant morbi tristique senectus et netus et.
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.