An AMP Stories code example showing how to implement a sequence of pages
An AMP Tech Guide
This page shows crucial snippets of the code used on AMP Stories page that shows a sequence of five pages of content.
Required tags in the document head:
<!-- Required tags: Charset, canonical link, and viewport -->
<meta charset="utf-8">
<link rel="canonical" href="https://www.stonetemple.com/amp/stories/amp-stories-five-page-sequence-code.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<!-- Required: The AMP project default CSS and noscript -->
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<!-- Required: The AMP Project JS -->
<script async src="https://cdn.ampproject.org/v0.js"></script>
The custom CSS is put inside a style tag with the attribute name amp-custom.
<!-- This is the custom CSS used for this particular AMP story -->
<style amp-custom>
amp-story {
font-family: 'Oswald',verdana, arial,sans-serif;
color: #fff;
}
amp-story-page {
background-color: #990033;
}
h1 {
font-weight: bold;
font-size: 2.875em;
font-weight: bold;
line-height: 1.174;
color: #fff;
}
p {
font-weight: normal;
font-size: 1.1em;
line-height: 1.5em;
color: #fff;
}
q {
font-weight: 300;
font-size: 1.1em;
}
ul li {
font-size: 1.1em;
line-height: 1.5em;
}
a {
color: silver;
}
amp-story-grid-layer.bottom {
align-content:end;
}
amp-story-grid-layer.noedge {
padding: 0px;
}
amp-story-grid-layer.center-text {
align-content: center;
}
.wrapper {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
}
.banner-text {
text-align: center;
line-height: 2em;
}
.{
background-color: #fff;
}
</style>
AMP components used in this example (the AMP story component):
<!-- This is the AMP component that enable functionality used on this page (AMP-story). --> <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>
All of the preceding code blocks should be put in the document head. The following code blocks should reside in the document body.
This code helps make a Story page.
<!-- AMP-story is a required element. There can be only one AMP-story in an AMP-story file -->
<!-- The bookend-config-src contains a JSON string that populates the last view, including links to other pages as well as social sharing links-->
<amp-story standalone title="Difference between a URL, a web page and a link" publisher="publisher" publisher-logo-src="https://www.stonetemple.com/amp/stories/images/publisher.png" poster-portrait-src="https://www.stonetemple.com/amp/stories/images/publisher-portrait.png" bookend-config-src="https://www.stonetemple.com/amp/stories/upl.json">
<!-- amp-story-page is an element that is used to denote a page with in the story. -->
<amp-story-page id="cover">
<amp-story-grid-layer template="vertical">
<h1>What is the difference between a URL, a web page and a link?</h1>
<p>The words URL, web page and link are often used interchangeably, but what do they actually mean?</p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="page1">
<amp-story-grid-layer template="vertical">
<h1>URL</h1>
<p>The URL is the location of a file on the web. It can be a web page, an image, a spreadsheet, a stylesheet or many any other kinds of files.</p>
<p>The URL of this file is https://www.stonetemple.com/amp/stories/url-page-link.html</p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="page2">
<amp-story-grid-layer template="vertical">
<h1>Web page</h1>
<p>A web page is an HTML document. It can contain text, images, video or audio. Web pages often make use of stylesheets and JavaScript for improved user experience and functionality. This document is a web page.</p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="page3">
<amp-story-grid-layer template="vertical">
<h1>Link</h1>
<p>A link is a mechanism for navigating from one document to another. It points to a URL. Many types of documents can contain links, for example web pages, word processor documents, spreadsheets, and PDFs. Many others cannot: Plain text files, images, audio. A web page can link to an image but an image can't link to a web page. A link to this document could look like this: <a href="https://www.stonetemple.com/amp/stories/url-page-link.html">What is the difference between a url, a web page and a link?</a></p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="page4">
<amp-story-grid-layer template="vertical">
<h1>In summary</h1>
<ul>
<li>A <strong>URL</strong> is the address (the location) of a specific file on the web.</li>
<li>A <strong>web page</strong> is an HTML document. A web page has a specific URL.</li>
<li>A <strong>link</strong> enables a user to go from one URLto another.</li>
</ul>
</amp-story-grid-layer>
</amp-story-page>
</amp-story>
