jeffrey-over / amp-email-boilerplate

Basic AMP email boilerplate

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

AMP Email boilerplate

Boilerplate

<!doctype html>
<html ⚡4email>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>
  <style amp-custom>
    h1 {
      margin: 1rem;
    }
  </style>
</head>
<body>
  <h1>Hello, I am an AMP EMAIL!</h1>
</body>
</html>

Elements

Dynamic Content

Element Description
<amp-form> Form element. The action-xhr attribute must be used in place of the regular action attribute. Can be used in conjunction with <template type="amp-mustache"> to render a response.
<amp-selector> A multi-select widget for use within a form.
amp-bind and <amp-bind-macro> Simple scripting language in AMP that allows the manipulation of a state machine for interactions between elements. Can also be used to add behavior on certain events.

Note: It is prohibited to bind to [href] or [src]. It is also prohibited to use the AMP.print, AMP.navigateTo and AMP.goBack actions.
<amp-state> <amp-state> is used to define the initial state used by amp-bind.

Note: The src attribute is not currently supported.
<amp-list> Remotely fetches JSON data that will be rendered by an <amp-mustache>.

Note: Binding to the [src] attribute is not allowed. Including user credentials with credentials="include" is also prohibited.
<template type="amp-mustache"> A Mustache template markup to render the results of an amp-list call.

Layout

Element Description
layout attributes Layout behavior is determined by the layout attribute.
<amp-accordion> A UI element that facilitates showing/hiding different sections.
<amp-carousel> A carousel UI component.
<amp-fit-text> A helper component for fitting text within a certain area.
<amp-layout> A container that can have aspect-ratio based responsive layouts.
<amp-sidebar> A sidebar for navigational purposes.
<amp-timeago> Provides a convenient way of rendering timestamps.

Media

Element Description
<amp-img> An AMP component that replaces <img>.

Note: Binding to [src] is not allowed.
<amp-anim> Embeds GIF files.

Note: Binding to [src] is not allowed.

Sandbox

Sources

About

Basic AMP email boilerplate


Languages

Language:HTML 100.0%