<!-- This is div is required -->
<div id="complete_example"></div>

<!-- place your example between these tags, with correct indentation and whitespace (by default, this serves as user-facing HTML example). -->
<div id="e_example"><div class="palm-page-header">
	<div class="palm-page-header-wrapper">                        
		<div class="title left">
			Some truncating text that extends beyond the header's width</div>      
	</div>
</div>

<div class="palm-page-header multi-line">
	<div class="palm-page-header-wrapper">
	    <div class="title left">
			This is a multi-line header without an icon</div>                         
	</div>
</div>

<div class="palm-page-header multi-line">
	<div class="palm-page-header-wrapper">
	    <div class="title left un-capitalize">
			The same, but with a subtitle and without capitalization</div>                         
		<div class="subtitle">
			These page headers are quite flexible and work in any orientation.</div>
	</div>
</div>

<div class="palm-page-header multi-line">
	<div class="palm-page-header-wrapper">
	    <div class="icon"></div>                         
		<div class="title">
			This is a multi-line page header with default icon</div>      
	</div>
</div>

<div class="palm-page-header">
	<div class="palm-page-header-wrapper">
	    <div class="icon palm-account-icon local"></div>                         
		<div class="title">
			Single line with custom icon and truncating text</div>      
	</div>
</div>      

<div class="palm-page-header">
	<div class="palm-page-header-wrapper">
	    <div class="icon palm-account-icon facebook"></div>                         
		<div class="title">
			Add an account</div>      
	</div>
</div>
</div>

<!-- place additional context, explanation or info between these tags -->
<div id="e_about">
	
</div>

<!-- leave this blank for default html (above), or place code here to override -->
<div id="e_html">
	
</div>

<!-- list developer-facing css pertinent to this example, between these tags -->
<div id="e_css">

</div>