Headers, Banners and Buttons - All types for display
Headers
Headers is used for the page name (the main title) and/ or for the sub-heading of certain sections within the page.
The visitors like to scan content, to get an idea of what the text is about and to decide which sections of the text they are going to read.
Using headings and sub-headings helps them do that.
The header as built-in component types are: Dash, and Tagline. However, it can use other titles as part of a content paragraph (rich text)
including labelling the title with the relevant heading.
Please note, the Headers should contain up to 60 characters.
Display Header - Dash
Display Header - Tagline
Banner
Banners are used as calls to action to promote another destination.
The banners contain a designed background, text and button (without an image).
This Banner type can be: Lines, Grey and a dominant brand background color.
The text in the banner is rich text. In addition, a dash will be added next to the title.
Please note, that the title of the banner should be tagged as a heading, according to the hierarchy of the content on the page.
The button on the banner is optional to add (on types: solid, outline, underline).
This banner can be displayed wide with margins, and full width.
Buttons
Buttons are calls to action which lead to another destination.
The button can be stand-alone on the page, or as part of another component, such as a strip, card and banner.
The button types are: Solid, Outline and Underline.
In addition, can be large/small, and contain icons.
The icons are added (using svg file only) manually.
The default icon is an arrow (pointer). However, it is possible to hide it.
The icon position can be before or after the text.
The button colours are by choice, according to the brand colors.
Marketing Disclaimer Page - One screen
In this pop-up window, you can display marketing text to promote a campaign / promote other information on the site/ message to the current page, etc.
The view on the page can be free text (unlimited), video, images and even to fill out a form.
Clicking on the X to close the window (Top right) will keep you on the current page (you can decide to enable this or not).
Clicking the buttons below will take you to the destination.
This pop-up window can be seen at the entrance to the page, or by clicking on a dedicated button.
The background of the page behind can be in different brand colors, by choice (primary color, secondary color, opaque black, blurred white).
Marketing Disclaimer Page - Two screens
In this pop-up window, you can display marketing text to promote a campaign / promote other information on the site/ message to the current page, etc.
The view on the page can be free text (unlimited), video, images and even to fill out a form.
Clicking on the X to close the window (Top right) will keep you on the current page (you can decide to enable this or not).
Clicking the buttons below will take you to the destination.
This pop-up window can be seen at the entrance to the page, or by clicking on a dedicated button.
This is the text for the second screen, which can contain free text (unlimited), video, images and even to fill out a form.
On this screen, can add up to 3 CTA buttons in the brand colors, which will lead to the desired destination.
Area Link Circles
Large link circles on a primary brand background color.
These link circles displayed in a static view grid of 4 circles in a row.
If more than 4 circles are added, they will be added in another row. If less than 4 circles are added, an empty space will remain.
The text on each circle can be a link and lead to another destination or display only static text. The text is limited to up to 100 characters.
This block can be added to a wide section on any page.
Area Link Rectangles
Square buttons link on a dominant brand background color.
These buttons are displayed in a static view, on a grid of 3 square buttons in a row.
If more than 3 squares are added, they will be added in another row. If less than 3 squares are added, an empty space will remain.
If the text on a square is long, the square will be expanded accordingly, and so will the squares in the same row be expanded accordingly.
These buttons can be added to a wide section on any page.
Cookie Settings