<div id="" class="Page " style="" on="tap:AMP.setState({navState: {openMenu: false}})">
<main id="content" class="Main " style="">
<section id="" class="section " style=" ">
<div class="row _centeritems" style="">
<div class="col _span-6 _pad-right" style="">
<h2 class=" " style="">
Hey What’s Up?
</h2>
<p id="" class="">
I am content within a Page molecule. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum.
</p>
<p id="" class="">
<a href="https://sproutsocial.com/features/social-media-publishing" class="button _secondary ">
More On Publishing
</a>
</p>
</div>
<div class="col _span-6 " style="">
<div class="responsiveimage-wrapper ">
<img id="" class="responsiveimage _right" alt="" style="" srcset="https://media.sproutsocial.com/uploads/localization/en/google-integrations-collaborate-manage2.png, https://media.sproutsocial.com/uploads/localization/en/google-integrations-collaborate-manage2@2x.png 2x"
/>
</div>
</div>
</div>
</section>
</main>
</div>
<div
id="{{id}}"
class="Page {{modifier}}"
style="{{style}}"
on="{{on}}"
{{#if tabindex}}tabindex="{{tabindex}}"{{/if}}
{{#if role}}role="{{role}}"{{/if}}
>
{{> @children}}
</div>
{
"id": null,
"modifier": null,
"style": null,
"on": "tap:AMP.setState({navState: {openMenu: false}})",
"tabindex": null,
"role": null,
"children": [
{
"component": "main",
"context": {
"id": "content",
"children": [
{
"component": "section",
"context": {
"children": [
{
"component": "row",
"context": {
"modifier": "_centeritems",
"children": [
{
"component": "column",
"context": {
"span": 6,
"modifier": "_pad-right",
"children": [
{
"component": "heading",
"context": {
"level": 2,
"text": "Hey What’s Up?"
}
},
{
"component": "p",
"context": {
"text": "I am content within a Page molecule. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum."
}
},
{
"component": "p",
"context": {
"children": [
{
"component": "button",
"context": {
"modifier": "_secondary",
"href": "https://sproutsocial.com/features/social-media-publishing",
"text": "More On Publishing"
}
}
]
}
}
]
}
},
{
"component": "column",
"context": {
"span": 6,
"children": [
{
"component": "image",
"context": {
"responsive": true,
"modifier": "_right",
"src": "https://media.sproutsocial.com/uploads/localization/en/google-integrations-collaborate-manage2.png",
"src2x": "https://media.sproutsocial.com/uploads/localization/en/google-integrations-collaborate-manage2@2x.png"
}
}
]
}
}
]
}
}
]
}
}
]
}
}
]
}
Page is a top-level organism that contains all of the <main>
content of a page.
on
attribute should contain the AMP event to close
the main navigation.Page
should be a <main />
element.AMPSiteHeader
and SiteFooter
are now loaded outside of Tailor.Page
should always follow a AMPSiteHeader
. Typical markup should look like:
`
<footer class="SiteFooter"></footer>
`