Teasers and other call-to-action components
Teasers
The teaser cards consist of a visual and a text overlay and a link button. When used side by side in a 33-33-33% grid these cards look very nice with a split background color layout.
Grid:
This component can be added to all grids except the 100% grid.
Template:
/sitecore/templates/Project/Common/Content Types/Teasers/Teaser
Image size (width x height):
620 x 756
Cards
The cards rendering consists of a visual on top, a short introduction text and a text link.
Grid:
This component can be added to all grids except the 100% grid.
Template:
/sitecore/templates/Project/Common/Content Types/Teasers/Card
Image size (width x height):
1600 x 900
CTA Panels
The Call to Action Panels rendering contains two placeholders which can be filled with a Call to Action Panel. Filling just either one of the placeholders is also possible to only show one Call to Action Panel, centered on the page. Fill the first placeholder for one with a white background, the second placeholder has a blue background color.
Grid:
This component can be added to the 100% grid - centered.
Template:
/sitecore/templates/Project/Common/Content Types/Teasers/Call to Action Panel
Image size (width x height):
484 x 650 pixels
Teaser Full Width
This component consists of a large visual and a text overlay with link. The text can be aligned top-left, bottom-left, centered, top-right and bottom-right. Depending on the visual you can set the background color of the grid to light, medium or dark to make the text overlay more legible.
Grid:
This component can only be added to the 100% grid - full width.
Template:
/sitecore/templates/Project/Common/Content Types/Teasers/Teaser Full Width
Image size (width x height):
3840 x variable height
Call to Action Box
Optional a Call to Action Box can be added to this full width teaser.
- Title - The title of the call to action box
- Subtitle - The subtitle of the call to action box
- Left Button Link - The link of the left (dark blue) button
- Left Button Text - The text for the left button
- Right Button Link - The link of the left (white) button
- Right Button Text - The text for the right button
- Anchor Link - The link for the 'read more' anchor at the bottom of the call to action box component
- Anchor Link Text - The text for the anchor link
Diverge Teasers
The diverge teasers consist of text box with a link arrow and optional icon. The icon can be added from the dropdown list with predefined icons, or added as a thumbnail image.
Grid:
This component can be added to the following grids:
- 33-66%
- 66-33%
- 50-50%
- 33-33-33%
Template:
/sitecore/templates/Project/Common/Content Types/Teasers/Diverge Teaser
Icon image size (width x height):
60 x 48 pixels
Title Door 1
Subtitle
Title Door 2
Subtitle
Title Door 3
Subtitle
Doorway
How to use it
This component has to be set-up in two steps. First you have to create the Doorway. Then you can add 2 or 3 door items in this Doorway. You can only add door items in the content editor, this is not possible via the Experience Editor. The door items can be added via a multi-list select box to the Doorway component.
Grid:
This component should be added to the 100% grid. Use the full width setting.
Templates:
/sitecore/templates/Project/Common/Content Types/Teasers/Doorway
/sitecore/templates/Project/Common/Content Types/Teasers/Door
Image size (width x height):
1600 x 1000 pixels
Highlight Feature 1
Lorem ipsum dolor sit amet consectetur adipiscing elit sollicitudin, tempor lectus consequat interdum dictumst odio conubia mi rhoncus, aenean rutrum sodales sapien tempus neque diam.
Read more
Highlight Feature 3
Lobortis porta venenatis velit risus duis dignissim laoreet interdum, dapibus etiam taciti quisque donec nascetur nisl, tincidunt gravida curabitur habitasse metus erat fusce.
Read more
Highlight Feature 2
Lorem ipsum dolor sit amet consectetur adipiscing elit sollicitudin, tempor lectus consequat interdum dictumst odio conubia mi rhoncus, aenean rutrum sodales sapien tempus neque diam.
Read more
Highlight Feature 4
Nascetur sodales eros magna inceptos elementum torquent scelerisque hendrerit, dui convallis iaculis quisque egestas aptent netus rhoncus diam, nec porta nunc massa accumsan purus cursus.
Read more
Highlight Features
The rendering Highlight Features can be added to the 50-50 grid. It is recommended to put the highlight features component on the left placeholder of the 50-50 grid with an Image on the right placeholder. In the Highlight Features rendering, you can add a maximum of 6 Highlight Feature items. The Highlight Feature placeholders that are not filled, will not be loaded on the actual page.
A highlight feature item consists of:
- Title: The title of the highlight. This will also be the text of the link at the top of the highlight.
- Icon*: An icon to be selected from a droptree that will be rendered on top of the title.
- Image*: An image that will be displayed when no icon has been selected.
- Summary: Short description text
- Link: The link that will be opened after clicking the highlight feature or the title text.
- Link Text: The Link Text is not used in this component, so if you place something in there, it will not do anything. (this is a leftover of the template interface that is used for the component)
* If you add an Icon and an Image, only the icon will be shown. If you really want the image to show, you should remove the value of the Icon.
Grid:
The rendering Highlight Features can be added to the 50-50 grid - centered.
Template:
/sitecore/templates/Project/Common/Content Types/Teasers/Highlight Feature
Icon image size (width x height):
Images will be rescaled to the right ratio.