Do you build things with AMP? Fill out the AMP Developer Survey!
AMP

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>

Usage

The <amp-story-cta-layer> component allows the usage of <a> and <button> elements inside an <amp-story-page>.

  • 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 <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-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>

CTA Layer

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.

需要更多帮助?

您多次阅读的资料未能涵盖您的所有问题?也许其他人也这么觉得 在 Stack Overflow 上与他们取得联系。

前往 Stack Overflow
找到一个 bug 或者缺失某项功能?

AMP 项目强烈鼓励您参与其中并作出贡献!我们希望您能成为我们开源社区的持续参与者,但我们也欢迎您对热衷问题做出单次贡献。

前往 GitHub