AMP

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.

Benötigst du noch Hilfe?

Du hast dieses Dokument mehrmals gelesen, hast aber immer noch Fragen? Vielleicht hatten andere Nutzer das gleiche Problem: Schau doch bei Stack Overflow vorbei und lass dir von ihnen helfen.

Zu Stack Overflow wechseln
Möchtest du einen Bug oder ein fehlendes Feature melden?

Das AMP Projekt ist auf deine Teilnahme und deine Beiträge angewiesen! Wir hoffen natürlich, dass du dich aktiv an unserer Open Source Community beteiligen wirst. Aber wir freuen uns auch über einmalige Beiträge zu den Themen, die dich besonders interessieren.

Zu GitHub wechseln