ACE Header can be placed in one of two locations:

  • within #header to provide a Page Header
  • at the top of .ace-page-content-content to provide a Content Header

Header combines with the stock group/item pattern to set up layout of the various types of Header Item:

  • Logo - only for use with logo images in the header. When used, Logo must always be the first or last child element.
  • You must not show two ansarada logos in the header.
  • Main - main contents of the header, eg. the heading, breadcrumb or filter lozenges.
  • Controls - main contain buttons. When use, Controls must always be the last child element.

Note that only the #header element should have the ARIA banner role (one per page/view):


                                    <header id="header" role="banner">(header)</header>

The role attribute is not repeated on every instance of a header.

Example Element Code
This page uses the Page Header. Page header. 

                                                                                      <!-- Page header goes directly inside #header-->
                                                                                          <header id="header" role="banner">
                                                                                                <div class="ace-header ace-group ace-group-split">
                                                                                                      <div class="ace-item ace-header-logo"><a href="index.html" class="ace-header-ansarada-logo">ansarada</a>
                                                                                                      </div>
                                                                                                      <div class="ace-item ace-header-main">
                                                                                                        <h1 class="ace-h1">Page Heading</h1>
                                                                                                      </div>
                                                                                                </div>
                                                                                                <div class="ace-header ace-group ace-group-split ace-header-split">
                                                                                                      <div class="ace-item ace-header-main">
                                                                                                        <h2 data-ace-dropdown-trigger="DROPDOWNID" tabindex="0" class="ace-h2"><span><span class="ace-icon ace-icon-control-menu"></span><span class="ace-text">Documentation</span></span></h2>
                                                                                                      </div>
                                                                                                </div>
                                                                                          </header>

                                                                                      ace.HeaderGroup(Array())
                                                                                          ace.HeaderItem(Array("type", "logo"))
                                                                                            %>
                                                                                              <img src="/dist/images/ansarada-logo-colour.svg" alt="ansarada" />
                                                                                            <%
                                                                                          ace.HeaderItemEnd
                                                                                          ace.HeaderItem(Array("type", "main"))
                                                                                            %>
                                                                                              <h1 class="ace-h1">ACE</h1>
                                                                                            <%
                                                                                          ace.HeaderItemEnd
                                                                                          ace.HeaderItem(Array("type", "controls"))
                                                                                            ace.Button(Array("text", "Control"))
                                                                                            ace.Button(Array("text", "Control"))
                                                                                          ace.HeaderItemEnd
                                                                                      ace.HeaderGroupEnd

Content Heading

 Content header. 

                                                                                      <!-- 
                                                                                      Content header goes within #content, 
                                                                                      usually as the first child of .ace-page-content-content
                                                                                      -->
                                                                                          <div class="ace-header ace-group ace-group-split">
                                                                                                <div class="ace-item ace-header-main">
                                                                                                  <h2 class="ace-h2">Content Heading</h2>
                                                                                                </div>
                                                                                                <div class="ace-item ace-header-controls">
                                                                                                      <button class="ace-button" type="button"><span>Print</span></button>
                                                                                                </div>
                                                                                          </div>

                                                                                      ace.HeaderGroup(Array())
                                                                                          ace.HeaderItem(Array("type", "main"))
                                                                                            %>
                                                                                              <h2 class="ace-h2">Content Heading</h2>
                                                                                            <%
                                                                                          ace.HeaderItemEnd
                                                                                          ace.HeaderItem(Array("type", "controls"))
                                                                                            ace.Button(Array("text", "Print")) 
                                                                                          ace.HeaderItemEnd
                                                                                      ace.HeaderGroupEnd