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. |
| Enable H1 tag | Checkbox to add the H1 header tag to improve SEO. Note each web page should only contain one H1 header or tag. Please ensure no other H1 is present on this page before checking this box. |
| 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. |
| Enable Pop-up | Checkbox to enable the button's pop-up utility. Either one of the two buttons may be purposed as a pop-up window activator by checking this box. The other button remains available to link to another target URL as usual. Note at the same time the standard plus icon on the Feature Callout will be hidden since it's utility has been moved to the button. |
| [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
Styled with an Optional Popup Button
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.
Lorem ipsum odor amet, consectetuer adipiscing elit. Lacinia porta etiam neque eu maecenas. Auctor ligula platea justo eu nisl sociosqu fames. Nulla venenatis cursus donec donec semper nunc sapien fringilla. Mus ultricies taciti rhoncus nulla et orci erat interdum. Sodales volutpat felis amet neque suscipit. Quam mollis blandit quis nascetur aliquam maecenas lacus varius ligula. Purus nunc integer donec, tortor habitant nullam. Cras metus sit vel quisque ante dapibus.
Sodales bibendum consectetur auctor suspendisse curabitur placerat. Feugiat nibh erat, convallis maecenas mattis diam vestibulum magnis. Sociosqu duis pretium feugiat id accumsan phasellus curae. Auctor proin parturient ad sollicitudin at blandit quis augue. Eget duis eget primis adipiscing, felis donec laoreet a odio. Magna proin consequat nisl sed praesent nec; faucibus montes elementum. Hendrerit ridiculus gravida quam lacinia efficitur enim magna convallis. Nascetur elementum lectus hendrerit amet pellentesque.
Adipiscing luctus finibus ante faucibus suspendisse laoreet posuere odio. Vestibulum tempus quisque sem nascetur vel bibendum. Tortor bibendum placerat cubilia sagittis cras; libero ante nam. Phasellus penatibus netus nam curabitur platea pulvinar. Commodo fusce pulvinar aliquam suspendisse litora quis. Hac tellus hac ac posuere sociosqu eleifend nostra penatibus. At at nulla elementum lobortis per placerat purus per. Ligula potenti convallis nisi libero mattis neque curabitur. Posuere gravida arcu eleifend consectetur lacus nisi euismod sollicitudin.
Feature Callout
Styled with a Popup Button and a Standard Button
Quam auctor odio augue lectus phasellus dis lobortis. Ullamcorper amet ac consequat porttitor nullam mollis. Scelerisque placerat habitant efficitur ultrices mus metus facilisis. Faucibus enim facilisis convallis risus nostra justo facilisis venenatis.
Lorem ipsum odor amet, consectetuer adipiscing elit. Nec sem sagittis risus enim efficitur nisi. Dui natoque aliquam lectus rutrum risus tincidunt erat? Duis maximus ac vulputate penatibus aliquet diam. Taciti mus sociosqu quis duis magnis leo ac imperdiet. Ante himenaeos netus ex mollis ipsum nam torquent. Id donec nisl mattis tristique aliquam cubilia.
Mattis molestie ridiculus consequat mus proin mi sapien aliquam bibendum. Auctor primis curae primis pellentesque ipsum fusce lacinia. Habitasse finibus magnis, quam parturient cubilia nullam bibendum. Ex mi pretium; morbi fusce donec urna torquent. Sapien duis eget aptent mus placerat vestibulum. Gravida mauris penatibus quam gravida lacus netus lectus. Sit ullamcorper laoreet cubilia accumsan nascetur. Potenti fames rhoncus felis adipiscing taciti dis penatibus.
Sollicitudin at fusce auctor etiam nisl lorem ut. Ante himenaeos nullam, est magnis dictum suscipit. Vulputate sit habitant sollicitudin torquent pretium curae aenean lorem elementum. Posuere non curabitur nulla mus; maecenas tempor velit vestibulum. Iaculis hendrerit faucibus porttitor magnis commodo felis. Efficitur senectus phasellus dictumst eget, lacinia non ut sollicitudin! Vitae primis quisque volutpat tincidunt, vivamus malesuada lacus penatibus vulputate.
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.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et ligula ullamcorper malesuada proin libero nunc. Nec ullamcorper sit amet risus nullam. Arcu dictum varius duis at consectetur. At tempor commodo ullamcorper a lacus vestibulum. Elit at imperdiet dui accumsan sit amet nulla facilisi. Lacus sed turpis tincidunt id. Mauris pharetra et ultrices neque ornare aenean euismod elementum nisi. Velit sed ullamcorper morbi tincidunt ornare massa eget. Ac tincidunt vitae semper quis lectus. Eu augue ut lectus arcu bibendum at varius. Pellentesque sit amet porttitor eget dolor morbi non arcu. Fames ac turpis egestas integer eget aliquet nibh praesent.
Tellus elementum sagittis vitae et leo duis ut diam quam. Leo integer malesuada nunc vel risus commodo viverra maecenas. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis. Elementum nibh tellus molestie nunc non blandit massa enim. Suscipit tellus mauris a diam maecenas sed enim ut sem.
Volutpat maecenas volutpat blandit aliquam etiam. Sem viverra aliquet eget sit amet tellus. Hendrerit dolor magna eget est lorem ipsum. Pharetra magna ac placerat vestibulum lectus mauris ultrices eros in. Vestibulum sed arcu non odio. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Facilisi nullam vehicula ipsum a arcu cursus vitae. Elit sed vulputate mi sit. Ut placerat orci nulla pellentesque. Malesuada fames ac turpis egestas integer eget.
In pellentesque massa placerat duis ultricies lacus sed turpis. Semper quis lectus nulla at. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Sagittis eu volutpat odio facilisis. Sit amet mattis vulputate enim nulla aliquet. Purus viverra accumsan in nisl nisi scelerisque eu ultrices. Eget mi proin sed libero enim sed faucibus turpis in. Tortor dignissim convallis aenean et tortor at risus. Eget nunc lobortis mattis aliquam faucibus purus in. Sed id semper risus in hendrerit gravida. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Scelerisque varius morbi enim nunc. Diam vulputate ut pharetra sit amet aliquam id diam. Semper feugiat nibh sed pulvinar. Tortor aliquam nulla facilisi cras. Ac odio tempor orci dapibus. Aliquam id diam maecenas ultricies mi eget mauris. Feugiat in ante metus dictum at tempor commodo. Cursus turpis massa tincidunt dui ut ornare lectus. Habitasse platea dictumst vestibulum rhoncus est pellentesque elit.
Et malesuada fames ac turpis egestas sed tempus. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque. Sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula ipsum. Aliquam etiam erat velit scelerisque in dictum non consectetur. Suspendisse potenti nullam ac tortor. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus quam. Porta nibh venenatis cras sed. Etiam sit amet nisl purus in. Ultrices sagittis orci a scelerisque purus. Vulputate sapien nec sagittis aliquam. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Lorem ipsum dolor sit amet consectetur. Quam adipiscing vitae proin sagittis nisl rhoncus mattis. Tincidunt vitae semper quis lectus. Lobortis scelerisque fermentum dui faucibus in ornare. Nullam non nisi est sit amet facilisis magna etiam. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus. Malesuada fames ac turpis egestas sed. Viverra mauris in aliquam sem fringilla ut morbi.
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.