<templates:header>
AJAX
Data
Forms
Layout
Logic
Navigation
Personalisation
Standard
Templates
ATTRIBUTES
EXAMPLES
Regions
Third Party

<templates:header> </...>

Header element which provides structure to primary navigation and logo placement.

Content

any
Content to render inside the Header.

Attributes

contentSize
string
Content Size

Valid options: sm, md, lg
height
string
Height

Sets the height of the element. The default units are pixels. include the percentage symbol % to user percentage values.
id
string
Give this control a unique id. Can be accessed in the client DOM (eg, document.getElementById('myid') or in the server DOM using [? $myid ?] or [? $('myid') ?]).
logo
string
Logo Src

Set a path for a logo image.
logoAlt
string
Logo Alt

Set an alternative text description for the Logo image.
logoLink
string
Logo Link

Set a link which should be applied to the Logo image.
maxLogoHeight
string
Logo Max Height

The max-height of the Logo. Can be in any standard CSS unit, but is usually px.
maxLogoWidth
string
Logo Max Width

The max-width of the Logo. Can be in any standard CSS unit, but is usually px.
width
string
Width

Sets the width of the element. The default units are pixels. include the percentage symbol % to user percentage values.
navbgcolor
string
Navigation Background Color

Sets the background colour of the header's navigation menu.
navfontcolor
string
Navigation Font Color

Sets the font colour of the header's navigation menu.

Examples

Slim Header Template

Using a Slim variant to display header section with logo, site navigation, and login button

HTML:

<templates:header variant="Slim" maxlogowidth="100px" maxlogoheight="70px" bgcolor="rgba(0,0,0,1)" contentsize="md" navbgcolor="rgba(0,0,0,1)" navfontcolor="#ffffff" logo="/_public/Controls/Forms/HTMLEditor/new/Core/Insert/Composition/images/art2.png"> <navigation:primary rootpage="/" id="headerNav" includestyles="true" preventwrap="true" autopopulatelevel="2" openonhover="true"> <navigation:item at="end" page="/search/"> <standard:icon name="search" library="fontawesome" style="width: 16px; height: 16px" /> </navigation:item> </navigation:primary> <templates:button headerposition="primary" variant="Classic" href="/community/login">Login</templates:button> </templates:header>

Header Widget

Add a section above the header to display additional details.

HTML:

<templates:section paddingtop="1rem" paddingbottom="1rem" paddingleft="0" paddingright="0" bgcolor=""> <templates:row verticalAlignColumns="center"> <templates:column width="2"> <standard:icon library="fontawesome" name="phone-volume-solid" size="4" style="width: 16px; height: 16px; margin-right: 0.5rem" /> <a href="tel: 123 456 789">Call Us</a> </templates:column> <templates:column width="2"> <standard:icon library="fontawesome" name="envelope" size="4" style="width: 16px; height: 16px; margin-right: 0.5rem" /> <a href="mailto:info@domain.com">Email Us</a> </templates:column> <templates:column width="7"> <standard:icon library="fontawesome" name="clock-solid" size="4" style="width: 16px; height: 16px; margin-right: 0.5rem" /> Mon - Fri: 9:00 - 19:00 </templates:column> <templates:column width="3"> <templates:sociallinks icon-width="33px" icon-height="33px" variant="Square" size="3" facebook="#" twitter="#" linkedin="#" instagram="#" youtube="#" color="#151414" /> </templates:column> </templates:row> </templates:section> <hr style="margin: 0" /> <templates:header variant="YinYang" maxlogowidth="200px" maxlogoheight="100px" logo="/_public/Controls/Forms/HTMLEditor/new/Core/Insert/Composition/images/art2.png" bgcolor="#ffffff" contentsize="md" navfontcolor="#ffffff" navbgcolor="#242424"> <navigation:primary includestyles="true" autopopulatelevel="1" classlicurrent="s8-navigationPrimaryLI-current" rootpage="/" /> <templates:button headerposition="primary" variant="Pulse" bgcolor="#151414" padding="10" borderRadius="0" color="#ffffff" href="/community/login">LOGIN</templates:button> </templates:header>