AMP

Important: this documentation is not applicable to your currently selected format websites!

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.

Both 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.

Precisa de mais ajuda?

Você já leu este documento várias vezes, mas ainda ficou com dúvidas sem respostas? Talvez outras pessoas pensem da mesma forma. Procure entrar em contato com elas no Stack Overflow.

Ir para o Stack Overflow
Encontrou um bug ou sente falta de um recurso?

O projeto AMP incentiva fortemente sua participação e contribuições! Esperamos que você se torne um participante assíduo de nossa comunidade de código aberto, mas também agradecemos contribuições pontuais para problemas que você tenha particular interesse.

Ir para o GitHub