Page

<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

Page is a top-level organism that contains all of the <main> content of a page.

Best Practices

  • This organism should only be used as top-level layout.
  • In most cases the default on attribute should contain the AMP event to close the main navigation.
  • The only child of Page should be a <main /> element.
  • When using in Tailor, this will generally be the top-most element in the Tailor canvas. The AMPSiteHeader and SiteFooter are now loaded outside of Tailor.
  • Page should always follow a AMPSiteHeader. Typical markup should look like: `

    <amp-sidebar…>

<footer class="SiteFooter"></footer>

`