The AMP HTML library provides components that are classified as:
- built-in: Components that are included in the base library, such as
amp-img
andamp-pixel
. - extended: Extensions to the base library that must be explicitly included in the document as custom elements (e.g.,
<script async custom-element="amp-audio" ...
). - experimental: Components that are released but are not yet ready for wide use.
The list of available components are listed below in related categories.
Ads and analytics
Component | Description |
---|---|
amp-ad |
A container to display an ad. |
amp-ad-exit |
Provides configurable behavior for ad exits for A4A (AMP for Ads). |
amp-analytics |
Captures analytics data from an AMP document. |
amp-auto-ads |
Dynamically injects ads into an AMP page by using a remotely-served configuration file. |
amp-call-tracking |
Dynamically replaces a phone number in a hyperlink to enable call tracking. |
amp-experiment |
Can be used to conduct user experience experiments on an AMP document. |
amp-pixel |
A tracking pixel to count page views. |
amp-sticky-ad |
Provides a way to display and stick ad content at the bottom of the page. |
Dynamic content
Component | Description |
---|---|
amp-access-laterpay |
Allows publishers to easily integrate with the LaterPay micropayments platform. |
amp-access |
Provides an AMP paywall and subscription support. |
amp-bind |
Allows elements to mutate in response to user actions or data changes via data binding and simple JS-like expressions. |
amp-byside-content |
Displays dynamic content from the BySide service. |
amp-consent |
Provides the ability to collect and store a user's consent through a UI control. |
amp-date-picker |
Provides a calendar widget to select dates. |
amp-form |
Provides form support. |
amp-geo |
Provides an approximate country-level geolocation interface. |
amp-gist |
Displays a GitHub Gist. |
amp-install-serviceworker |
Installs a ServiceWorker. |
amp-list |
Dynamically downloads data and creates list items using a template. |
amp-live-list |
Provides a way to display and update content live. |
amp-mustache |
Allows rendering of Mustache.js templates. |
amp-selector |
Represents a control that presents a menu of options and lets the user choose from it. |
amp-user-notification |
Displays a dismissable notification to the user. |
amp-web-push |
Allows users to subscribe to web push notifications. |
Layout
Component | Description |
---|---|
amp-accordion |
Provides a way for viewers to have a glance at the outline of the content and jump to a section of their choice at will. |
amp-app-banner |
A wrapper and minimal UI for a cross-platform, fixed-position banner showing a call-to-action to install an app. |
amp-carousel |
Displays multiple similar pieces of content along a horizontal axis. |
amp-fx-flying-carpet |
Wraps its children in a unique full-screen scrolling container allowing you to display a full-screen ad without taking up the entire viewport. |
amp-fx-collection |
Provides a collection of preset visual effects, such as parallax. |
amp-iframe |
Displays an iframe. |
amp-image-lightbox |
Provides a lightbox effect for a specified image. |
amp-layout |
Provides a generic, multi-purpose container element that brings AMP's powerful layouts to any element. |
amp-lightbox |
Displays elements in a full-viewport “lightbox” modal. |
amp-position-observer |
Monitors position of an element within the viewport as a user scrolls and dispatches events that can be used with other components. |
amp-sidebar |
Provides a way to display meta content intended for temporary access such as navigation, links, buttons, menus. |
Media
Component | Description |
---|---|
amp-3q-player |
Embeds videos from 3Q SDN. |
amp-anim |
Manages an animated image, typically a GIF. |
amp-apester-media |
Displays an Apester smart unit. |
amp-audio |
Replaces the HTML5 audio tag. |
amp-bodymovin-animation |
Displays an AirBnB Bodymovin animation player, which renders an animation from JSON generated by Adobe After Effects. |
amp-brid-player |
Displays a Brid.tv player. |
amp-brightcove |
Displays a Brightcove Video Cloud or Perform player. |
amp-dailymotion |
Displays a Dailymotion video. |
amp-google-vrview-image |
Displays a VR image. |
amp-hulu |
Displays a simple embedded Hulu video. |
amp-ima-video |
Embeds a video player for instream video ads that are integrated with the IMA SDK. |
amp-img |
Replaces the HTML5 img tag. |
amp-imgur |
Displays an Imgur post. |
amp-izlesene |
Displays an Izlesene video. |
amp-jwplayer |
Displays a cloud-hosted JW Player. |
amp-kaltura-player |
Displays the Kaltura Player as used in Kaltura's Video Platform. |
amp-nexxtv-player |
Displays a media stream from the nexxOMNIA platform. |
amp-o2-player |
Displays an AOL O2Player. |
amp-ooyala-player |
Displays an Ooyala video. |
amp-playbuzz |
Displays any Playbuzz content (e.g., list, poll, etc.). |
amp-reach-player |
Displays a Beachfront Reach video player. |
amp-soundcloud |
Displays a Soundcloud clip. |
amp-springboard-player |
Displays a Springboard Platform video player. |
amp-video |
Replaces the HTML5 video tag. |
amp-vimeo |
Displays a Vimeo video. |
amp-wistia-player |
Displays a Wistia video. |
amp-youtube |
Displays a YouTube video. |
Presentation
Component | Description |
---|---|
amp-animation |
Defines and displays an animation. |
amp-dynamic-css-classes |
Adds several dynamic CSS class names onto the HTML element. |
amp-fit-text |
Expands or shrinks font size to fit the content within the space given. |
amp-font |
Triggers and monitors the loading of custom fonts. |
amp-mathml |
Displays a MathML formula. |
amp-story |
A rich, visual storytelling format. |
amp-timeago |
Provides fuzzy timestamps by formatting dates as "time ago" (for example, 3 hours ago). |
amp-viz-vega |
Displays visualizations created by using Vega visualization grammar. |
Social
Component | Description |
---|---|
amp-beopinion |
Embeds BeOpinion content. |
amp-addthis |
Displays an AddThis website tools embed. |
amp-facebook-comments |
Embeds the Facebook comments plugin. |
amp-facebook-like |
Embeds the Facebook like button plugin. |
amp-facebook-page |
Embeds the Facebook page plugin. |
amp-facebook |
Displays a Facebook post or video. |
amp-gfycat |
Displays a Gfycat video GIF. |
amp-instagram |
Displays an Instagram embed. |
amp-pinterest |
Displays a Pinterest widget or Pin It button. |
amp-reddit |
Displays a Reddit comment or post embed. |
amp-riddle-quiz |
Displays Riddle content (e.g., quiz, list, poll, etc.). |
amp-social-share |
Displays a social share button. |
amp-twitter |
Displays a Twitter tweet. |
amp-vine |
Displays a Vine simple embed. |
amp-vk |
Embeds a VK post or poll widget. |