<div id="cqcanvas">

Adobe CQ - Landing Pages Rules Cheat Sheet

Headings Examples

H1 heading with inline (shorthand) component declaration

<h1 data-cq-component="title">H1 Heading with inline (shorthand) component declaration</h1>

H2 Heading with component declaration attribute in div

<div data-cq-component="title"><h2>H2 Heading with component declaration attribute in div</h2></div>

Text / RTE

A text paragraph expects to be wrapped with p tags

This is single paragraph can be edited with the RTE editor

<p data-cq-component="text">This is single paragraph can be edited with the RTE editor</p>

This is text with a list:

It can be edited with the RTE editor

<div data-cq-component="text"><p>This is text with a list:</p><ul><li>1st</li><li>2nd</li></ul><p>It can be edited with the RTE editor</p></div>

This is pink text.

It can be edited with the RTE editor

<div class="pink" data-cq-component="text"><p>This is pink text.</p><p>It can be edited with the RTE editor</p></div>

Image

<img data-cq-component="image" src="img/product.png" alt="Product Photo" />

<div data-cq-component="image"><img src="img/product.png" alt="Smaller Product Photo" title="Really cool goggles" width="220" height="100" /></div>

Call to actions

A set of components to track visitor activity on the landing page

Link with attribute

<a data-cq-component="clickThroughLink" href="http://www.adobe.com/go/wem">Link with attribute</a>

Click text in the SPAN to visit us

<div>Click <span data-cq-component="clickThroughLink"><a href="http://www.adobe.com/go/wem">text in the SPAN</a></span> to visit us</div>

Link with DIV and preset target

<div data-cq-component="clickThroughLink"><a href="http://www.adobe.com/go/wem" target="_blank">Link with DIV and preset target</a></div>

<a data-cq-component="clickThroughGraphicalLink" href="http://www.adobe.com/go/wem"><img src="img/call-to-action-button.png" title="Button with attribute" /></a>

<div data-cq-component="clickThroughGraphicalLink"><a href="http://www.adobe.com/go/wem"><img src="img/call-to-action-button.png" alt="Button with DIV and attribute" /></a></div>

Paragraph System

Too Cool

That this Just

works and can be edited with various tools

Click here fore more details

<div data-cq-component="parsys">other components</div>

Forms

Extract forms.

<div data-cq-component="leadformgeneration">
	<form method="post" action="#" onsubmit="">
		<label for="emailId">EMAIL ADDRESS</label>
		<input id="emailId" name="emailId" type="email" / >
	</form>
</div>

Target

Targeting and Experiences

Default content. Select this campaign in client context to view other experiences

Content for Over 30

Content for Under 30

<div data-cq-component="target">

	<section data-cq-component="experience" data-cq-experience="default">
		<p data-cq-component="text"Default content. Select this campaign in client context to view other experiences</p>
	</section>

	<section data-cq-component="experience" data-cq-segment="over-30">	
		<p data-cq-component="text"Content for Over 30</p>
	</section>

	<section data-cq-component="experience" data-cq-segment="under-30">
		<p data-cq-component="text"Content for Under 30</p>
	</section>
</div>