A single layer of a single page of an AMP story, which allows linking to other content.
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
<amp-story-cta-layer> component allows the usage of
<button> elements inside an
- If specified, the
<amp-story-cta-layer>element must be the last layer within an
<amp-story-page>. As a result, effectively every
<amp-story-page>can have exactly one or exactly zero of the
- Positioning and sizing of this layer cannot be controlled. It is always 100% width of the page, 20% height of the page, and aligned to the bottom of the page.
amp-story-page-attachment(amp-story-page-attachment.md) must be the last child tag of an
amp-story-page. Because of this, you may include neither or one, but not both.
<amp-story-page id="vertical-template-thirds"> <amp-story-grid-layer template="thirds"> <div class="content" grid-area="upper-third">Paragraph 1</div> <div class="content" grid-area="middle-third">Paragraph 2</div> <div class="content" grid-area="lower-third">Paragraph 3</div> </amp-story-grid-layer> <amp-story-cta-layer> <a href="https://www.ampproject.org" class="button">Outlink here!</a> </amp-story-cta-layer> </amp-story-page>
amp-story-cta-layer allows mostly the same descendants as
amp-story-grid-layer, and additionally allows
For an updated list of supported children, be sure to take a look at the amp-story-cta-layer-allowed-descendants field in the validation rules.
You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.Go to Stack Overflow Found a bug or missing a feature?
The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.Go to GitHub