The AMP Component Catalogue
The AMP HTML library consists of a basic runtime that brings the core functionalities of AMP to your page. If you want to add additional features you can do so by using one or more of the ready-to-use AMP components. They are classified as:
Extended Extensions to the base library that must be explicitly included in the document as custom elements.
Experimental Components that are released but are not yet ready for wide use.
Highlighted Components
Filter by category
광고-분석
amp-ad-custom
Alternative way to serve valid AMPHTML ads.
amp-ad-exit
Provides configurable behavior for ad exits for AMPHTML ads.
amp-ad
광고를 표시하는 컨테이너입니다.
amp-analytics
AMP 문서에서 애널리틱스 데이터를 캡처합니다.
amp-auto-ads
원격으로 제공되는 구성 파일을 사용하여 AMP 페이지에 동적으로 광고를 삽입합니다.
amp-call-tracking
Dynamically replaces a phone number in a hyperlink to enable call tracking.
amp-experiment
Used to conduct user experience experiments on AMP pages.
amp-pixel
페이지 조회수를 계산하는 추적 픽셀입니다.
amp-social-share
공유 추적 기능을 개발 중입니다.
amp-sticky-ad
Provides a way to display and stick ad content at the bottom of the page.
amp-story-auto-analytics
Automatically generates analytics configs for stories.
동적-콘텐츠
amp-access-laterpay
게시자가 LaterPay 소액결제 플랫폼과 손쉽게 통합할 수 있습니다.
amp-access-poool
Displays a Poool paywall.
amp-access-scroll
Integrates with Scroll membership.
amp-access
AMP 페이월 및 구독 지원을 제공합니다.
amp-action-macro
Creates reusable actions.
amp-autocomplete
Suggests completed results corresponding to the user input as they...
amp-bind
사용자 작업 또는 데이터 변경에 따라 데이터 결합 및 JS와 같은 단순한 식을 통해 요소의 변경을 허용합니다.
amp-byside-content
Displays dynamic content from the BySide service.
amp-consent
Provides the ability to collect and store a user's consent through...
amp-date-picker
Provides a widget to select dates. The date picker can render as...
amp-form
Allows you to create forms to submit input fields in an AMP document.
amp-geo
Provides an approximate country-level geolocation interface.
amp-gist
Creates an iframe and displays a GitHub Gist.
amp-google-document-embed
Displays a document file supported by Google Drive.
amp-inputmask
Provides input masking capabilities to inputs in AMP forms
amp-install-serviceworker
Installs a ServiceWorker for the current page.
amp-link-rewriter
Allows publishers to rewrite URL based on configurable pattern
amp-list
동적으로 데이터를 다운로드하고 템플릿을 사용하여 목록 항목을 생성합니다.
amp-live-list
Provides a way to display and update content live.
amp-minute-media-player
Displays a Minute Media player.
amp-mraid
Supports interaction with the MRAID host API within Ad webviews in...
amp-mustache
Mustache.js 템플릿의 렌더링을 허용합니다.
amp-next-page
Infinite scrolling experience for document-level page recommendations.
amp-recaptcha-input
Appends a reCAPTCHA v3 token to AMP form submissions.
amp-render
Renders remote or inline data using a template.
amp-script
Runs custom JavaScript in a Web Worker.
amp-selector
사용자가 선택할 수 있는 옵션 메뉴를 표시하는 컨트롤을 나타냅니다.
amp-smartlinks
Run Narrativ's Linkmate process inside your AMP page
amp-story-interactive
A rich set of interactive experiences for stories, including...
amp-subscriptions-google
Implements subscription-style access protocol for Subscribe with Google.
amp-subscriptions
Implements subscription-style access protocol.
amp-user-notification
Displays a dismissable notification to the user.
amp-video-docking
Functionality for videos that minimize ("dock") to a corner or a...
amp-web-push
Allows users to subscribe to web push notifications.
레이아웃
amp-accordion
조회 사용자가 콘텐츠의 개요를 한눈에 파악하고 원하는 섹션으로 자유롭게 이동할 수 있습니다.
amp-app-banner
A wrapper and minimal UI for a cross-platform, fixed-position...
amp-base-carousel
Displays multiple similar pieces of content along a horizontal...
amp-carousel
가로축을 따라 여러 개의 유사한 콘텐츠를 표시합니다.
amp-fx-collection
Provides a collection of preset visual effects, such as parallax.
amp-fx-flying-carpet
Wraps its children in a unique full-screen scrolling container...
amp-iframe
iframe을 표시합니다.
amp-image-lightbox
Provides a lightbox effect for a specified image.
amp-image-slider
A slider to compare two images.
amp-inline-gallery
Displays multiple similar pieces of content along a horizontal...
amp-layout
The amp-layout` component allows you to apply aspect-ratio based...
amp-lightbox-gallery
Provides a "lightbox” experience. Upon user interaction, a UI...
amp-lightbox
전체 표시 영역 '라이트박스' 모달에 요소를 표시합니다.
amp-mega-menu
Displays top-level navigational content inside expandable containers.
amp-nested-menu
Displays a drilldown menu with arbitrary levels of nested submenus.
amp-orientation-observer
Monitors the orientation of an element within the viewport as a...
amp-position-observer
Monitors the position of an element within the viewport as a user...
amp-sidebar
탐색, 링크, 버튼, 메뉴 등 임시 액세스용 메타 콘텐츠를 표시하는 방법을 제공합니다.
amp-stream-gallery
Displays multiple similar pieces of content at a time along a...
미디어
amp-3d-gltf
GL 전송 양식(glTF) 3D 모델을 표시합니다
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.
amp-brid-player
Displays a Brid.tv player.
amp-brightcove
Displays a Brightcove Video Cloud or Perform player.
amp-connatix-player
Displays a cloud-hosted Connatix Player.
amp-dailymotion
Displays a Dailymotion video.
amp-delight-player
The amp-delight-player element displays a cloud-hosted Delight Player.
amp-embedly-card
Displays an Embedly card.
amp-google-read-aloud-player
Embeds the Google Read Aloud Player.
amp-hulu
Displays an embedded Hulu video.
amp-ima-video
Embeds a video player for instream video ads that are integrated...
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-megaphone
Displays a Megaphone.fm podcast episode or playlist.
amp-mowplayer
Displays a cloud-hosted Mow Player.
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 item content (e.g., list, poll, etc.).
amp-powr-player
An amp-powr-player component displays the Powr Player as...
amp-reach-player
Displays a Beachfront Reach video player.
amp-skimlinks
Run skimlinks inside your AMP page.
amp-soundcloud
Displays a Soundcloud clip.
amp-springboard-player
Displays a Springboard Platform video player.
amp-story-360
Embeds 360 images and videos, explorable by gyroscope or...
amp-story-panning-media
Transition an image's position and zoom between pages.
amp-video-iframe
Embeds an iframe containing a video player.
amp-video
HTML5 동영상 태그를 대체합니다.
amp-vimeo
Displays a Vimeo video.
amp-viqeo-player
Displays a Viqeo video player.
amp-wistia-player
Displays a Wistia video.
amp-yotpo
Embeds a Yotpo on-site widget.
amp-youtube
YouTube 동영상을 표시합니다.
프레젠테이션
amp-access-fewcents
Allows publishers to integrate with the Fewcents micropayments platform.
amp-animation
애니메이션을 정의하고 표시합니다.
amp-date-countdown
Displays a countdown sequence to a specified date.
amp-date-display
The amp-date-display component displays time data that you can...
amp-dynamic-css-classes
Adds several dynamic CSS class names onto the <body> element.
amp-fit-text
Expands or shrinks font size to fit the content within the space given.
amp-font
Trigger and monitor the loading of custom fonts on AMP pages.
amp-mathml
Displays a MathML formula.
amp-pan-zoom
Provides zooming and panning for arbitrary content.
amp-slikeplayer
Displays a cloud-hosted Slike Player.
amp-story-animation
A component for configuring custom animations in amp-story.
amp-story-audio-sticker
A sticker for users to click and unmute the story.
amp-story-auto-ads
Dynamically inserts ads into a Story.
amp-story-captions
Custom video captions rendering.
amp-story-cta-layer
A single layer of a single page of an AMP story, which allows...
amp-story-grid-layer
A single layer of a single page of an AMP story that positions its...
amp-story-page-outlink
A CTA button for opening external links with one tap in AMP story pages.
amp-story-page
A single screen of an AMP story.
amp-story-player
A player for embedding and playing your favorite stories in your...
amp-story-shopping
A configurable, templated shopping experience in AMP story pages.
amp-story-subscriptions
A configurable, templated subscriptions experience in AMP story pages.
amp-story
A rich, visual storytelling format.
amp-timeago
Provides fuzzy timestamps by formatting dates as time ago (for...
amp-truncate-text
Truncates text with an ellipsis, optionally showing an overflow element.
amp-wordpress-embed
Embeds a WordPress post.
소셜