Important: this documentation is not applicable to your currently selected format email!
amp-story-cta-layer
Description
A single layer of a single page of an AMP story, which allows linking to other content.
Required Scripts
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
Notice: amp-story-cta-layer is depreciated see I2D issue for details. Use amp-story-page-outlink instead.
Usage
The <amp-story-cta-layer> component allows the usage of <a> and <button> elements inside an <amp-story-page>.
- The
<amp-story-cta-layer>element may not appear on the first story page. - If specified, the
<amp-story-cta-layer>element must be the last layer within an<amp-story-page>. - Every
<amp-story-page>(except the first) can have exactly one or exactly zero of the<amp-story-cta-layer>element. - 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-cta-layer and 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>
Complete example found in the examples directory
Valid children
The amp-story-cta-layer allows mostly the same descendants as amp-story-grid-layer, and additionally allows <a> and <button> tags.
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