Page

Summary

Common markup to produce an Atlassian standard page layout and base design.

This is an "outside-in" type of component aiming to provide a standardised page, intended for use with the full set of application header, navigation, page header, footer, etc. The content area has a preset layout system for common layout variations. There are several overall page layout options (full width, fixed width, etc).

Status

API status:	general
Included in AUI core?	Yes. You do not need to explicitly require the web resource key.
Web resource key:	`com.atlassian.auiplugin:aui-page-layout`
Experimental since:	3.6
General API status:	5.1

Examples

The page you are looking at uses AUI Page. The overall layout options are default (full width), fixed width, hybrid (full width header, fixed width content) and focused task page:

Illustration of fluid page. Illustration of fixed width page. Illustration of hybrid page. Illustration of focused task page.

Code

HTML

This is a markup-based component, however to enable HTML5 in older browsers you will need to include the HTML5 Shim.

To set the page type, use the body classes:

Default: (no class required)
Fixed: aui-page-fixed
Hybrid: aui-page-hybrid
Focused: aui-page-focused - note you also need to set the size

Focused size classes are:

aui-page-focused-small
aui-page-focused-medium
aui-page-focused-large
aui-page-focused-xlarge (default)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EDGE">
<title>AUI - Default Page</title>
</head>
<body>
<div id="page">
  <header id="header" role="banner">
    <nav class="aui-header aui-dropdown2-trigger-group" role="navigation">
      <div class="aui-header-inner">
        <div class="aui-header-primary">
          <h1 id="logo" class="aui-header-logo aui-header-logo-aui"><a href="http://example.com/"><span class="aui-header-logo-device">AUI</span></a></h1>
          <ul class="aui-nav">
            <li><a href="http://example.com/">Nav</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <section id="content" role="main">
    <header class="aui-page-header">
      <div class="aui-page-header-inner">
        <div class="aui-page-header-main">
          <h1>Default Page Layout</h1>
        </div>
      </div>
    </header>
    <nav class="aui-navgroup aui-navgroup-horizontal">
      <div class="aui-navgroup-inner">
        <div class="aui-navgroup-primary">
          <ul class="aui-nav">
            <li><a href="http://example.com"/>Nav item</a></li>
          </ul>
        </div>
        <div class="aui-navgroup-secondary">
          <ul class="aui-nav">
            <li><a href="http://example.com/">Nav item</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="aui-page-panel">
      <div class="aui-page-panel-inner">
        <section class="aui-page-panel-content">
          <h2>Page content heading</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam in arcu ultricies gravida sed sed nisl. Curabitur nibh nulla, semper non pharetra eu, suscipit vitae eros. Donec eget lectus elit. Etiam metus diam, adipiscing convallis blandit sit amet, sollicitudin sit amet felis. Phasellus justo elit, rhoncus sed tincidunt a, auctor sit amet turpis. Praesent turpis lectus, aliquet vitae sollicitudin ac, convallis vitae urna. Donec consectetur lacus a lacus tincidunt at varius felis venenatis. Pellentesque dapibus mattis arcu, a vestibulum lacus congue at.</p>
        </section>
      </div>
    </div>
  </section>
  <footer id="footer" role="contentinfo">
    <section class="footer-body">
      <ul>
        <li>I &hearts; AUI</li>
      </ul>
      <div id="footer-logo"><a href="http://www.atlassian.com/" target="_blank">Atlassian</a></div>
    </section>
  </footer>
</div>
</body>
</html>

Soy

To construct a full document with soy, you will need to call document and page; then usually fill in other templates such as header, page panel etc or use literal content:

{template .index}{call aui.page.document}
      {param windowTitle: 'Window title text' /}
      {param headContent}
          <!-- HEAD content such as CSS and JS resources -->
      {/param}
      {param content}
          {call aui.page.page}
              {param headerContent}
                  <!-- call aui.page.header here -->
              {/param}
              {param contentContent}
                  <!-- call aui.page.pagePanel here -->
              {/param}
              {param footerContent}
                  <!-- literal content here -->
              {/param}
          {/call}
      {/param}
  {/call}
{/template}

To set the page layout in Soy, use the pageType param:

* @param? pageType Default: default (full width). Options: default, focused, fixed, hybrid, generic (no class applied).

If you need a small focused page, you can set the size with focusedPageSize:

* @param? focusedPageSize Default: xlarge. Options: small, medium, large, xlarge.