Header

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

ACE

 Page header. 

                                                                              <div class="ace-header ace-group ace-group-split">
                                                                                    <div class="ace-item ace-header-logo"><img src="/dist/images/ansarada-logo-colour.svg" alt="ansarada" />
                                                                                    </div>
                                                                                    <div class="ace-item ace-header-main">
                                                                                      <h1>ACE</h1>
                                                                                    </div>
                                                                                    <div class="ace-item ace-header-controls">
                                                                                          <button class="ace-button" type="button"><span>Control</span></button>
                                                                                          <button class="ace-button" type="button"><span>Control</span></button>
                                                                                    </div>
                                                                              </div>

                                                                          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>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. 

                                                                              <div class="ace-header ace-group ace-group-split">
                                                                                    <div class="ace-item ace-header-main">
                                                                                      <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>Content Heading</h2>
                                                                                <%
                                                                              ace.HeaderItemEnd
                                                                              ace.HeaderItem(Array("type", "controls"))
                                                                                ace.Button(Array("text", "Print")) 
                                                                              ace.HeaderItemEnd
                                                                          ace.HeaderGroupEnd