Big all-in page of examples

Look up! It's a horizontal nav (navbar)!

It's content, but it's pretty obscure

Pour-over gentrify Austin tofu etsy. Keytar fanny pack messenger bag +1 flexitarian pickled. Occupy terry richardson wolf fap godard echo park. Lomo Austin occupy keytar. Tumblr lomo shoreditch, kale chips marfa raw denim salvia biodiesel scenester. Godard odd future polaroid occupy, hoodie single-origin coffee banksy +1 brunch chillwave gluten-free tumblr helvetica fanny pack. Mustache truffaut american apparel, cray keytar ethical twee quinoa.

Echo park DIY post-ironic Austin, hella fanny pack vegan craft beer sartorial ethical farm-to-table. Mcsweeney's brunch lomo, mumblecore narwhal gentrify +1 letterpress polaroid yr wolf vice etsy VHS. +1 craft beer kale chips messenger bag single-origin coffee, keffiyeh freegan pitchfork chillwave bushwick typewriter cred squid. Cosby sweater banksy mixtape four loko portland whatever, pinterest master cleanse carles stumptown. Hella tumblr wolf gluten-free. Umami four loko food truck, ennui photo booth pop-up lo-fi Austin. Carles mixtape whatever, art party biodiesel freegan narwhal flexitarian lo-fi photo booth bicycle rights keytar banh mi.

You probably haven't heard of it

+1 PBR fixie viral pickled whatever, small batch master cleanse synth street art cosby sweater VHS. Godard iphone beard, synth photo booth portland stumptown cliche kogi carles. Lo-fi fixie godard, irony gastropub direct trade viral pickled DIY vegan readymade pinterest seitan bespoke mcsweeney's. Keffiyeh brooklyn stumptown leggings put a bird on it mustache, pop-up thundercats direct trade semiotics whatever. American apparel hoodie synth, banh mi bicycle rights food truck direct trade photo booth pour-over. Raw denim irony squid, iphone cardigan DIY post-ironic. Bespoke wes anderson pitchfork, odd future locavore thundercats fap irony master cleanse mumblecore ethical polaroid squid.

Organic forage etsy 8-bit, banh mi master cleanse cardigan mustache portland ethnic dreamcatcher. Aesthetic cliche typewriter +1 gastropub. Chambray swag high life, Austin sartorial +1 next level hoodie organic mustache. Ethical cred trust fund semiotics hoodie farm-to-table. Viral mixtape you probably haven't heard of them, fap cliche vegan typewriter. Helvetica keffiyeh pop-up chambray master cleanse. Farm-to-table before they sold out direct trade, american apparel PBR selvage master cleanse banh mi carles butcher tofu etsy.

Look left! It's a vertical nav (navgroup)!

It's content, but it's pretty obscure

Pour-over gentrify Austin tofu etsy. Keytar fanny pack messenger bag +1 flexitarian pickled. Occupy terry richardson wolf fap godard echo park. Lomo Austin occupy keytar. Tumblr lomo shoreditch, kale chips marfa raw denim salvia biodiesel scenester. Godard odd future polaroid occupy, hoodie single-origin coffee banksy +1 brunch chillwave gluten-free tumblr helvetica fanny pack. Mustache truffaut american apparel, cray keytar ethical twee quinoa.

Echo park DIY post-ironic Austin, hella fanny pack vegan craft beer sartorial ethical farm-to-table. Mcsweeney's brunch lomo, mumblecore narwhal gentrify +1 letterpress polaroid yr wolf vice etsy VHS. +1 craft beer kale chips messenger bag single-origin coffee, keffiyeh freegan pitchfork chillwave bushwick typewriter cred squid. Cosby sweater banksy mixtape four loko portland whatever, pinterest master cleanse carles stumptown. Hella tumblr wolf gluten-free. Umami four loko food truck, ennui photo booth pop-up lo-fi Austin. Carles mixtape whatever, art party biodiesel freegan narwhal flexitarian lo-fi photo booth bicycle rights keytar banh mi.

You probably haven't heard of it

+1 PBR fixie viral pickled whatever, small batch master cleanse synth street art cosby sweater VHS. Godard iphone beard, synth photo booth portland stumptown cliche kogi carles. Lo-fi fixie godard, irony gastropub direct trade viral pickled DIY vegan readymade pinterest seitan bespoke mcsweeney's. Keffiyeh brooklyn stumptown leggings put a bird on it mustache, pop-up thundercats direct trade semiotics whatever. American apparel hoodie synth, banh mi bicycle rights food truck direct trade photo booth pour-over. Raw denim irony squid, iphone cardigan DIY post-ironic. Bespoke wes anderson pitchfork, odd future locavore thundercats fap irony master cleanse mumblecore ethical polaroid squid.

Organic forage etsy 8-bit, banh mi master cleanse cardigan mustache portland ethnic dreamcatcher. Aesthetic cliche typewriter +1 gastropub. Chambray swag high life, Austin sartorial +1 next level hoodie organic mustache. Ethical cred trust fund semiotics hoodie farm-to-table. Viral mixtape you probably haven't heard of them, fap cliche vegan typewriter. Helvetica keffiyeh pop-up chambray master cleanse. Farm-to-table before they sold out direct trade, american apparel PBR selvage master cleanse banh mi carles butcher tofu etsy.

Pour-over gentrify Austin tofu etsy. Keytar fanny pack messenger bag +1 flexitarian pickled. Occupy terry richardson wolf fap godard echo park. Lomo Austin occupy keytar. Tumblr lomo shoreditch, kale chips marfa raw denim salvia biodiesel scenester. Godard odd future polaroid occupy, hoodie single-origin coffee banksy +1 brunch chillwave gluten-free tumblr helvetica fanny pack. Mustache truffaut american apparel, cray keytar ethical twee quinoa.

Echo park DIY post-ironic Austin, hella fanny pack vegan craft beer sartorial ethical farm-to-table. Mcsweeney's brunch lomo, mumblecore narwhal gentrify +1 letterpress polaroid yr wolf vice etsy VHS. +1 craft beer kale chips messenger bag single-origin coffee, keffiyeh freegan pitchfork chillwave bushwick typewriter cred squid. Cosby sweater banksy mixtape four loko portland whatever, pinterest master cleanse carles stumptown. Hella tumblr wolf gluten-free. Umami four loko food truck, ennui photo booth pop-up lo-fi Austin. Carles mixtape whatever, art party biodiesel freegan narwhal flexitarian lo-fi photo booth bicycle rights keytar banh mi.

+1 PBR fixie viral pickled whatever, small batch master cleanse synth street art cosby sweater VHS. Godard iphone beard, synth photo booth portland stumptown cliche kogi carles. Lo-fi fixie godard, irony gastropub direct trade viral pickled DIY vegan readymade pinterest seitan bespoke mcsweeney's. Keffiyeh brooklyn stumptown leggings put a bird on it mustache, pop-up thundercats direct trade semiotics whatever. American apparel hoodie synth, banh mi bicycle rights food truck direct trade photo booth pour-over. Raw denim irony squid, iphone cardigan DIY post-ironic. Bespoke wes anderson pitchfork, odd future locavore thundercats fap irony master cleanse mumblecore ethical polaroid squid.

Organic forage etsy 8-bit, banh mi master cleanse cardigan mustache portland ethnic dreamcatcher. Aesthetic cliche typewriter +1 gastropub. Chambray swag high life, Austin sartorial +1 next level hoodie organic mustache. Ethical cred trust fund semiotics hoodie farm-to-table. Viral mixtape you probably haven't heard of them, fap cliche vegan typewriter. Helvetica keffiyeh pop-up chambray master cleanse. Farm-to-table before they sold out direct trade, american apparel PBR selvage master cleanse banh mi carles butcher tofu etsy.

Pour-over gentrify Austin tofu etsy. Keytar fanny pack messenger bag +1 flexitarian pickled. Occupy terry richardson wolf fap godard echo park. Lomo Austin occupy keytar. Tumblr lomo shoreditch, kale chips marfa raw denim salvia biodiesel scenester. Godard odd future polaroid occupy, hoodie single-origin coffee banksy +1 brunch chillwave gluten-free tumblr helvetica fanny pack. Mustache truffaut american apparel, cray keytar ethical twee quinoa.

Echo park DIY post-ironic Austin, hella fanny pack vegan craft beer sartorial ethical farm-to-table. Mcsweeney's brunch lomo, mumblecore narwhal gentrify +1 letterpress polaroid yr wolf vice etsy VHS. +1 craft beer kale chips messenger bag single-origin coffee, keffiyeh freegan pitchfork chillwave bushwick typewriter cred squid. Cosby sweater banksy mixtape four loko portland whatever, pinterest master cleanse carles stumptown. Hella tumblr wolf gluten-free. Umami four loko food truck, ennui photo booth pop-up lo-fi Austin. Carles mixtape whatever, art party biodiesel freegan narwhal flexitarian lo-fi photo booth bicycle rights keytar banh mi.

Full header demo

Full set of header options can be seen at on the Header Demo Page.

Dialog

Dialog Link

Dropdown2

It's new! It's improved! It drops down! eg. Basic Dropdown or maybe one with Checkboxes/Radios ...for lots more options, see the docs on DAC.

Dropdown (deprecated)

It's old! It's busted! It usually drops down! You should not add more of these anywhere...but you might still have these in your product so here it is.

Inline-dialog

Click Link

To avoid XHR annoyances use it this way in the flat pack:

AJS.InlineDialog(AJS.$("#popupLink"), 1, 
    function(content, trigger, showPopup) {
        content.css({"padding":"16px"}).html('<p>Appended content.</p>');
        showPopup();
        return false;
    }
);

Messages - Inserted with JS

Images still done as images, but could easily be data URIs

Messages - Inserted with HTML

This is a generic message.

It is pitch black. You are likely to be eaten by a grue.

It's dangerous to go alone

Here, take this.

Woah! Something went wrong!

The savepoints are really far apart in this level.

Thank you Mario!

But the Princess is in another castle.

We'll give you a hint to avoid that problem next time.

But first you have to catch the Help Cat with that stupid Wiimote.

tabtastic

This is Tab 1

Catapultam habeo. Nisi pecuniam omnem mihi dabis, ad caput tuum saxum immane mittam.

Sentio aliquos togatos contra me conspirare.

Quantum materiae materietur marmota monax si marmota monax materiam possit materiari?

This is Tab 2

Catapultam habeo. Nisi pecuniam omnem mihi dabis, ad caput tuum saxum immane mittam.

Sentio aliquos togatos contra me conspirare.

Quantum materiae materietur marmota monax si marmota monax materiam possit materiari?

This is Tab 3

Catapultam habeo. Nisi pecuniam omnem mihi dabis, ad caput tuum saxum immane mittam.

Sentio aliquos togatos contra me conspirare.

Quantum materiae materietur marmota monax si marmota monax materiam possit materiari?

This is Tab 4

Catapultam habeo. Nisi pecuniam omnem mihi dabis, ad caput tuum saxum immane mittam.

Sentio aliquos togatos contra me conspirare.

Quantum materiae materietur marmota monax si marmota monax materiam possit materiari?

This is Tab 1

Catapultam habeo. Nisi pecuniam omnem mihi dabis, ad caput tuum saxum immane mittam.

Sentio aliquos togatos contra me conspirare.

Quantum materiae materietur marmota monax si marmota monax materiam possit materiari?

Catapultam habeo. Nisi pecuniam omnem mihi dabis, ad caput tuum saxum immane mittam.

Sentio aliquos togatos contra me conspirare.

Quantum materiae materietur marmota monax si marmota monax materiam possit materiari?

Catapultam habeo. Nisi pecuniam omnem mihi dabis, ad caput tuum saxum immane mittam.

Sentio aliquos togatos contra me conspirare.

Quantum materiae materietur marmota monax si marmota monax materiam possit materiari?

This is Tab 2

Catapultam habeo. Nisi pecuniam omnem mihi dabis, ad caput tuum saxum immane mittam.

Sentio aliquos togatos contra me conspirare.

Quantum materiae materietur marmota monax si marmota monax materiam possit materiari?

Catapultam habeo. Nisi pecuniam omnem mihi dabis, ad caput tuum saxum immane mittam.

Sentio aliquos togatos contra me conspirare.

Quantum materiae materietur marmota monax si marmota monax materiam possit materiari?

Catapultam habeo. Nisi pecuniam omnem mihi dabis, ad caput tuum saxum immane mittam.

Sentio aliquos togatos contra me conspirare.

Quantum materiae materietur marmota monax si marmota monax materiam possit materiari?

This is Tab 3

Catapultam habeo. Nisi pecuniam omnem mihi dabis, ad caput tuum saxum immane mittam.

Sentio aliquos togatos contra me conspirare.

Quantum materiae materietur marmota monax si marmota monax materiam possit materiari?

Catapultam habeo. Nisi pecuniam omnem mihi dabis, ad caput tuum saxum immane mittam.

Sentio aliquos togatos contra me conspirare.

Quantum materiae materietur marmota monax si marmota monax materiam possit materiari?

Catapultam habeo. Nisi pecuniam omnem mihi dabis, ad caput tuum saxum immane mittam.

Sentio aliquos togatos contra me conspirare.

Quantum materiae materietur marmota monax si marmota monax materiam possit materiari?

This is Tab 4

Catapultam habeo. Nisi pecuniam omnem mihi dabis, ad caput tuum saxum immane mittam.

Sentio aliquos togatos contra me conspirare.

Quantum materiae materietur marmota monax si marmota monax materiam possit materiari?

Catapultam habeo. Nisi pecuniam omnem mihi dabis, ad caput tuum saxum immane mittam.

Sentio aliquos togatos contra me conspirare.

Quantum materiae materietur marmota monax si marmota monax materiam possit materiari?

Catapultam habeo. Nisi pecuniam omnem mihi dabis, ad caput tuum saxum immane mittam.

Sentio aliquos togatos contra me conspirare.

Quantum materiae materietur marmota monax si marmota monax materiam possit materiari?

Group + Item

Item
Item
Item
Item
Split group - first item aligned left.
Split group - second item aligned right.
Trio group - first item aligned left.
Trio group - second item aligned centre.
Trio group - third item aligned right.

This is a generic message.

It is pitch black. You are likely to be eaten by a grue.

It's dangerous to go alone

Here, take this.

Woah! Something went wrong!

The savepoints are really far apart in this level.

Thank you Mario!

But the Princess is in another castle.

We'll give you a hint to avoid that problem next time.

But first you have to catch the Help Cat with that stupid Wiimote.

Name Type Order Action
Default Internal Directory
Corporate LDAP Microsoft Active Directory
Corporate LDAP Microsoft Active Directory
Corporate LDAP Microsoft Active Directory
Contractor Directory Internal Directory

Heading h2

Heading h3

Field Value State

Text Entry
My First Name
Descriptive text here.
My Last Name
Descriptive text here.
my@email.com
Descriptive text here.
Checkboxes View
Radio Buttons

Pre text area

                BAM2573-BAMFUNC-18
                Dependant of BAM2573-HEAD-40
                ** LONG STRING **
                100 passedBAM2573-BAMFUNC-17Dependant of BAM2573-HEAD-262 months ago (06:11 PM, Fri, 15 Aug)
                
                failedAM2573-BAMFUNC-16Dependant of BAM2573-HEAD-252 months ago (06:08 PM, Thu, 14 Aug)
                
                30 minutes3 out of 100 failedAM2573-BAMFUNC-16Dependant of BAM2573-HEAD-252 months ago (06:08 PM, Thu, 14 Aug)
                        

Paragraph: span text, in a paragraph the inline-text class is not required Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum