CINXE.COM

<!doctype html><html amp lang="en" i-amphtml-binding i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><link rel="preload" href="/static/fonts/poppins-v5-latin-700.woff2" as="font" crossorigin><link rel="preload" href="/static/fonts/noto-sans-v7-latin-700.woff2" as="font" crossorigin><meta name="theme-color" content="#005af0"><meta name="description" content="This sample showcases how to build a product page in AMP HTML."><meta name="twitter:card" content="summary_large_image"><meta name="twitter:description" content="This sample showcases how to build a product page in AMP HTML."><meta name="twitter:title" content="Example: Product Page"><meta name="twitter:creator" content="@ampproject"><meta name="twitter:site" content="@ampproject"><meta name="twitter:image" content="https://amp.dev/static/img/sharing/docs-example-600x314.png"><meta property="og:title" content="Example: Product Page"><meta property="og:url" content="https://amp.dev/documentation/examples/e-commerce/product_page/"><meta property="og:image" content="https://amp.dev/static/img/sharing/docs-example-600x314.png"><meta property="og:image:width" content="600"><meta property="og:image:height" content="314"><meta name="supported-amp-formats" content="websites"><meta name="page-locale" content="en,de,fr,ar,es,it,id,ja,ko,pt_br,ru,tr,zh_cn,pl,vi"><meta http-equiv="origin-trial" content="AviuuiVhVdQ3GpVtxSpyMT+XsL/qGGYmyiyLvYSKPL3rRDLipe/ard5x+DXVlrATtolwX75VtpSKc9IEzLDd4AkAAABmeyJvcmlnaW4iOiJodHRwczovL2FtcC5kZXY6NDQzIiwiZmVhdHVyZSI6IkV4cGVyaW1lbnRhbEF1dG9wbGF5RHluYW1pY0RlbGVnYXRpb24iLCJleHBpcnkiOjE1NzA1Nzg0NDF9"><meta name="amp-experiment-token" content="HfmyLgNLmblRg3Alqy164Vywr"><style amp-runtime i-amphtml-version="012406131415000">html{overflow-x:hidden!important}html.i-amphtml-fie{height:100%!important;width:100%!important}html:not([amp4ads]),html:not([amp4ads]) body{height:auto!important}html:not([amp4ads]) body{margin:0!important}body{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y pinch-zoom;touch-action:pan-y pinch-zoom}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}#i-amphtml-wrapper+body{visibility:visible}#i-amphtml-wrapper+body .i-amphtml-lightbox-element,#i-amphtml-wrapper+body[i-amphtml-lightbox]{visibility:hidden}#i-amphtml-wrapper+body[i-amphtml-lightbox] .i-amphtml-lightbox-element{visibility:visible}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}amp-instagram{padding:54px 0px 0px!important;background-color:#fff}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}amp-experiment,amp-live-list>[update]{display:none}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list [fetch-error],amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-list[diffable] div[role=list]{display:block}amp-story-page,amp-story[standalone]{min-height:1px!important;display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#000!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .amp-active>div,amp-story .i-amphtml-loader-background{display:none!important}amp-story-page:not(:first-of-type):not([distance]):not([active]){transform:translateY(1000vh)!important}amp-autocomplete{position:relative!important;display:inline-block!important}amp-autocomplete>input,amp-autocomplete>textarea{padding:0.5rem;border:1px solid rgba(0,0,0,.33)}.i-amphtml-autocomplete-results,amp-autocomplete>input,amp-autocomplete>textarea{font-size:1rem;line-height:1.5rem}[amp-fx^=fly-in]{visibility:hidden}amp-script[nodom],amp-script[sandboxed]{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden} /*# sourceURL=/css/ampdoc.css*/[hidden]{display:none!important}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;pointer-events:none}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][heights]:not([layout]):not(.i-amphtml-layout-responsive),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic,[layout=intrinsic][width][height]:not(.i-amphtml-layout-intrinsic){display:inline-block;position:relative;max-width:100%}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]:not(.i-amphtml-layout-fixed-height){display:block;position:relative}.i-amphtml-layout-fill,.i-amphtml-layout-fill.i-amphtml-notbuilt,[layout=fill]:not(.i-amphtml-layout-fill),body noscript>*{display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}body noscript>*{position:absolute!important;width:100%;height:100%;z-index:2}body noscript{display:inline!important}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}@supports (aspect-ratio:1/1){i-amphtml-sizer.i-amphtml-disable-ar{display:none!important}}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*,[width][height][heights]:not([layout]):not(.i-amphtml-element)>*,[width][height][sizes]:not([layout]):not(.i-amphtml-element)>*{display:none}amp-img:not(.i-amphtml-element)[i-amphtml-ssr]>img.i-amphtml-fill-content{display:block}.i-amphtml-notbuilt:not(.i-amphtml-layout-container),[layout]:not([layout=container]):not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element){color:transparent!important;line-height:0!important}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder],[width][height][heights]:not([layout]):not(.i-amphtml-element)>[placeholder],[width][height][sizes]:not([layout]):not(.i-amphtml-element)>[placeholder]{display:block;line-height:normal}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}amp-img[i-amphtml-ssr]:not(.i-amphtml-element)>[placeholder]{z-index:auto}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden;display:initial;line-height:normal}.i-amphtml-layout-size-defined>[overflow]{position:absolute}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-analytics,amp-auto-ads,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}amp-story{visibility:hidden!important}html.i-amphtml-fie>amp-analytics{position:initial!important}[visible-when-invalid]:not(.visible),form [submit-error],form [submit-success],form [submitting]{display:none}amp-accordion{display:block!important}@media (min-width:1px){:where(amp-accordion>section)>:first-child{margin:0;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}:where(amp-accordion>section)>:last-child{margin:0}}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}amp-accordion,amp-accordion>section{margin:0}amp-accordion:not(.i-amphtml-built)>section>:last-child{display:none!important}amp-accordion:not(.i-amphtml-built)>section[expanded]>:last-child{display:block!important} /*# sourceURL=/css/ampshared.css*/</style><script async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0.js" crossorigin="anonymous"></script><script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" crossorigin="anonymous" custom-element="amp-analytics"></script><script async src="https://cdn.ampproject.org/v0/amp-animation-0.1.mjs" custom-element="amp-animation" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-animation-0.1.js" crossorigin="anonymous" custom-element="amp-animation"></script><script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" crossorigin="anonymous" custom-element="amp-bind"></script><script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" crossorigin="anonymous" custom-element="amp-carousel"></script><script async src="https://cdn.ampproject.org/v0/amp-consent-0.1.mjs" custom-element="amp-consent" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-consent-0.1.js" crossorigin="anonymous" custom-element="amp-consent"></script><script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-form-0.1.js" crossorigin="anonymous" custom-element="amp-form"></script><script async src="https://cdn.ampproject.org/v0/amp-geo-0.1.mjs" custom-element="amp-geo" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-geo-0.1.js" crossorigin="anonymous" custom-element="amp-geo"></script><script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js" crossorigin="anonymous" custom-element="amp-image-lightbox"></script><script async src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.mjs" custom-element="amp-install-serviceworker" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js" crossorigin="anonymous" custom-element="amp-install-serviceworker"></script><script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js" crossorigin="anonymous" custom-element="amp-lightbox"></script><script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-list-0.1.js" crossorigin="anonymous" custom-element="amp-list"></script><script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" crossorigin="anonymous" custom-template="amp-mustache"></script><script async src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.mjs" custom-element="amp-position-observer" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js" crossorigin="anonymous" custom-element="amp-position-observer"></script><script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-selector-0.1.js" crossorigin="anonymous" custom-element="amp-selector"></script><script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js" crossorigin="anonymous" custom-element="amp-sidebar"></script><script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js" crossorigin="anonymous" custom-element="amp-social-share"></script><script async src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.mjs" custom-element="amp-user-notification" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js" crossorigin="anonymous" custom-element="amp-user-notification"></script><script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js" crossorigin="anonymous" custom-element="amp-youtube"></script><link rel="shortcut icon" href="/static/img/favicon.png"><link rel="canonical" href="https://amp.dev/documentation/examples/e-commerce/product_page/"><link rel="alternate" hreflang="x-default" href="https://amp.dev/documentation/examples/e-commerce/product_page/"><title>Example: Product Page - amp.dev</title><script type="application/ld+json">{"@context":"http://schema.org","@type":"Webpage","url":"https://amp.dev/documentation/examples/e-commerce/product_page/ ","name":"amp.dev","headline":"Example: Product Page","description":"This sample showcases how to build a product page in AMP HTML.","mainEntityOfPage":{"@type":"WebPage","@id":"https://amp.dev"},"publisher":{"@type":"Organization","name":"AMP Project","logo":{"url":"https://amp.dev/static/img/icons/icon-512x512.png","width":512,"height":512,"@type":"ImageObject"}},"image":{"@type":"ImageObject","url":"https://amp.dev/static/img/sharing/docs-example-600x314.png","width":600,"height":314}}</script><title>Product Page</title><script type="application/ld+json">{"@context":"http://schema.org/","@type":"Product","name":"Apple","image":"https://amp.dev/static/samples/img/golden_apple1_1024x682.jpg","description":"Lorem ipsum","mpn":"925872","brand":{"@type":"Fruit","name":"Apple"},"aggregateRating":{"@type":"AggregateRating","ratingValue":"4.4","reviewCount":"88"},"offers":{"@type":"Offer","priceCurrency":"USD","price":"1.99","priceValidUntil":"2020-11-05","itemCondition":"http://schema.org/UsedCondition","availability":"http://schema.org/InStock","seller":{"@type":"Retail","name":"AMP by Example"}}}</script><style amp-custom>:root{--color-primary:#005af0;--color-secondary:#00dcc0;--color-text-light:#fff;--color-text-dark:#000;--color-bg-light:#fafafc;--color-bg-grey:rgba(0,0,0,0.8);--space-1:.5rem;--space-2:1rem;--space-3:1.5rem;--space-4:2rem;--box-shadow-1:0 1px 1px 0 rgba(0,0,0,0.14),0 1px 1px -1px rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12)}article#preview{background-color:var(--color-bg-light)}amp-carousel{margin:0}.header{position:relative;box-shadow:var(--box-shadow-1);padding-top:52px;background-color:var(--color-secondary)}.header #sample-menu{left:0;font-weight:700;padding:13px}.header #sample-logo,.header #sample-menu{position:absolute;top:0;font-size:18px;color:var(--color-text-light);text-transform:uppercase}.header #sample-logo{left:36px;font-weight:400;margin:0 var(--space-2);height:var(--space-4);text-decoration:none;line-height:52px}.header form{padding:0}.header input::-webkit-search-cancel-button,.header input::-webkit-search-decoration{display:none}.header input[type=submit]{position:absolute;top:10px;right:var(--space-1);background-color:var(--color-primary);background-position:50%;background-repeat:no-repeat;background-image:-webkit-image-set(url(/static/samples/img/ic_search_white_1x_web_24dp.png) 1x,url(/static/samples/img/ic_search_white_2x_web_24dp.png) 2x);border:0;height:var(--space-4);width:36px;-webkit-appearance:none;border-radius:4px 0}.header input[type=search],.header input[type=text]{position:absolute;top:10px;right:var(--space-3);background:var(--color-bg-light);padding:0 var(--space-1);width:20vw;height:var(--space-4);font-family:inherit;font-size:100%;border:0 solid var(--color-primary);border-radius:4px 0;transition:all .9s ease}.header input[type=search]:focus,.header input[type=text]:focus{width:80vw;max-width:700px;background-color:var(--color-text-light);border-color:var(--color-primary);box-shadow:var(--box-shadow-1);outline:0}.header input:-moz-placeholder,.header input::-webkit-input-placeholder{color:var(--color-bg-light)}.header input:focus+#sample-logo{visibility:hidden;opacity:0;transition:visibility 0 .7s,opacity .7s ease}.header input+#sample-logo{visibility:visible;opacity:1;transition:opacity 1.5s ease}@media (min-width:600px){.header input[type=search]{width:100px}.header input[type=search]:focus{width:600px}}.items,amp-list.items>div{display:flex;justify-content:space-around;flex-wrap:wrap}.item{flex-grow:1;flex-shrink:1}.tile{background-color:var(--color-text-light);width:120px;height:200px;display:block;margin:var(--space-1);-webkit-tap-highlight-color:var(--color-bg-light);max-width:200px}@media (max-width:500px){.items .tile{width:150px;height:200px}}.tile:active{background-color:var(--color-bg-light)}.tile p{margin:0;padding:0 var(--space-1);font-size:var(--space-2);line-height:20px}.tile .name{margin-top:var(--space-1)}.tile .price{margin-bottom:var(--space-1)}.tile .price,.tile .star{color:var(--color-text-dark)}#product-description{clear:both}amp-lightbox{background:rgba(0,0,0,.8);width:100%;height:100%;position:absolute}amp-accordion h4{font-size:18px}amp-carousel .selected{border:2px solid red}.amp-youtube-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.video{flex:1}.price-description{color:grey;font-weight:400;margin-top:24px;margin-bottom:16px;padding:0 16px}.product-gallery>ul{margin:0;padding:0;float:left;list-style:none;line-height:0}.product-gallery>ul>li{cursor:pointer;margin:0 1em 1em;opacity:1;will-change:opacity;transition:all .3s cubic-bezier(.25,.8,.25,1)}.product-gallery>ul>li:active{opacity:.5}.product-gallery>ul>li:focus,.product-gallery amp-img:focus{outline:0}form#order label{display:inline;font-weight:500;font-size:16px;margin:0}form#order .button{width:100%;max-width:400px;align-self:center;margin:16px 20%;box-sizing:border-box}form#order.amp-form-submitting [name=add-to-cart]{color:#666;background-color:#aaa;cursor:default}form#order amp-selector>ul{list-style:none;display:flex;align-items:flex-end;justify-content:end}form#order amp-selector>ul li{display:flex;align-items:center;justify-content:center;margin-right:8px;background:#fff;height:40px;min-width:40px;width:auto}form#order amp-selector [option]{outline:0}form#order amp-selector amp-img[option][selected]{outline-width:1px;outline-style:solid;outline-color:#eb407a;background:0 0}amp-img.selected,form#order amp-selector:not([disabled]) [option][selected]:not([disabled]){will-change:box-shadow;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);transition:box-shadow .3s cubic-bezier(.25,.8,.25,1);color:#fff}form#order amp-selector:not([disabled]) [option][selected]:not([disabled]):not(.unavailable):not(.square){background-color:#eb407a}form#order amp-selector:not([disabled]) [option][selected]:not([disabled]):not(.unavailable).square{outline:1px solid #eb407a}amp-img:not([.selected]),form#order amp-selector:not([disabled]) [option]:not([selected]):not([disabled]){will-change:box-shadow;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);transition:box-shadow .3s cubic-bezier(.25,.8,.25,1)}form#order amp-selector[name=color] div:not([selected]):not([disabled]){opacity:.6}body,html{font-family:Noto Sans,sans-serif}p{line-height:1.6rem}.tabButton.h4.ampstart-nav-item{text-align:center;padding:.5rem}.ampstart-btn{margin-top:1.5rem;margin-bottom:.75em;font-family:Poppins,sans-serif;font-weight:700;line-height:1.2em;font-size:1em;color:#fff;display:inline-block;padding:.75em 1.75em;border-radius:3px;background-color:#005af0;border:none;cursor:pointer;box-shadow:0 15px 35px -5px rgba(0,0,0,.25);transition:transform .3s ease,box-shadow .3s ease}p.name+p.star{color:gold}button.info-button{border:none}.fadeIn{animation-duration:1s;animation-fill-mode:both;animation-name:fadeIn}.unavailable{position:relative;background:grey;overflow:hidden;opacity:.6;pointer-events:none;user-select:none}.unavailable:after,.unavailable:before{position:absolute;content:"";background:grey;display:block;width:auto;height:1px;min-width:56px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);left:-11px;right:0;top:0;bottom:0;margin:auto;border-bottom:2px solid}.unavailable:after{-webkit-transform:rotate(45deg);transform:rotate(45deg)}div.square{width:40px;height:40px}.green{background-color:green}.red{background-color:red}.golden{background-color:#daa520}@media (max-width:1024px){.product-gallery>ul{display:none}}.info-button{background:-webkit-image-set(url(/static/samples/img/ic_info_outline_black_24dp_1x.png) 1x,url(/static/samples/img/ic_info_outline_black_24dp_2x.png) 2x);background-repeat:no-repeat;width:24px;height:24px;margin-top:4px}.info{margin:0 auto;background:#fff}.lightbox{width:100%;height:100%;display:flex;align-items:center}.ampTabContainer{display:flex;flex-wrap:wrap}.tabButton{list-style:none;text-align:center;cursor:pointer;outline:0}amp-selector [option][selected]{outline:#fff}.tabContent{line-height:1.5rem;display:none;width:100%;order:1}.tabButton[selected]:after{content:"";display:block;height:4px;background:linear-gradient(90deg,#94103e,#db004d)}.tabButton[selected]+.tabContent{display:block}.items,amp-list.items>div{justify-content:flex-start}.close-gallery-button{z-index:1;position:absolute;right:0}@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText-Light"),local(".HelveticaNeueDeskInterface-Light"),local(".LucidaGrandeUI"),local("Ubuntu Light"),local("Segoe UI Light"),local("Roboto-Light"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:italic;font-weight:300;src:local(".SFNSText-LightItalic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Ubuntu Light Italic"),local("Segoe UI Light Italic"),local("Roboto-LightItalic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:normal;font-weight:400;src:local(".SFNSText-Regular"),local(".HelveticaNeueDeskInterface-Regular"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto-Regular"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:italic;font-weight:400;src:local(".SFNSText-Italic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Ubuntu Italic"),local("Segoe UI Italic"),local("Roboto-Italic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:normal;font-weight:500;src:local(".SFNSText-Medium"),local(".HelveticaNeueDeskInterface-MediumP4"),local(".LucidaGrandeUI"),local("Ubuntu Medium"),local("Segoe UI Semibold"),local("Roboto-Medium"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:italic;font-weight:500;src:local(".SFNSText-MediumItalic"),local(".HelveticaNeueDeskInterface-MediumItalicP4"),local(".LucidaGrandeUI"),local("Ubuntu Medium Italic"),local("Segoe UI Semibold Italic"),local("Roboto-MediumItalic"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:normal;font-weight:700;src:local(".SFNSText-Bold"),local(".HelveticaNeueDeskInterface-Bold"),local(".LucidaGrandeUI"),local("Ubuntu Bold"),local("Roboto-Bold"),local("DroidSans-Bold"),local("Segoe UI Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:italic;font-weight:700;src:local(".SFNSText-BoldItalic"),local(".HelveticaNeueDeskInterface-BoldItalic"),local(".LucidaGrandeUI"),local("Ubuntu Bold Italic"),local("Roboto-BoldItalic"),local("DroidSans-Bold"),local("Segoe UI Bold Italic"),local("Tahoma Bold")}@font-face{font-family:Noto Sans;font-style:normal;font-weight:400;font-display:optional;src:local("Noto Sans"),local("NotoSans"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff2) format("woff2"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff) format("woff")}@font-face{font-family:Noto Sans;font-style:normal;font-weight:700;font-display:optional;src:local("Noto Sans Bold"),local("NotoSans-Bold"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff2) format("woff2"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff) format("woff")}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:optional;src:local("Poppins Bold"),local("Poppins-Bold"),url(https://amp.dev/static/fonts/poppins-v5-latin-700.woff2) format("woff2"),url(https://amp.dev/static/fonts/poppins-v5-latin-700.woff) format("woff")}@font-face{font-family:Fira Mono;font-style:normal;font-weight:400;font-display:optional;src:local("Fira Mono"),local("FiraMono"),url(https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff2) format("woff2"),url(https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff) format("woff")}*{box-sizing:border-box}body,html{padding:0;margin:0;min-width:240px;color:#48525c;background-color:#fff;font-size:16px;font-family:Noto Sans,system;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation}@media(max-width:240px){body,html{font-size:14px}}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button{width:3em;height:3em;border-radius:50%;box-shadow:0 10px 15px 0 rgba(0,0,0,.4);transition:.4s;background-color:#fff;position:relative;box-sizing:border-box;margin:1em;border-style:none;background-position:50% 50%;background-repeat:no-repeat;z-index:10;pointer-events:all}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0'%3E%3Cpath d='M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z'/%3E%3C/svg%3E")}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0' %3E%3Cpath d='M9 3L7.94 4.06l4.19 4.19H3v1.5h9.13l-4.19 4.19L9 15l6-6z'/%3E%3C/svg%3E")}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button:hover{cursor:pointer;box-shadow:0 20px 30px 0 rgba(0,0,0,.2);background-color:#fff}:target:before{content:"";display:block;visibility:hidden;height:120px;margin-top:-120px}@media(min-width:1024px){h1:target:before{height:75px;margin-top:-75px}h2:target:before{height:81px;margin-top:-81px}h3:target:before{height:87px;margin-top:-87px}h4:target:before{height:90px;margin-top:-90px}h5:target:before{height:93px;margin-top:-93px}h6:target:before{height:97px;margin-top:-97px}}h1,h2,h3,h4,h5{margin-top:1.5rem;margin-bottom:.75em;font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a}h1{font-size:2.2rem;margin-top:3rem}section.-t h1:first-of-type{margin-top:0}@media(min-width:768px){section.-t h1:first-of-type{margin-bottom:2rem}}h2{font-size:1.8rem;margin-top:2rem}h3{font-size:1.414rem;margin-top:1.8rem}h4{font-size:1.2rem}h5{font-size:1rem}.-t .intro,.ap--section .intro{font-size:1rem;padding:0}.-t .intro *,.ap--section .intro *{font-size:inherit}.-t p,.ap--section p{line-height:1.6rem;font-weight:400;color:#48525c;display:block;margin-top:1.1em;margin-bottom:0;font-size:1rem}.-t p small,.ap--section p small{font-size:.875rem}.-t code,.ap--section code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em}.-t code,.-t p,.ap--section code,.ap--section p{overflow-wrap:break-word}.-t a,.ap--section a{position:relative;z-index:10}.-t a code,.ap--section a code{color:#005af0;z-index:-1}.-t pre,.ap--section pre{font-family:Fira Mono,monospace;font-weight:500;font-size:1rem;white-space:pre-wrap}.-t>ol,.-t>ul,.ap--section>ol,.ap--section>ul{line-height:1.6rem;font-weight:400;color:#48525c;display:block;padding-left:2em;margin:1.5em 0}.-t>ol ol,.-t>ol ul,.-t>ul ol,.-t>ul ul,.ap--section>ol ol,.ap--section>ol ul,.ap--section>ul ol,.ap--section>ul ul{padding-left:2em;margin:0}.-t>ol li,.-t>ul li,.ap--section>ol li,.ap--section>ul li{padding-left:.5em}.-t>ol li p,.-t>ul li p,.ap--section>ol li p,.ap--section>ul li p{font-size:1em}.-t figure figcaption,.ap--section figure figcaption{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;margin-top:.3em}.-t hr,.ap--section hr{height:1px;margin:.75em 0;background-color:#ebebf0;border:none}.-n{display:flex;align-items:center;text-decoration:none;padding:0 0 1.5em;margin:0}.-r{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-weight:700;color:#005af0;line-height:1.3;transition:transform .3s ease}.-i{fill:#005af0;padding:.438em 0;margin-bottom:auto;margin-right:.625em;box-sizing:initial;transition:transform .3s ease}.-n:hover .-i,.-n:hover .-r{transform:translateX(10px)}.-s{border-bottom:1px solid #ebebf0}.-s .-r{font-size:1rem;font-family:Poppins,system;font-weight:700;color:#000;padding-left:10px}.-s .-i{width:1.375em;height:1.375em;fill:#fff;background-color:#005af0;overflow:hidden;padding:.563em}.-s .-i,.-s:hover .-i{box-shadow:0 10px 20px 0 rgba(0,0,0,.25)}.-s:hover .-i svg{animation:duepduep .3s ease}a{font-weight:700;text-decoration:none;color:#005af0}a code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em;color:#005af0}.ap-a-ico{display:flex;font-size:medium;box-sizing:initial;justify-content:center;width:1em;height:1em}.-o{right:20px;left:auto;bottom:20px;width:calc(100% - 40px);padding:15px;line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;background-color:#fff;box-shadow:0 15px 30px 0 rgba(0,0,0,.15);border-radius:8px}@media(min-width:768px){.-o{max-width:500px}}.-u{position:absolute;right:15px;top:15px;-webkit-appearance:none;background-color:transparent;border:none;padding:0}.-u svg{width:10px;height:10px}.-o button{cursor:pointer}.ap--footer{position:relative;z-index:15;padding:3em 0 2em;line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem;color:#fff;background:linear-gradient(45deg,#48525c,#20202a)}.-a{width:100%;max-width:1440px;padding:0 20px;margin:0 auto}.-f{padding-bottom:4em}@media(min-width:768px){.-f{display:flex;align-items:center}}.-l{display:flex;flex-direction:column;margin-left:auto}@media(min-width:1024px){.-l{flex-direction:row}}.-c{margin:3em 2em 1em 0;color:#fff}@media(min-width:768px){.-c{margin:auto 2em auto 1em}}.-h{display:flex;list-style:none;padding:0;margin:0}.-p{flex:1 0 auto}@media(min-width:768px){.-p{margin:16px}}.-d{width:2.5em;height:2.5em;fill:#fff}@media(max-width:240px){.-d{font-size:14px}}@media(min-width:768px){.-v{display:grid;grid-gap:30px;grid-template-columns:repeat(12,1fr)}}.-m{flex:1 1 100%}.-m:nth-child(odd){grid-column:span 3}@media(max-width:1023px){.-m:nth-child(odd){grid-column:span 6}}.-m:nth-child(2n+2){grid-column:span 3}@media(max-width:1023px){.-m:nth-child(2n+2){grid-column:span 6}}.-g{color:#fff}.-y{list-style:none;padding:0}@media(min-width:768px){.-y+.-g{margin-top:2.5em}}.-b{position:relative}.-w{padding-left:35px;font-size:.8125rem;color:#fff}.-x{position:absolute;left:10px;top:8px;width:12px;height:12px;fill:#fff}.-k{display:flex;flex-direction:column;padding-top:4em}@media(min-width:768px){.-k{flex-direction:row;align-items:flex-end}}.-_{width:50%;max-width:200px;margin-bottom:40px;margin-right:auto}@media(min-width:768px){.-_{margin-bottom:0}}.-j{list-style:none;padding:0;margin:0}.-q{display:inline-block;margin-right:1em}.-z{font-size:.8125rem;font-weight:400;color:#fff}.-te{display:block;font-size:.875rem;margin-top:2em;color:#e2e5e6}.-te a{color:#fafafc}.ap-m-format-toggle{position:-webkit-sticky;position:sticky;top:0;margin:0 10px;padding:10px 0 0;width:100%;max-width:85%;z-index:12}@media(min-width:768px){.ap-m-format-toggle{padding:0;margin:0 15px 0 0;max-width:100%}}.ap-m-format-toggle-selected{border:0}.amp-mode-touch .ap-m-format-toggle-selected{position:relative}.ap-m-format-toggle-selected:focus:after,.ap-m-format-toggle-selected:hover:after{position:absolute;top:0;left:0;content:"";display:block;height:300%;width:100%}.ap-m-format-toggle-link,.ap-m-format-toggle-selected{z-index:3;display:flex;align-items:center;width:100%;margin:0 0 2px;padding:5px 8px;overflow:hidden;line-height:1.6rem;font-weight:400;color:#48525c;font-family:Poppins,system;font-weight:700;font-size:12px;text-align:left;border-radius:4px;color:#000;background:#ebebf0;transition:opacity .2s ease;box-shadow:0 5px 15px -5px rgba(0,0,0,.25)}.ap-m-format-toggle-link .ap-a-ico,.ap-m-format-toggle-selected .ap-a-ico{width:14px;height:14px;margin-right:8px;fill:#000}.ap-m-format-toggle-link{color:#000;background:#ebebf0}.ap-m-format-toggle-link .ap-a-ico{fill:#000}.ap-m-format-toggle-link-websites.ap-m-format-toggle-selected,.ap-m-format-toggle-link-websites:hover{background:linear-gradient(225deg,#00dcc0,#005af0 75%);color:#fff}.ap-m-format-toggle-link-websites.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-websites:hover .ap-a-ico{fill:#fff}.ap-m-format-toggle-link-stories.ap-m-format-toggle-selected,.ap-m-format-toggle-link-stories:hover{background:linear-gradient(225deg,#ec6600,#ffdc00 75%);color:#20202a}.ap-m-format-toggle-link-stories.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-stories:hover .ap-a-ico{fill:#20202a}.ap-m-format-toggle-link-ads.ap-m-format-toggle-selected,.ap-m-format-toggle-link-ads:hover{background:linear-gradient(225deg,#eb49e1,#5500d7 75%);color:#fff}.ap-m-format-toggle-link-ads.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-ads:hover .ap-a-ico{fill:#fff}.ap-m-format-toggle-link-email.ap-m-format-toggle-selected,.ap-m-format-toggle-link-email:hover{background:linear-gradient(225deg,#09a600,#e1eb64 75%);color:#20202a}.ap-m-format-toggle-link-email.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-email:hover .ap-a-ico{fill:#20202a}.ap-m-format-toggle-angle{margin-right:0;margin-left:auto}.ap-m-format-toggle-formats{position:absolute;width:100%;z-index:2;pointer-events:none;opacity:0;transform:translateY(-20px);transition:all .2s ease;transition-delay:.05s}.ap-m-format-toggle-formats:focus-within,.ap-m-format-toggle-formats:hover,.ap-m-format-toggle-selected:focus+.ap-m-format-toggle-formats,.ap-m-format-toggle-selected:hover+.ap-m-format-toggle-formats{pointer-events:auto;opacity:1;transform:translateY(0)}body{top:0;left:0;background-repeat:no-repeat;background-size:100% auto;background-position:100% 0;background-attachment:fixed}body.ap--websites{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' y1='855.23' x2='606.28' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d5e6f2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}body.ap--ads{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' x2='606.28' y1='855.23' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ddd3eb'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}body.ap--stories{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' x2='606.28' y1='855.23' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ebdfd3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}body.ap--email{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' x2='606.28' y1='855.23' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d7ebd3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}.ap--ampsidebar{width:100%;max-width:90vw;background:#fafafc}.ap--ampsidebar-toolbar{top:86px;height:100vh;max-height:calc(100vh - 86px)}@media(min-width:768px){.ap--ampsidebar-toolbar{position:-webkit-sticky;position:sticky;overflow:auto}}.ap--ampsidebar-toolbar>ul{-webkit-overflow-scrolling:touch;margin:0;padding:0}@media(min-width:768px){.ap--ampsidebar-toolbar>ul{overflow:auto;max-height:100%}}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar{width:6px;height:6px}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar-corner{background-color:transparent}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1)}.ap-o-sidebar-default{max-width:100%}@media(min-width:768px){.ap-o-sidebar-default .ap-o-sidebar{width:auto;min-height:400px;padding-bottom:0;margin-right:0;margin-left:-10px;background:0 0;box-shadow:none}}.ap-o-sidebar-default .nav{margin:15px 0 0;padding-bottom:15px}.ap-o-sidebar-default .nav-list{max-width:300px;list-style:none;padding:0;margin:0}.ap-o-sidebar-default .nav-list.level-1{margin:0 15px}.ap-o-sidebar-default .nav-list .nav-list{display:none;margin-bottom:20px}.ap-o-sidebar-default .nav-item{position:relative;margin:0;padding:0}.ap-o-sidebar-default .nav-item.level-1{border-bottom:1px solid rgba(0,0,0,.15)}.ap-o-sidebar-default .nav-item.level-1:last-child{border-bottom:none}.ap-o-sidebar-default .nav-item.level-1 .nav-link{padding:10px 25px 10px 20px;text-transform:uppercase;font-size:1.125rem;font-family:Poppins,system;font-weight:700;color:#000}.ap-o-sidebar-default .nav-item.level-1 .nav-icon,.ap-o-sidebar-default .nav-item.level-1 .nav-trigger{height:46px}.ap-o-sidebar-default .nav-item.level-1 .nav-icon .ap-a-ico{margin-top:16px}.ap-o-sidebar-default .nav-item.level-2 .nav-link{padding:7px 25px 8px 20px;text-transform:unset;line-height:1.6rem;font-weight:400;color:#48525c;font-family:Noto Sans,system;font-size:.875rem;line-height:1.4em}.ap-o-sidebar-default .nav-item.level-2 .nav-icon,.ap-o-sidebar-default .nav-item.level-2 .nav-trigger{height:33px}.ap-o-sidebar-default .nav-item.level-2 .nav-icon .ap-a-ico{width:10px;height:10px;margin-top:10px}.ap-o-sidebar-default .nav-item.level-3{margin-left:24px}.ap-o-sidebar-default .nav-item.level-3 .nav-link{padding:7px 25px 8px 20px;font-size:.8125rem}.ap-o-sidebar-default .nav-item.level-3.active{background:rgba(51,61,71,.1);border-radius:4px}.ap-o-sidebar-default .nav-item.active>.nav-link{font-weight:700;color:#005af0}.ap-o-sidebar-default .nav-item:hover>.nav-link{color:#005af0}.ap-o-sidebar-default .nav-item-tutorial-divider{border-bottom:1px dashed rgba(0,0,0,.15)}.ap-o-sidebar-default .nav-item-tutorial-divider:first-child,.ap-o-sidebar-default .nav-item-tutorial-divider:last-child{display:none}.ap-o-sidebar-default .nav-link{position:relative;display:block;padding:0;margin:0;color:rgba(0,0,0,.75);border:none;background-color:transparent}.ap-o-sidebar-default .nav-link-lastword{white-space:nowrap}.ap-o-sidebar-default .nav-icon,.ap-o-sidebar-default .nav-trigger{position:absolute;top:0;width:20px;padding:0;margin:0;background:none transparent;border:none;cursor:pointer}.ap-o-sidebar-default .nav-trigger{-webkit-appearance:none;z-index:1}.ap-o-sidebar-default .nav-trigger:checked~ul{display:block}.ap-o-sidebar-default .nav-trigger:checked+.nav-icon .ap-a-ico{transform:rotate(0)}.ap-o-sidebar-default .nav-trigger:focus{outline:1px dotted #212121;outline:5px auto -webkit-focus-ring-color}.ap-o-sidebar-default .nav-icon .ap-a-ico{width:12px;height:12px;transform:rotate(-90deg)}.ap-o-sidebar-default .nav-type-icon{display:inline-block;vertical-align:top;width:20px;height:20px;margin-left:6px}.ap-o-sidebar-default .nav span.nav-link+.nav-trigger{width:calc(100% + 15px)}ul.ap-o-mini-card-list{display:flex;flex-wrap:wrap;justify-content:space-between;list-style:none;margin:0;max-width:1440px;padding:0;position:relative;width:100%}.ap-o-mini-card-list-item{margin-bottom:1.25rem;padding-left:0;transition:transform .3s ease}.ap-o-mini-card-list-item:hover{transform:translateY(-.125em)}.ap-o-mini-card-list-item:hover>.ap-m-mini-card{box-shadow:0 15px 25px 0 rgba(0,0,0,.05)}.ap-m-mini-card{line-height:1.6rem;font-weight:400;color:#48525c;position:relative;display:flex;align-items:center;flex-direction:row;padding:8px 16px 8px 8px;margin:0 0 10px;box-shadow:0 5px 15px -3px rgba(0,0,0,.07);transition:box-shadow .3s ease;background:#fff}.ap-m-mini-card amp-img{width:35px;display:inline-block;border:1px solid #ebebf0;border-radius:100%}.ap-m-mini-card amp-img.large{width:38px;flex-shrink:0}.ap-m-mini-card span{padding-left:10px;line-height:1.3em}.ap-m-mini-card strong{font-weight:700}@media(max-width:374px){.ap-m-mini-card{font-size:.75em}}.ap-a-img{position:relative}.image-preview-1 .ap-a-img{overflow:hidden;border-radius:50%}.image-preview-2 .ap-a-img{margin-right:-30px;filter:drop-shadow(0 30px 30px -15px rgba(0,0,0,.25))}@media(min-width:768px){.image-preview-2 .ap-a-img{margin-right:0}}.-is{display:block;width:100%;height:1px;margin-bottom:.813em;background-color:#fafafc}@media(min-width:768px){.-is{display:none}.-io{display:block}}.-ff{padding:84px 15px 0}@media(min-width:768px){.-ff{padding-left:0;padding-right:0}}.-fl{margin-bottom:.75em;font-size:1.8rem;margin-top:2rem;padding:20px 0}.-fl,.-fc{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a}.-fc{margin-top:1.5rem;font-size:1.2rem;padding-left:20px;margin-bottom:0}.-fh{line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem}.-fp{display:block;background-color:#ebebf0;height:1px;margin:30px 20px 30px 0}.ap-code-preview,.ap-o-code-preview{position:relative;margin:1rem 0;background:#20202a}.ap-code-preview-controls,.ap-o-code-preview-controls{width:100%;display:flex;justify-content:center;align-items:center;margin:0 auto;padding:9px 0}.ap-code-preview-controls-button,.ap-o-code-preview-controls-button{-webkit-appearance:none;background-color:transparent;border:none;position:relative;padding:6px;cursor:pointer}.ap-code-preview-controls-icon,.ap-o-code-preview-controls-icon{width:22px;height:22px;fill:#fff;opacity:.6;transition:opacity .25s ease-out}.ap-code-preview-controls-button:focus .ap-code-preview-controls-icon,.ap-code-preview-controls-button:focus .ap-o-code-preview-controls-icon,.ap-code-preview-controls-button:hover .ap-code-preview-controls-icon,.ap-code-preview-controls-button:hover .ap-o-code-preview-controls-icon,.ap-o-code-preview-controls-button:focus .ap-code-preview-controls-icon,.ap-o-code-preview-controls-button:focus .ap-o-code-preview-controls-icon,.ap-o-code-preview-controls-button:hover .ap-code-preview-controls-icon,.ap-o-code-preview-controls-button:hover .ap-o-code-preview-controls-icon{opacity:1}.ap-code-preview-preview,.ap-o-code-preview-preview{position:relative;top:1em;margin:1em;background:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07)}@media(min-height:768px){.ap-code-preview-preview+div.-ta,.ap-o-code-preview-preview+div.-ta{min-height:0}}.ap-code-preview-preview-iframe,.ap-o-code-preview-preview-iframe{display:flex;justify-content:center;position:relative;margin:0 1em}@media screen and (max-width:412px){.ap-code-preview-preview-iframe amp-iframe,.ap-o-code-preview-preview-iframe amp-iframe{width:240px;height:427px}}@media screen and (min-width:413px){.ap-code-preview-preview-iframe amp-iframe,.ap-o-code-preview-preview-iframe amp-iframe{width:320px;height:569px}}.ap-code-preview-top-preview,.ap-o-code-preview-top-preview{position:relative;padding:0 1em;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:start}@media(min-width:1024px){.ap-code-preview-top-preview,.ap-o-code-preview-top-preview{padding:0 15%}}.ap-code-preview-top-preview+div.-ta,.ap-o-code-preview-top-preview+div.-ta{position:relative;width:100%;min-height:0;padding:1em 1em 0;margin-top:0}.ap-code-preview-top-preview amp-iframe,.ap-o-code-preview-top-preview amp-iframe{align-self:center}.ap-code-preview-side-preview,.ap-o-code-preview-side-preview{width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;padding:0;margin:0}@media(min-width:768px){.ap-code-preview-side-preview,.ap-o-code-preview-side-preview{width:auto;left:60%;background-color:#1c1c24}}@media(max-width:767px){.ap-code-preview-side-preview,.ap-o-code-preview-side-preview{overflow:hidden;pointer-events:none}.ap-code-preview-side-preview-active,.ap-o-code-preview-side-preview-active{pointer-events:auto}}.ap-code-preview-side-preview-frame,.ap-o-code-preview-side-preview-frame{position:absolute;max-height:100%;right:15px;top:auto;background-color:#fff}@media(max-width:767px){.ap-code-preview-side-preview-frame,.ap-o-code-preview-side-preview-frame{position:static;background:#fff;pointer-events:none;transform:translateY(100%);transition:transform .2s cubic-bezier(0,0,.3,1)}.ap-code-preview-side-preview-frame.show,.ap-o-code-preview-side-preview-frame.show{transform:translateY(0);pointer-events:auto;height:100%}}.ap-code-preview-iframe,.ap-o-code-preview-iframe{background:#fff;margin-bottom:1em}.ap-code-preview.side-frame .-ta,.ap-code-preview.top-frame .-ta,.ap-o-code-preview.side-frame .-ta,.ap-o-code-preview.top-frame .-ta{min-height:150px;max-height:450px}.ap-code-preview.side-frame .-ta,.ap-o-code-preview.side-frame .-ta{width:100%;margin:0;background:0 0}@media(min-width:768px){.ap-code-preview.side-frame .-ta,.ap-o-code-preview.side-frame .-ta{width:60%;min-height:580px}}@media(min-width:1024px){.ap-code-preview.side-frame .-ta,.ap-o-code-preview.side-frame .-ta{min-height:738px}}@media(min-width:1280px){.ap-code-preview.side-frame .-ta,.ap-o-code-preview.side-frame .-ta{min-height:842px}}@media(min-width:1441px){.ap-code-preview.side-frame .-ta,.ap-o-code-preview.side-frame .-ta{min-height:746px}}.ap-a-btn{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a;font-size:1em;color:#fff;display:inline-block;max-width:100%;width:auto;height:auto;padding:.75em 1.75em;margin:0;text-decoration:none;text-align:center;border-radius:3px;background-color:#005af0;border:none;cursor:pointer;box-shadow:0 15px 35px -5px rgba(0,0,0,.25);transition:transform .3s ease,box-shadow .3s ease}.ap-a-btn:hover{transform:translateY(-.125em);box-shadow:0 25px 20px -15px rgba(0,0,0,.15)}@media(min-width:768px){.ap-a-btn{padding:1em 2em}}.ap-breadcrumbs,.-ou{display:flex;align-items:center;font-family:Poppins,system;font-weight:700;font-size:.8125rem}.ap-breadcrumbs-angle,.-oa{width:10px;height:10px;margin:0 6px;transform:rotate(-90deg)}.ap-a-format-tag{display:inline-block;padding:0 12px;border-radius:14px;font-family:Poppins,system;font-weight:700;color:#fff}.ap-a-format-tag-websites{background:linear-gradient(225deg,#00dcc0,#005af0 75%)}.ap-a-format-tag-stories{background:linear-gradient(225deg,#ec6600,#ffdc00 75%);color:#20202a}.ap-a-format-tag-ads{background:linear-gradient(225deg,#eb49e1,#5500d7 75%)}.ap-a-format-tag-email{background:linear-gradient(225deg,#09a600,#e1eb64 75%);color:#20202a}.ap--toc{width:100%}@media(min-width:1024px){.ap--toc{background:0 0;box-shadow:none;padding-right:10px}}.ap-o-toc{--spacing-top:90px;position:relative;z-index:1;top:0;right:0;width:calc(100% - 20px);overflow-y:auto;-webkit-overflow-scrolling:touch;background-color:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07);border-radius:8px;padding:15px;margin-bottom:10px}.ap-o-toc::-webkit-scrollbar{width:6px;height:6px}.ap-o-toc::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.ap-o-toc::-webkit-scrollbar-corner{background-color:transparent}.ap-o-toc::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1)}@media(min-width:768px){.ap-o-toc{width:100%}}@media(min-width:1024px){.ap-o-toc{position:-webkit-sticky;position:sticky;z-index:1;padding:0 10px 0 0;margin:0;height:auto;top:var(--spacing-top);right:auto;padding-bottom:var(--spacing-top);background:0 0;box-shadow:none;overflow-y:scroll;max-height:calc(100vh - var(--spacing-top))}}.ap-o-toc-hl{font-family:Poppins,system;font-weight:700;cursor:pointer;width:100%;margin-bottom:0}@media(min-width:1024px){.ap-o-toc-hl{margin-bottom:10px}}.ap-o-toc-toggle{display:flex;align-items:center;justify-content:space-between;outline:0}@media(min-width:1024px){.ap-o-toc-toggle{position:-webkit-sticky;position:sticky;top:0;background:#fafafc}}.ap-o-toc ul{list-style:none;margin:0;padding:0;transition:.4s}.ap-o-toc ul>li a{display:block;padding-bottom:20px;line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;font-weight:700;line-height:1rem}.ap-o-toc ul>li>ul{padding-left:10px;text-transform:none}.ap-o-toc ul>li>ul li a{font-weight:400}@media(max-width:1023px){.ap-o-toc .-of:not(:checked)+ul{display:none;transition:.2s}.ap-o-toc .-of:checked+ul{margin-top:15px}}.ap-o-toc .nav-icon svg{width:15px;height:15px}@media(min-width:1024px){.ap-o-toc .nav-icon{display:none}}.ap-o-toc .nav-icon .ap-a-ico{display:inline-block;transform:rotate(-90deg)}.ap-o-toc.contentmenuopen .nav-icon .ap-a-ico{transform:rotate(0)}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ol{animation:moveSidebarToggleBackwards .233s cubic-bezier(0,0,.21,1) forwards}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ol .label-icon svg{transform:rotate(180deg)}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ol .label-title{transform:translateX(0) scaleX(1);transform-origin:left center}#sidebar-left[open]~.ap--main .-ol{left:0;margin-left:0;animation:moveSidebarToggleForwards .233s cubic-bezier(0,0,.21,1) forwards}#sidebar-left[open]~.ap--main .-ol .label-icon svg{transform:rotate(0)}#sidebar-left[open]~.ap--main .-ol .label-title{transform:translateX(-150vw) scaleX(0);transform-origin:left center}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ol,#sidebar-left[open]~.ap--main .-ol{z-index:9999999999}.-oc{position:absolute;top:50px}.-oh{position:fixed;top:-99px}.-op{position:fixed;z-index:15;font-size:12px;font-family:Poppins,system;font-weight:700;color:#fff;fill:#fff;cursor:pointer;display:flex;align-items:center}.-op .label-icon{border-radius:4px;background:#005af0;height:35px;width:32px;padding-left:2px;display:flex;justify-content:center;align-items:center;box-shadow:0 10px 20px -5px rgba(0,0,0,.25);z-index:1}.-op .label-icon svg{height:14px;width:14px;transition:transform .233s cubic-bezier(0,0,.21,1)}.-op .label-title{left:32px;display:flex;align-items:center;height:35px;margin-left:-5px;padding:5px 10px 5px 5px;white-space:nowrap;border-radius:0 4px 4px 0;background:#005af0;box-shadow:0 10px 20px -5px rgba(0,0,0,.25);transform:scaleX(0);transform-origin:left;transition:transform .233s cubic-bezier(0,0,.21,1)}.-od{position:fixed;top:-99px}.-ol{margin-top:-52px;margin-left:-25px}@media(min-width:768px){.-ol{display:none}}.-ol .label-icon svg{transform:rotate(180deg)}.-ov{display:none}.-om{position:fixed;top:-99px}.-og{display:none}@media(min-width:768px)and (max-width:1440px){.-ov{display:inline-block}.-og{position:-webkit-sticky;position:sticky;top:138px;display:inline-flex;transform:translate(-40px,-52px)}.-om:checked~.-oy{grid-column:1/2}.-om:checked~.-oy nav{display:none}.-om:checked~.-oy svg{transform:rotate(180deg)}}@media(min-width:768px)and (max-width:1440px)and (max-width:1023px){.-om:checked~.ap--toc{grid-column:2/25}}@media(min-width:768px)and (max-width:1440px){.-om:checked~.ap--toc~.-t{padding-left:80px;padding-right:80px;grid-column:2/20}}@media(min-width:768px)and (max-width:1440px)and (max-width:1023px){.-om:checked~.ap--toc~.-t{grid-column:2/25}}@media(min-width:768px)and (max-width:1440px){.-om:checked~.-t,.-om:checked~.ap--help{grid-column-start:2;padding-left:80px;padding-right:80px}.-om:checked~.-t .-og,.-om:checked~.ap--help .-og{margin-left:-88px}.-om:checked~.-t .-og .label-icon svg,.-om:checked~.ap--help .-og .label-icon svg{transform:rotate(180deg)}}.-fd{display:none}.-fv.amp-active~.-fd{height:42px;max-width:2020px;margin:0 auto;color:#fff;background-color:#20202a;font-size:.875rem;z-index:100;position:absolute;width:100%;left:0;right:0}@media(min-width:768px){.-fv.amp-active~.-fd{display:block}}.-fv.amp-active~.-fd .-fm{position:relative;display:flex;align-items:center;width:100%;height:100%;max-width:1440px;padding:0 30px;margin:0 auto}@media(min-width:1024px){.-fv.amp-active~.-fd .-fm{padding:0 15px}}.-fv.amp-active~.-fd .-fm:after{position:absolute;content:"";top:42px;left:50px;width:0;height:0;border-color:#20202a transparent transparent;border-style:solid;border-width:8px 10px 0}.-fv.amp-active~.-fd .-fg{flex:1 0;padding-right:10px}.-fv.amp-active~.-fd .-fy{height:20px;width:20px;background-color:transparent;border:0;cursor:pointer;padding:3px}.-fv.amp-active~.-fd .-fy svg{fill:#fff;width:100%;height:100%}.ap-o-burger-menu{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;padding:110px 20px 80px;z-index:16;background-color:#fff}@media(max-width:240px){.ap-o-burger-menu{padding:37px 20px 0}.has-banner~.ap-o-burger-menu{padding:calc(37px + 31px) 0 0 20px}}.ap-o-burger-menu-label{position:fixed;z-index:1001;top:12px;right:20px;cursor:pointer}.ap-o-burger-menu-label.mainmenuopen{z-index:1004}.has-banner+.ap-o-burger-menu-label{top:calc(12px + 31px)}.amp-hidden+.has-banner+.ap-o-burger-menu-label,amp-user-notification[hidden]+.has-banner+.ap-o-burger-menu-label{top:12px}@media(min-width:768px){.ap-o-burger-menu-label{right:30px}}@media(min-width:1024px){.ap-o-burger-menu-label{display:none}}.ap-o-burger-menu-icon{width:30px;height:30px}@media(min-width:1024px){.ap-o-burger-menu{display:none}}.ap-o-burger-menu.mainmenuopen{display:block;z-index:1003}.ap-o-burger-menu.mainmenuopen~.ap--main{max-height:calc(100vh - 55px)}.has-banner+.ap-o-burger-menu.mainmenuopen~.ap--main{max-height:calc(100vh - 55px - 31px)}.ap-o-burger-menu.mainmenuopen~.ap--footer{display:none}.-th{list-style:none;display:flex;flex-direction:column;height:100%;margin:1rem 0 0;padding:0;overflow-y:auto;-webkit-overflow-scrolling:touch}@media(max-width:240px){.-th{padding:1rem 0}}.-th .-th{margin-top:1rem}.-th .-th .-tp:last-child{margin-bottom:0}.-tp{margin-bottom:1rem;position:relative}.-tp:last-child{margin-top:auto}.-tp ul{display:none}.-td{position:absolute;left:0;top:0;width:100%;height:36px;padding:0;margin:0;background:none transparent;border:none;cursor:pointer;-webkit-appearance:none}.-td:focus{outline:5px auto -webkit-focus-ring-color}.-td:checked~ul{display:block}.-td:checked+.nav-icon .ap-a-ico{transform:rotate(0)}.-td+.nav-icon .ap-a-ico{display:inline-block;transform:rotate(-90deg)}.-tp .ap-a-ico{height:.6em;margin-bottom:.3em;margin-left:.3em;width:.6em}.-tv{position:relative;margin-right:20px;padding-bottom:10px;display:none}@media(max-width:240px){.-tv{margin-right:0}}@media(min-width:1024px){.-tv{margin-right:0;padding-right:30px;display:block}}.-tm{display:flex;align-items:center;font-size:11px;border:none;background:0 0}.-tm:hover{color:#005af0}.-tg{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;border:0;-webkit-appearance:none}@media(min-width:1024px){.-tg{width:calc(100% - 30px)}}.-ty{width:10px;height:10px;margin-left:5px}.-tb{list-style:none;display:none;position:absolute;right:15%;margin:0;padding:2px 8px;background:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07)}@media(max-width:240px){.-tb{overflow:auto;max-height:calc(100vh - 55px - 31px)}}.-tb:hover,.-tg:checked~.-tb,.-tg:hover~.-tb,.-tv .-tw{display:block}.-tb:focus-within{display:block}.mainmenuopen .-tv{display:block}.-tw{font-family:Poppins,system;font-weight:700;font-size:1.5em;color:#000}@media(min-width:1024px){.-tw{font-size:1rem}}.-tx{line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem}@media(min-width:1024px){.-tx{font-size:.875rem}}.-tx.active{text-decoration:underline}.-tw:hover{color:#005af0}.-tw.active{font-weight:700;color:#005af0}.ap--header{width:100%;max-width:2020px;margin:0 auto;position:-webkit-sticky;position:sticky;top:0;z-index:1001;background-color:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07)}.ap--header.mainmenuopen{z-index:1004}.ap--header.mainmenuopen~.ap--main{max-width:100vw;overflow-x:hidden}@media(min-width:1024px){.ap--header{top:0}.ap--header.has-banner{top:-31px}}.ap-o-header{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;max-width:1460px;padding:10px 0 0 20px;margin:0 auto}@media(min-width:1024px){.ap-o-header{display:flex;padding-left:30px}}.ap-o-header-home{position:-webkit-sticky;position:sticky;top:10px;display:flex;align-items:center;margin-right:auto;padding-bottom:10px;overflow:hidden}.ap-o-header-home-logo{height:30px;margin-right:6px;width:30px}.ap-o-header-home-sub-title,.ap-o-header-home-title{margin-left:4px;font-family:Poppins,system;font-weight:700;font-size:1.5em;color:#005af0}@media(min-width:1024px){.ap-o-header-home-sub-title,.ap-o-header-home-title{font-size:1.125rem}}.ap-o-header-home-sub-title{color:#000;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ap-o-header-main{display:none;flex:1 1 auto;padding:0 30px}@media(min-width:1024px){.ap-o-header-main{display:flex}}.ap-o-header-main-item{position:relative;display:flex;align-items:center;margin:0 18px -5px}.ap-o-header-main-link{display:flex;align-items:center;padding:0 0 14px;border:0;background:0 0}.ap-o-header-main-link-icon{font-size:8px;margin-left:5px;transform:rotate(0);transition:transform .2s ease}.ap-o-header-flyout:hover,.ap-o-header-main-link:focus~.ap-o-header-flyout,.ap-o-header-main-link:hover~.ap-o-header-flyout{opacity:1;pointer-events:all;transition:opacity .2s ease}.ap-o-header-flyout:focus-within{opacity:1;pointer-events:all;transition:opacity .2s ease}.ap-o-header-flyout{box-shadow:0 10px 25px 0 rgba(0,0,0,.2);position:absolute;top:95%;left:0;margin:0;padding:0 0 10px;pointer-events:none;opacity:0;list-style:none;background:#fff;border-radius:0 0 4px 4px;transition:opacity .2s ease}.ap-o-header-flyout:before{content:"";display:block;background:linear-gradient(180deg,rgba(0,0,0,.07) 0,hsla(0,0%,100%,.07));height:8px;margin-bottom:10px}.ap-o-header-flyout-item-secondary{margin:20px 0;white-space:nowrap;min-width:200px}.ap-o-header-flyout-item-secondary a:hover{color:#005af0}.ap-o-header-flyout-item-title{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-family:Poppins,system;font-weight:700;color:#000;line-height:1.4em}.ap-o-header-flyout-item-title.secondary{padding:0 15px}.ap-o-header-flyout-item-description{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;opacity:.75;line-height:1.25em}.ap-o-header-flyout-primary-item{position:relative;width:300px}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link{box-shadow:0 10px 25px 0 rgba(0,0,0,.2);background-color:#005af0}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info>*{color:#fff}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-stories .ap-o-header-flyout-item-description,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-stories .ap-o-header-flyout-item-title{color:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-email .ap-o-header-flyout-item-description,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-email .ap-o-header-flyout-item-title{color:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon{fill:#fff}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon.email,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon.stories{fill:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.websites{background:linear-gradient(225deg,#00dcc0,#005af0 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.stories{background:linear-gradient(225deg,#ec6600,#ffdc00 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.ads{background:linear-gradient(225deg,#eb49e1,#5500d7 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.email{background:linear-gradient(225deg,#09a600,#e1eb64 75%)}.ap-o-header-flyout-primary-item-link{display:flex;align-items:center;border-radius:4px;padding:10px;margin:0 5px}.ap-o-header-flyout-primary-item-link-info{margin:0 20px 0 15px}.ap-o-header-flyout-primary-item-link-icon{display:flex;font-size:medium;box-sizing:initial;justify-content:center;width:2em;height:2em}.ap-o-header-flyout-primary-item-link-icon.websites{fill:url(#gradient-websites) #000}.ap-o-header-flyout-primary-item-link-icon.stories{fill:url(#gradient-stories) #000}.ap-o-header-flyout-primary-item-link-icon.ads{fill:url(#gradient-ads) #000}.ap-o-header-flyout-primary-item-link-icon.email{fill:url(#gradient-email) #000}#blm-banner{background:#111;color:#eee;display:block;text-align:center;padding:.5em}.ap--main>.-tf:first-child{padding-top:54px;padding-bottom:3rem}.-lv .-tf{position:relative;display:flex;flex-wrap:wrap;width:100%;max-width:1440px;padding:0 20px;margin-left:auto;margin-right:auto}@media(max-width:767px){.-lv .-tf{padding:0 15px}.-lv .-tf>div,.-lv .-tf section{min-width:0}}@media(min-width:768px){.-lv .-tf{display:grid;grid-gap:30px;grid-template-columns:repeat(24,minmax(0,1fr));padding:0 30px;grid-gap:0}}@media(min-width:1024px){.-lv .-tf{padding:0 15px}}.-lv .-t,.-lv .ap--help{grid-column:1;position:relative;width:100%;background:#fafafc}@media(min-width:768px){.-lv .-t,.-lv .ap--help{grid-column:9/25}}@media(min-width:1024px){.-lv .-t,.-lv .ap--help{grid-column:7/25}.-lv .-t p.limit,.-lv .ap--help p.limit{max-width:70%}}@media(min-width:768px){.-lv .-t,.-lv .ap--help{grid-column:8/25;padding-left:30px;padding-right:30px}}@media(min-width:1024px){.-lv .-t,.-lv .ap--help{grid-column:6/25;padding-left:30px;padding-right:30px}}.-lv .-lm{display:flex;flex-wrap:wrap;margin-bottom:60px}@media(min-width:768px){.-lv .-lm{flex-wrap:nowrap}}.-lv .-lm .ap-a-btn{flex:1 0 auto;margin-right:10px;margin-bottom:10px}@media(min-width:768px){.-lv .-lm .ap-a-btn{flex:1 0 50%;max-width:250px}}@media(max-width:767px){.-lv .-lg{display:none}}.-lv .-ly{color:#005af0;box-shadow:none;background:transparent}.-lv .-oy{grid-column:auto;padding:0}@media(min-width:768px){.-lv .-oy{grid-column:1/8;grid-row:span 6;margin-right:20px}}@media(min-width:1024px){.-lv .-oy{grid-column:1/6}}.-lv .ap--toc{box-shadow:20px 25px 40px 0 rgba(0,0,0,.05)}.-lv .ap--toc~.-t{box-shadow:-30px -5px 30px -20px rgba(0,0,0,.05)}@media(min-width:768px){.-lv .ap--toc{grid-column:8/25}.-lv .ap--toc~.-t{padding-top:0}}@media(min-width:768px)and (min-width:768px){.-lv .ap--toc~.-t{grid-column:8/25;padding-left:30px}}@media(min-width:768px)and (min-width:1024px){.-lv .ap--toc~.-t{grid-column:6/20;padding-left:30px;padding-right:30px}}@media(min-width:768px)and (min-width:768px){.-lv .ap--toc~.ap--help~.-t{grid-column-end:25}}@media(min-width:768px)and (min-width:1024px){.-lv .ap--toc~.ap--help~.-t{grid-column-end:25}}@media(min-width:1024px){.-lv .ap--toc{background:#fafafc;grid-column:20/25;grid-row:span 3;padding-top:93px;padding-bottom:25px}.-lv .ap--toc~.-t{padding-top:62px}}@media(min-width:1024px)and (max-width:767px){.-lv .ap--toc~.-t{padding-left:15px;padding-right:15px}}.-lv .-oy+.-t,.-lv .ap--toc+.-t{padding-top:62px}@media(max-width:767px){.-lv .-oy+.-t,.-lv .ap--toc+.-t{padding-left:15px;padding-right:15px}}@media(min-width:1024px){.-lv .-oy+.-t:nth-of-type(2),.-lv .-oy+.-t:nth-of-type(3),.-lv .ap--toc+.-t:nth-of-type(2),.-lv .ap--toc+.-t:nth-of-type(3){grid-row:1}}.-lv .-t h1{font-size:1.8rem;margin-top:2rem}.-lv .-t h2{font-size:1.414rem;margin-top:1.8rem}.-lv .-t h3{font-size:1.2rem}.-lv .-t h4{font-size:1rem}.-lv .ap--title{margin-top:20px}.-lv .ap--format-tags{list-style:none;margin:0;padding:0}.-lv .-ta{max-height:500px}.-ta{display:flex;overflow-x:auto;margin:1.1rem 0 0;padding:0 1em;color:#fff;line-height:1.3em;background:#20202a;font-size:.9em}.-ta:after{content:" ";-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.-ta::-webkit-scrollbar{width:6px;height:6px}.-ta::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.-ta::-webkit-scrollbar-corner{background-color:transparent}.-ta::-webkit-scrollbar-thumb{border-radius:0}@media(min-width:768px){.-ta{max-width:100%;margin-right:-30px}}.-ta code,.-ta pre{font-family:Fira Mono,monospace;font-weight:500;white-space:pre;font-size:.9rem;padding:unset;word-break:normal;color:inherit;background:0 0}.-ta .hll{background-color:#49483e}.-ta .c{color:#75715e}.-ta .k{color:#66d9ef}.-ta .l{color:#ae81ff}.-ta .n{color:#f8f8f2}.-ta .o{color:#f15a5a}.-ta .p{color:#f8f8f2}.-ta .c1,.-ta .ch,.-ta .cm,.-ta .cp,.-ta .cpf,.-ta .cs{color:#75715e}.-ta .gd{color:#f15a5a}.-ta .ge{font-style:italic}.-ta .gi{color:#a6e22e}.-ta .gs{font-weight:700}.-ta .gu{color:#75715e}.-ta .kc,.-ta .kd{color:#66d9ef}.-ta .kn{color:#f15a5a}.-ta .kp,.-ta .kr,.-ta .kt{color:#66d9ef}.-ta .ld{color:#e6db74}.-ta .m{color:#ae81ff}.-ta .s{color:#e6db74}.-ta .na{color:#a6e22e}.-ta .nb{color:#f8f8f2}.-ta .nc{color:#a6e22e}.-ta .no{color:#66d9ef}.-ta .nd{color:#a6e22e}.-ta .ni{color:#f8f8f2}.-ta .ne,.-ta .nf{color:#a6e22e}.-ta .nl,.-ta .nn{color:#f8f8f2}.-ta .nx{color:#fff}.-ta .py{color:#f8f8f2}.-ta .nt{color:#f15a5a}.-ta .nv{color:#f8f8f2}.-ta .ow{color:#f15a5a}.-ta .w{color:#f8f8f2}.-ta .mb,.-ta .mf,.-ta .mh,.-ta .mi,.-ta .mo{color:#ae81ff}.-ta .dl,.-ta .s2,.-ta .sa,.-ta .sb,.-ta .sc,.-ta .sd{color:#e6db74}.-ta .se{color:#ae81ff}.-ta .s1,.-ta .sh,.-ta .si,.-ta .sr,.-ta .ss,.-ta .sx{color:#e6db74}.-ta .bp{color:#f8f8f2}.-ta .fm{color:#a6e22e}.-ta .vc,.-ta .vg,.-ta .vi,.-ta .vm{color:#f8f8f2}.-ta .il{color:#ae81ff}</style><link rel="manifest" href="/manifest.json"></head><body data-available-formats="websites" class="ap--websites"> <amp-sidebar id="drawermenu" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <a href="/" class="caps text-decoration-none block p1">Products</a> <hr> <a class="caps text-decoration-none block p1" href="/samples_templates/product_browse_page/preview/">Fruit</a> <a class="caps text-decoration-none block p1" href="/samples_templates/product_browse_page/preview/">Vegetable</a> <a class="caps text-decoration-none block p1" href="/samples_templates/product_browse_page/preview/">More</a> </amp-sidebar> <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="stackoverflow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 25"><path d="M14.2 14.7h1.6V25H0V14.7h1.6v8.6h12.5c.1-2.8.1-5.7.1-8.6zM9.5 3.2c1.8 2.7 3.6 5.4 5.4 8.2.6-.4 1.1-.8 1.7-1.2C14.8 7.5 13 4.8 11.2 2c-.5.5-1.1.8-1.7 1.2zm5.1 8.5c-2.8-1.7-5.5-3.3-8.2-5-.4.6-.7 1.2-1.1 1.8 2.7 1.7 5.5 3.3 8.2 5 .4-.6.8-1.2 1.1-1.8zM17.4 0c-.7.1-1.3.2-2 .4.5 3.2 1.1 6.5 1.6 9.7.7-.1 1.3-.2 2-.4-.5-3.2-1.1-6.5-1.6-9.7zm-4 14.1c-3.1-.9-6.2-1.7-9.2-2.6-.2.7-.4 1.4-.5 2 3.1.9 6.2 1.7 9.2 2.6.1-.6.3-1.3.5-2zm-.9 5.5H3v2.1h9.5v-2.1zm.3-2.7c-3.2-.3-6.3-.6-9.5-.9-.1.7-.1 1.4-.2 2.1 3.2.3 6.3.6 9.5.9 0-.8.1-1.4.2-2.1z"/></symbol><symbol id="github" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M32 0.792c-17.68 0-32 14.328-32 32 0 14.141 9.168 26.133 21.88 30.36 1.6 0.301 2.187-0.688 2.187-1.539 0-0.76-0.027-2.773-0.040-5.44-8.901 1.931-10.779-4.293-10.779-4.293-1.456-3.693-3.56-4.68-3.56-4.68-2.899-1.984 0.224-1.944 0.224-1.944 3.213 0.224 4.901 3.296 4.901 3.296 2.853 4.893 7.491 3.48 9.32 2.661 0.288-2.069 1.112-3.48 2.027-4.28-7.107-0.8-14.576-3.552-14.576-15.813 0-3.493 1.24-6.347 3.293-8.587-0.36-0.808-1.44-4.061 0.28-8.469 0 0 2.68-0.859 8.8 3.28 2.56-0.712 5.28-1.064 8-1.080 2.72 0.016 5.44 0.368 8 1.080 6.080-4.139 8.76-3.28 8.76-3.28 1.72 4.408 0.64 7.661 0.32 8.469 2.040 2.24 3.28 5.093 3.28 8.587 0 12.293-7.48 15-14.6 15.787 1.12 0.96 2.16 2.923 2.16 5.92 0 4.283-0.040 7.723-0.040 8.763 0 0.84 0.56 1.84 2.2 1.52 12.803-4.197 21.963-16.197 21.963-30.317 0-17.672-14.328-32-32-32z"/> </symbol><symbol id="wordpress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M57.251 18.2A28.688 28.688 0 0 1 60.766 32c0 10.611-5.749 19.883-14.301 24.867l8.787-25.405c1.64-4.107 2.187-7.389 2.187-10.304 0-1.08-.069-2.08-.187-2.96zm-21.283.277c1.725-.08 3.285-.28 3.285-.28 1.552-.2 1.371-2.48-.179-2.397 0 0-4.68.36-7.68.36-2.837 0-7.6-.4-7.6-.4-1.56-.08-1.763 2.28-.2 2.36 0 0 1.44.163 3 .24l4.48 12.28-6.32 18.88L14.277 18.4c1.731-.08 3.291-.267 3.291-.267 1.56-.2 1.376-2.48-.173-2.389 0 0-4.656.368-7.664.368-.533 0-1.168-.021-1.84-.04C13.096 8.4 21.96 3.24 32 3.24a28.642 28.642 0 0 1 19.429 7.555c-.123-.008-.243-.024-.376-.024-2.827 0-4.832 2.461-4.832 5.104 0 2.373 1.368 4.381 2.827 6.749 1.096 1.92 2.373 4.381 2.373 7.939 0 2.44-.944 5.317-2.189 9.277l-2.867 9.56-10.4-30.96.003.037zM32 60.757c-2.824 0-5.549-.408-8.128-1.165l8.632-25.083 8.84 24.232c.064.141.133.269.208.397A28.794 28.794 0 0 1 32 60.762zM3.229 32c0-4.171.896-8.133 2.493-11.707L19.439 57.89C9.85 53.226 3.231 43.389 3.228 31.999zM32 0C14.36 0 0 14.36 0 32s14.36 32 32 32 32-14.36 32-32S49.64 0 32 0z"/></symbol><symbol id="youtube" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M62.664 16.542c-.773-2.708-2.862-4.797-5.514-5.556l-.057-.014c-4.989-1.336-25.065-1.336-25.065-1.336s-20.026-.027-25.065 1.337c-2.708.773-4.797 2.862-5.556 5.514l-.014.057C.507 21.107 0 26.354 0 31.72l.001.327v-.017.252a83.84 83.84 0 0 0 1.475 15.695l-.083-.521c.773 2.708 2.862 4.797 5.513 5.556l.057.014c4.983 1.339 25.065 1.339 25.065 1.339s20.023 0 25.065-1.339c2.708-.773 4.797-2.862 5.556-5.514l.014-.057c.85-4.469 1.336-9.609 1.336-14.863l-.002-.595v.03c.002-.184.002-.403.002-.621 0-5.255-.486-10.396-1.416-15.38l.08.515zM25.621 41.608V22.42l16.71 9.609z"/></symbol><symbol id="twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M63.875 12.186c-2.36 1.037-4.88 1.744-7.533 2.067 2.704-1.629 4.784-4.197 5.768-7.261-2.536 1.48-5.346 2.557-8.338 3.157-2.389-2.557-5.794-4.157-9.576-4.157-7.245 0-13.119 5.874-13.119 13.111 0 1.040 0.12 2.040 0.339 2.997-10.906-0.515-20.572-5.752-27.042-13.669-1.139 1.925-1.776 4.162-1.776 6.6 0 4.56 2.32 8.568 5.834 10.922-2.152-0.069-4.176-0.661-5.941-1.643v0.163c0 6.36 4.514 11.663 10.522 12.871-1.101 0.296-2.264 0.456-3.456 0.456-0.837 0-1.64-0.080-2.443-0.229 1.683 5.208 6.52 9.005 12.277 9.112-4.48 3.517-10.157 5.613-16.271 5.613-1.040 0-2.077-0.061-3.12-0.179 5.837 3.717 12.714 5.89 20.151 5.89 24.143 0 37.329-19.989 37.329-37.294 0-0.557 0-1.12-0.040-1.68 2.563-1.837 4.8-4.16 6.56-6.794l-0.125-0.053z"/> </symbol><symbol id="download" viewBox="0 0 64 64"> <path d="M8.8 62.32c0-0.88 0.72-1.68 1.68-1.68 10.8 0 32.32 0 43.040 0 0.88 0 1.68 0.72 1.68 1.68 0 0.88-0.72 1.68-1.68 1.68-10.8 0-32.32 0-43.040 0-0.96 0-1.68-0.72-1.68-1.68z"/> <path d="M49.44 34.56c0.72-0.72 0.72-1.84 0-2.56s-1.84-0.72-2.56 0l-13.040 13.040v-43.28c0-0.96-0.88-1.76-1.84-1.76-1.040 0-1.84 0.8-1.84 1.76v43.28l-13.040-13.12c-0.72-0.72-1.84-0.72-2.56 0s-0.72 1.84 0 2.56l16.24 16.24c0.72 0.72 1.84 0.72 2.56 0l16.080-16.16z"/> </symbol><symbol id="internal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M43.16 10.18c-0.881-0.881-2.322-0.881-3.203 0s-0.881 2.322 0 3.203l16.335 16.335h-54.051c-1.281 0-2.242 1.041-2.242 2.242 0 1.281 0.961 2.322 2.242 2.322h54.051l-16.415 16.335c-0.881 0.881-0.881 2.322 0 3.203s2.322 0.881 3.203 0l20.259-20.259c0.881-0.881 0.881-2.322 0-3.203l-20.179-20.179z"/></symbol><symbol id="external" viewBox="0 0 64 64"> <path d="M28.879 11.24c-0.841-0.841-2.206-0.841-3.048 0s-0.841 2.207 0 3.048l15.543 15.543h-39.241c-1.219 0-2.133 0.987-2.133 2.133 0 1.219 0.914 2.207 2.133 2.207h39.241l-15.616 15.543c-0.841 0.841-0.841 2.206 0 3.048 0.835 0.841 2.206 0.841 3.048 0l19.273-19.279c0.841-0.841 0.841-2.206 0-3.048l-19.2-19.194zM59.429 27.392c2.511 0 4.571 2.060 4.571 4.571s-2.060 4.571-4.571 4.571-4.571-2.060-4.571-4.571 2.060-4.571 4.571-4.571z"/> </symbol><symbol id="sidebar-toggle" viewBox="0 0 64 64"> <path d="M36.032 7.9c0.985-0.996 2.624-0.996 3.643 0 0.985 0.963 0.985 2.565 0 3.526l-18.471 18.060h40.246c1.421 0.002 2.55 1.107 2.55 2.496s-1.129 2.529-2.55 2.529h-40.246l18.471 18.026c0.985 0.996 0.985 2.601 0 3.562-1.019 0.996-2.66 0.996-3.643 0l-22.844-22.336c-1.019-0.963-1.019-2.565 0-3.526l22.844-22.338z"/> <path d="M2.071 3.012c1.144 0 2.071 0.927 2.071 2.071v53.835c0 1.144-0.927 2.071-2.071 2.071s-2.071-0.927-2.071-2.071v-53.835c0-1.144 0.927-2.071 2.071-2.071z"/> </symbol><symbol id="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M39.503 32l22.963-22.963c2.046-2.046 2.046-5.457 0-7.503s-5.456-2.046-7.503 0l-22.963 22.963-22.963-22.963c-2.046-2.046-5.457-2.046-7.503 0s-2.046 5.457 0 7.503l22.963 22.963-22.963 22.963c-2.046 2.046-2.046 5.456 0 7.503s5.457 2.046 7.503 0l22.963-22.963 22.963 22.963c2.046 2.046 5.456 2.046 7.503 0s2.046-5.456 0-7.503l-22.963-22.963z"/> </symbol><symbol id="menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M2.133 13.867h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> <path d="M2.133 28.8h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> <path d="M2.133 43.733h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> </symbol><symbol id="wrench" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M64 18.267c0 1.608-0.214 3.21-0.636 4.767l0.008 0.169c0.028 0.598-0.186 1.18-0.592 1.619-2.713 7.035-9.527 11.712-17.107 11.712-1.852 0-3.671-0.275-5.427-0.819l-25.943 25.854c-1.573 1.567-3.667 2.431-5.889 2.431s-4.318-0.864-5.89-2.431l-0.087-0.087c-3.25-3.238-3.25-8.508 0-11.747l23.75-23.669c0.66-0.657 1.046-1.529 1.090-2.456l0.173-3.404c-0.070-0.657-0.105-1.308-0.105-1.939 0-10.074 8.221-18.267 18.327-18.267 3.298 0 6.532 0.883 9.353 2.555 0.602 0.357 1.005 0.979 1.083 1.675 0.011 0.098 0.017 0.161 0.020 0.237 0.044 1.158-0.297 1.536-9.858 10.586l3.847 3.921c1.149-1.058 3.185-2.929 8.997-8.27 0.542-0.497 1.293-0.697 2.010-0.534 0.719 0.163 1.311 0.668 1.583 1.351 0.856 2.147 1.291 4.418 1.292 6.745zM59.819 22.4c0.395-1.346 0.595-2.737 0.594-4.132 0-1.194-0.141-2.367-0.422-3.507-2.922 2.685-8.959 8.231-9.040 8.307-0.536 0.494-1.37 0.474-1.88-0.046l-6.953-7.087c-0.252-0.258-0.39-0.605-0.384-0.965s0.158-0.702 0.42-0.95c2.985-2.825 7.47-7.107 9.54-9.166-1.884-0.84-3.936-1.278-6.022-1.278-8.129 0-14.742 6.59-14.742 14.691 0 0.533 0.032 1.090 0.096 1.654 0.007 0.071 0.010 0.142 0.007 0.214l-0.174 3.646c-0.087 1.818-0.847 3.528-2.138 4.816l-23.75 23.668c-1.85 1.844-1.85 4.844 0 6.688l0.087 0.087c0.897 0.893 2.088 1.385 3.356 1.385s2.46-0.492 3.355-1.385l26.429-26.338c0.2-0.199 0.419-0.39 0.693-0.601 0.377-0.292 0.882-0.363 1.326-0.187 1.743 0.692 3.578 1.044 5.456 1.044 6.243 0 11.831-3.943 13.905-9.811 0.044-0.126 0.107-0.244 0.187-0.351-0.002-0.134 0.016-0.268 0.054-0.396z"/> </symbol><symbol id="template" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M1.44 0h62.56v64h-64v-64h1.44zM20.64 60.88v-39.52h-17.76v39.6h17.76zM23.44 21.36v39.6h37.44v-39.6h-37.44zM2.88 18.24h58.080v-15.36h-58.080v15.36z"/></symbol><symbol id="learn" viewBox="0 0 64 64"> <path d="M57.674 35.257c0 1.779 1.416 3.221 3.163 3.221s3.163-1.442 3.163-3.221c0-1.155-0.602-2.16-1.498-2.728v-8.973c0-0.682-0.401-1.297-1.018-1.563l-29.585-12.716c-0.413-0.178-0.881-0.178-1.295 0l-29.586 12.716c-0.617 0.265-1.018 0.881-1.018 1.563s0.401 1.297 1.018 1.562l6.662 2.863v17.587c0 4.624 7.288 9.29 23.571 9.29s23.571-4.666 23.571-9.29v-17.587l4.349-1.869v6.417c-0.896 0.569-1.497 1.573-1.497 2.728zM51.491 45.567c0 1.575-4.797 5.898-20.24 5.898s-20.24-4.323-20.24-5.898v-16.155l19.593 8.421c0.207 0.089 0.427 0.134 0.647 0.134s0.441-0.045 0.647-0.134l19.593-8.421v16.155zM31.251 34.43l-25.303-10.875 25.303-10.875 25.302 10.875-25.302 10.875z"/> </symbol><symbol id="examples-flyout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 20"><g><path d="M20 19.3a.9.9 0 1 1 0-1.7 1.9 1.9 0 0 0 1.9-1.9v-3a3.6 3.6 0 0 1 1.3-2.7 3.6 3.6 0 0 1-1.3-2.8v-3A1.9 1.9 0 0 0 20 2.3a.9.9 0 1 1 0-1.7 3.6 3.6 0 0 1 3.6 3.6v3a1.9 1.9 0 0 0 2 2v1.6a1.9 1.9 0 0 0-2 2v3a3.6 3.6 0 0 1-3.6 3.5zm-14 0a3.6 3.6 0 0 1-3.6-3.6v-3a1.9 1.9 0 0 0-2-1.9V9.1a1.9 1.9 0 0 0 2-1.9v-3A3.6 3.6 0 0 1 6 .6a.9.9 0 1 1 0 1.8A1.9 1.9 0 0 0 4 4.2v3A3.6 3.6 0 0 1 2.8 10a3.6 3.6 0 0 1 1.3 2.7v3A1.9 1.9 0 0 0 6 17.6a.9.9 0 1 1 0 1.7z"/><g transform="translate(5.8 8.5)"><circle cx="12.3" cy="1.4" r="1.4"/><circle cx="7.3" cy="1.4" r="1.4"/><circle cx="2.2" cy="1.4" r="1.4"/></g></g></symbol><symbol id="components-flyout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 22"><path d="M8.7 17l-2.5-2.2-4-3.5-.9-.8v1l2.5-2.2 4-3.5 1-.8c.2-.3.2-.8 0-1a.8.8 0 0 0-1.2 0L5.1 6l-4 3.6-.8.8c-.3.2-.3.8 0 1l2.5 2.2 4 3.6.8.8c.3.2.8.3 1.1 0 .3-.3.3-.8 0-1.1zM19.3 5l2.5 2.2 4 3.5.9.8v-1l-2.5 2.2-4 3.5-.9.8c-.3.3-.3.8 0 1 .3.4.8.3 1 0L23 16l4-3.6.9-.8c.3-.2.3-.8 0-1l-2.5-2.3-4-3.5-1-.8c-.2-.3-.7-.3-1 0-.3.3-.3.8 0 1zm-8 16.4l.7-2 1.6-5a3563.7 3563.7 0 0 1 2-5.8l1.7-5.1.8-2.5c.2-.4-.1-.9-.5-1a.8.8 0 0 0-1 .6c-.1.7-.4 1.3-.6 2l-1.6 4.9-2 5.9-1.7 5-.8 2.6c-.2.4.1.8.5 1a.8.8 0 0 0 1-.6z"/></symbol><symbol id="guides-documents" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 32"><path d="M6.7 28H1.2c-.4 0-.6-.4-.6-.8L.5.7c0-.4.3-.7.7-.7h21.1c.5 0 .7.3.7.7V2c0 .5-.2.7-.7.7-.4 0-.6-.2-.6-.7v-.6H1.8L2 26.6h4.8c.4 0 .7.2.7.6 0 .4-.3.7-.7.7z"/><path d="M8 6.8H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 10.9H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 15H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 19H6c-.4 0-.7-.2-.7-.6 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7z"/><path d="M29.8 4H8.7c-.5 0-.7.4-.7.8v26.5c0 .4.3.7.7.7h21.1c.4 0 .7-.3.7-.7V4.8c0-.4-.3-.7-.7-.7zm-.6 26.6H9.4V5.4h19.8v25.2z"/><path d="M18.1 22.8h-.6l.6-3.8h-1.9c-.2 0-.3-.1-.3-.3v-.2l3.4-5.8h.7l-.7 3.8h2c.2 0 .3.1.3.3v.2L18 22.8z"/></symbol><symbol id="start" viewBox="0 0 64 64"> <path d="M63.195 1.874c-0.143-0.52-0.549-0.926-1.069-1.069-10.765-2.978-20.385 2.978-24.355 6.948l-11.452 11.452-5.421-1.756c-3.551-1.163-7.454-0.217-10.078 2.443l-3.359 3.359c-0.582 0.594-0.582 1.544 0 2.138l7.329 7.329-4.199 6.948c-0.343 0.593-0.25 1.342 0.229 1.832l11.681 11.605c0.471 0.504 1.223 0.63 1.832 0.305l6.948-4.123h0.076l7.329 7.329c0.594 0.582 1.544 0.582 2.138 0l3.359-3.359c2.66-2.624 3.606-6.527 2.443-10.078l-1.756-5.421 11.452-11.452c3.894-4.047 9.849-13.666 6.871-24.431zM23.799 50.126l-9.925-9.925 3.13-5.268 12.063 12.063-5.268 3.13zM54.109 24.015l-12.139 12.139c-0.4 0.399-0.547 0.987-0.382 1.527l2.061 6.337c0.783 2.448 0.136 5.128-1.68 6.948l-2.29 2.29-29.012-29.012 2.29-2.29c1.819-1.815 4.5-2.463 6.948-1.68l6.337 2.061c0.54 0.165 1.128 0.018 1.527-0.382l12.216-12.063c3.436-3.359 11.452-8.398 20.461-6.337 2.061 9.085-2.978 17.102-6.337 20.461z"/> <path d="M10.667 51.195l-9.009 9.009c-0.478 0.358-0.703 0.963-0.576 1.547s0.583 1.040 1.167 1.167c0.584 0.127 1.188-0.098 1.547-0.576l9.009-9.009c0.456-0.608 0.396-1.459-0.142-1.996s-1.388-0.598-1.996-0.142z"/> <path d="M11.66 63.563c0.594 0.582 1.544 0.582 2.138 0l4.581-4.581c0.456-0.608 0.395-1.459-0.142-1.996s-1.388-0.598-1.996-0.142l-4.581 4.581c-0.582 0.594-0.582 1.544 0 2.138z"/> <path d="M1.505 52.798c0.403-0.006 0.787-0.17 1.069-0.458l4.581-4.581c0.478-0.358 0.703-0.963 0.576-1.547s-0.583-1.040-1.167-1.167c-0.584-0.127-1.188 0.098-1.547 0.576l-4.581 4.581c-0.428 0.436-0.554 1.086-0.322 1.65s0.78 0.937 1.391 0.945z"/> <path d="M43.726 13.021c-2.003 2.003-2.003 5.25 0 7.253s5.25 2.003 7.253 0c2.003-2.003 2.003-5.25 0-7.253s-5.25-2.003-7.253 0zM48.841 18.136c-0.699 0.692-1.79 0.794-2.605 0.243s-1.127-1.601-0.745-2.508c0.382-0.907 1.351-1.417 2.315-1.219s1.653 1.050 1.646 2.033c-0.004 0.545-0.223 1.067-0.611 1.451z"/> </symbol><symbol id="amp-email" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-email" x1="76.2776137%" x2="20.8316146%" y1="-25.8400575%" y2="121.578822%"> <stop offset="0%" stop-color="#F1F068"/> <stop offset="46.2139774%" stop-color="#96D64F"/> <stop offset="100%" stop-color="#2DB932"/> </linearGradient> </defs> <path d="M64 14.080c0-3.291-2.56-5.851-5.851-5.851h-52.297c-3.291 0-5.851 2.56-5.851 5.851v35.84c0 3.291 2.56 5.851 5.851 5.851h52.297c3.291 0 5.851-2.56 5.851-5.851v-35.84zM5.851 11.154h52.297c0.183 0 0.366 0 0.549 0l-24.503 25.417c-0.549 0.549-1.28 0.914-2.194 0.914-0.731 0-1.646-0.366-2.194-0.914l-24.32-25.417c0 0 0.183 0 0.366 0zM2.926 14.080c0-0.366 0-0.731 0.183-1.097l15.36 16.091-15.543 19.2v-34.194zM58.149 52.846h-52.297c-0.731 0-1.646-0.366-2.194-0.914l16.823-20.663 7.131 7.497c1.097 1.097 2.56 1.829 4.206 1.829s3.109-0.731 4.206-1.829l6.583-6.949 17.371 20.114c-0.366 0.549-1.097 0.914-1.829 0.914v0zM61.074 48.274l-16.091-18.834 15.909-16.64c0.183 0.366 0.183 0.731 0.183 1.097v34.377z"/> </symbol><symbol id="amp-ads" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-ads" x1="100%" x2="14.5415777%" y1="0%" y2="123.368881%"> <stop offset="0%" stop-color="#FF52E1"/> <stop offset="100%" stop-color="#5500D7"/> </linearGradient> </defs> <path d="M56.399 14.68c3.654-3.846 9.616-10.963 6.924-13.847-2.885-2.885-10.001 3.269-13.847 6.731l-0.577-0.577c-0.385-0.385-0.962-0.577-1.539-0.385l-15.963 3.077c-0.385 0-0.577 0.192-0.769 0.385l-30.195 30.195c-0.577 0.577-0.577 1.731 0 2.308l20.963 20.963c0.385 0.385 0.769 0.385 1.154 0.385s0.769-0.192 1.154-0.385l30.003-30.003c0.192-0.192 0.385-0.577 0.385-0.769v0l3.077-15.963c0.192-0.577 0-1.154-0.385-1.539l-0.385-0.577zM53.899 16.988l-2.885 14.424-28.464 28.656-18.655-18.655 28.656-28.656 14.424-2.885c-1.539 1.731-4.039 4.423-5.962 7.116-1.923-0.192-3.654 0.385-5.193 1.923-2.5 2.5-2.5 6.731 0 9.232s6.731 2.5 9.232 0c1.346-1.346 2.116-3.27 1.923-5.193-0.192-1.154-0.577-2.308-1.154-3.077-0.192-0.385-0.385-0.577-0.769-0.769-0.192-0.192-0.577-0.577-0.769-0.769 1.154-1.731 2.885-3.654 5.193-5.962l2.5 2.5 1.923 2.116zM43.321 24.873c-0.192 0.385-0.385 0.577-0.577 0.962-1.346 1.346-3.27 1.346-4.616 0s-1.346-3.27 0-4.616c0.192-0.192 0.577-0.385 0.962-0.577 1.154-0.577 2.308-0.385 3.462 0.385 0.192 0 0.192 0.192 0.385 0.192 0 0 0.192 0.192 0.192 0.385 0.577 0.962 0.769 2.116 0.192 3.27zM54.091 12.372l-2.5-2.5c4.039-3.846 7.308-5.77 8.847-6.347-0.577 1.539-2.5 4.616-6.347 8.847z"/> </symbol><symbol id="amp-stories" viewBox="0 0 36 32"> <defs> <linearGradient id="gradient-stories" x1="81.726943%" x2="23.7165981%" y1="-28.3832685%" y2="119.978062%"> <stop offset="0%" stop-color="#FFF300"/> <stop offset="100%" stop-color="#FF8F00"/> </linearGradient> </defs> <path d="M7.111 0h21.333v32h-21.333v-32zM9.481 2.37v27.259h16.593v-27.259h-16.593zM0 4.741h2.37v22.519h-2.37v-22.519zM33.185 4.741h2.37v22.519h-2.37v-22.519z"/> </symbol><symbol id="amp-websites" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-websites" x1="81.8129399%" x2="33.8766928%" y1="0%" y2="94.4849088%"> <stop offset="0%" stop-color="#00DCC0"/> <stop offset="100%" stop-color="#005AF0"/> </linearGradient> </defs> <path d="M63.196 4.646h-62.253c-0.566 0-0.943 0.377-0.943 0.755v53.010c0 0.566 0.377 0.943 0.943 0.943h62.253c0.566 0 0.755-0.377 0.755-0.755v-53.198c0.189-0.377-0.189-0.755-0.755-0.755zM3.395 18.040h57.348v33.202h-57.348v-33.202zM60.744 7.853v6.98h-57.348v-6.98h57.348zM3.395 56.147v-1.509h57.348v1.509h-57.348zM9.055 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM12.828 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM18.487 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM51.123 39.734l-11.13-13.96c-0.189-0.189-0.377-0.377-0.755-0.377v0c-0.189 0-0.566 0-0.755 0.377l-8.3 9.621-4.716-6.225c-0.189-0.189-0.377-0.377-0.755-0.377s-0.566 0-0.755 0.377l-8.866 10.376c-0.377 0.377-0.189 0.943 0 1.132s0.377 0.189 0.566 0.189c0.189 0 0.566 0 0.754-0.377l8.3-9.621 4.528 5.471-2.452 3.018c-0.377 0.377-0.189 0.943 0 1.132 0.377 0.189 0.943 0.189 1.132 0l11.319-13.017 10.376 13.205c0.189 0.189 0.377 0.377 0.755 0.377 0.189 0 0.377 0 0.566-0.189 0.377-0.377 0.566-0.943 0.189-1.132zM27.165 26.718c1.509 0 2.641-1.132 2.641-2.641 0-1.321-1.132-2.641-2.641-2.641s-2.641 1.132-2.641 2.641c0 1.509 1.132 2.641 2.641 2.641zM27.165 23.322c0.566 0 0.943 0.377 0.943 0.943s-0.377 0.943-0.943 0.943-0.943-0.377-0.943-0.943c0-0.566 0.377-0.943 0.943-0.943z"/> </symbol><symbol id="angle-down-solid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M56.293 16.003c1.761-1.645 4.553-1.645 6.314 0 1.857 1.734 1.857 4.623 0 6.357l-27.45 25.638c-1.761 1.645-4.553 1.645-6.314 0l-27.45-25.638c-0.899-0.839-1.393-1.963-1.393-3.178s0.494-2.339 1.393-3.178c1.761-1.645 4.553-1.645 6.314 0l24.293 22.689 24.293-22.689z"/> </symbol><symbol id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g fill="none" fill-rule="evenodd"><path fill="#FFF" d="M0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15C6.716 0 0 6.716 0 15z"/><path fill="#005AF0" fill-rule="nonzero" d="M13.85 24.098h-1.14l1.128-6.823-3.49.005h-.05a.57.57 0 0 1-.568-.569c0-.135.125-.363.125-.363l6.272-10.46 1.16.005-1.156 6.834 3.508-.004h.056c.314 0 .569.254.569.568 0 .128-.05.24-.121.335L13.85 24.098zM15 0C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15z"/></g></symbol> </defs> </svg> <header class="ap--header " [class]="'ap--header ' + (mainmenuopen ? 'mainmenuopen' : '')" i-amphtml-binding> <div class="ap-o-header"> <a class="ap-o-header-home" href="/"> <svg class="ap-o-header-home-logo"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"/></svg> <span class="ap-o-header-home-title">AMP</span> </a> <nav class="ap-o-header-main"> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> About <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link websites" href="/about/websites/"> <div class="ap-o-header-flyout-primary-item-link-icon websites"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-websites"> <div class="ap-o-header-flyout-item-title">AMP Websites</div> <div class="ap-o-header-flyout-item-description">Create flawless web experiences</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link stories" href="/about/stories/"> <div class="ap-o-header-flyout-primary-item-link-icon stories"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-stories"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-stories"> <div class="ap-o-header-flyout-item-title">Web Stories</div> <div class="ap-o-header-flyout-item-description">Snackable Stories for everyone</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link ads" href="/about/ads/"> <div class="ap-o-header-flyout-primary-item-link-icon ads"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-ads"> <div class="ap-o-header-flyout-item-title">AMP Ads</div> <div class="ap-o-header-flyout-item-description">Super fast ads on the web</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link email" href="/about/email/"> <div class="ap-o-header-flyout-primary-item-link-icon email"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-email"> <div class="ap-o-header-flyout-item-title">AMP Email</div> <div class="ap-o-header-flyout-item-description">Next gen email</div> </div> </a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/about/how-amp-works/">How AMP works</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/about/mission-and-vision/">Vision & Mission</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/about/use-cases/">Use cases</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/success-stories/">Success Stories</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw active"> Documentation <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/documentation/">Get Started</a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/documentation/guides-and-tutorials/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#guides-documents"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Guides & Tutorials</div> <div class="ap-o-header-flyout-item-description">Get started with AMP</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/documentation/components/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#components-flyout"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Components</div> <div class="ap-o-header-flyout-item-description">The complete AMP library</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/documentation/examples/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#examples-flyout"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Examples</div> <div class="ap-o-header-flyout-item-description">Hands-on introduction to AMP</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/documentation/courses/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#learn"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Courses</div> <div class="ap-o-header-flyout-item-description">Learn AMP with free courses</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/documentation/templates/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#template"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Templates</div> <div class="ap-o-header-flyout-item-description">Ready to use</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/documentation/tools/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wrench"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Tools</div> <div class="ap-o-header-flyout-item-description">Begin building</div> </div> </a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Community <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/documentation/guides-and-tutorials/contribute/">Contribute</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/community/roadmap/">Roadmap</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/community/governance/">Governance</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/community/working-groups/access-subscriptions/">Working Groups</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Events <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/events/amp-fest-2020/">AMP Fest 2020</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/events/amp-roadshow/">AMP Roadshow</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <a class="ap-o-header-main-link -tw" href="https://blog.amp.dev">Blog</a> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Support <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/support/">Help</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/support/faq/">FAQ</a> </li> </ul> </div> </nav> <div class="-tv"> <span class="-tm" aria-label="Select a language" tabindex="-1"> <span class="-tw">EN</span> <div class="ap-a-ico -ty"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </span> <input class="-tg" type="checkbox" name="language-selector"> <div class="-tb" role="list"> <a class="-tw" href="/de/documentation/examples/e-commerce/product_page/" role="listitem">Deutsch</a> <a class="-tw" href="/fr/documentation/examples/e-commerce/product_page/" role="listitem">Français</a> <a class="-tw" href="/ar/documentation/examples/e-commerce/product_page/" role="listitem">العربية</a> <a class="-tw" href="/es/documentation/examples/e-commerce/product_page/" role="listitem">Español</a> <a class="-tw" href="/it/documentation/examples/e-commerce/product_page/" role="listitem">Italiano</a> <a class="-tw" href="/id/documentation/examples/e-commerce/product_page/" role="listitem">Indonesia</a> <a class="-tw" href="/ja/documentation/examples/e-commerce/product_page/" role="listitem">日本語</a> <a class="-tw" href="/ko/documentation/examples/e-commerce/product_page/" role="listitem">한국어</a> <a class="-tw" href="/pt_br/documentation/examples/e-commerce/product_page/" role="listitem">Português</a> <a class="-tw" href="/ru/documentation/examples/e-commerce/product_page/" role="listitem">Русский</a> <a class="-tw" href="/tr/documentation/examples/e-commerce/product_page/" role="listitem">Türkçe</a> <a class="-tw" href="/zh_cn/documentation/examples/e-commerce/product_page/" role="listitem">中文</a> <a class="-tw" href="/pl/documentation/examples/e-commerce/product_page/" role="listitem">Polski</a> <a class="-tw" href="/vi/documentation/examples/e-commerce/product_page/" role="listitem">Tiếng việt</a> </div> </div> </div> </header> <label class="ap-o-burger-menu-label" on="tap:AMP.setState({mainmenuopen: !mainmenuopen, noScrollState: !noScrollState})" [class]="'ap-o-burger-menu-label ' + (mainmenuopen ? 'mainmenuopen ' : '')" for="burger-menu" tabindex="0" role="button" aria-label="Burger Menu" i-amphtml-binding> <div class="ap-a-ico ap-o-burger-menu-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu"/></svg> </div> </label> <nav class="ap-o-burger-menu" [class]="mainmenuopen ? 'ap-o-burger-menu mainmenuopen' : 'ap-o-burger-menu'" i-amphtml-binding> <ul class="-th"> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> About </label> <input class="-td" type="checkbox" aria-label="About"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/about/websites/"> AMP Websites </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/about/stories/"> Web Stories </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/about/ads/"> AMP Ads </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/about/email/"> AMP Email </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/about/how-amp-works/"> How AMP works </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/about/mission-and-vision/"> Vision & Mission </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/about/use-cases/"> Use cases </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/success-stories/"> Success Stories </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw active"> Documentation </label> <input class="-td" type="checkbox" aria-label="Documentation" checked> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/documentation/"> Get Started </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/documentation/guides-and-tutorials/"> Guides & Tutorials </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/documentation/components/"> Components </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/documentation/examples/"> Examples </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/documentation/courses/"> Courses </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/documentation/templates/"> Templates </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/documentation/tools/"> Tools </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> Community </label> <input class="-td" type="checkbox" aria-label="Community"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/documentation/guides-and-tutorials/contribute/"> Contribute </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/community/roadmap/"> Roadmap </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/community/governance/"> Governance </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/community/working-groups/access-subscriptions/"> Working Groups </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> Events </label> <input class="-td" type="checkbox" aria-label="Events"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/events/amp-fest-2020/"> AMP Fest 2020 </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/events/amp-roadshow/"> AMP Roadshow </a> </li> </ul> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tw" href="https://blog.amp.dev">Blog</a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tw " href="/support/"> Help </a> </li> </ul> </nav> <div class="-oc"> <amp-position-observer on="enter:slideTransition.start; exit:slideTransition.start,slideTransition.reverse" intersection-ratios="1" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <amp-animation id="slideTransition" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":"150ms","fill":"both","easing":"ease-out","iterations":"1","animations":[{"selector":".label-title","keyframes":[{"transform":"scale3d(0, 1, 1)"},{"transform":"scale3d(1, 1, 1)"}]}]}</script> </amp-animation> </div> <amp-user-notification class="-fv i-amphtml-layout-nodisplay" id="format-filter-hint" layout="nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-user-notification> <div class="-fd" aria-hidden="true"> <div class="-fm"> <div class="-fg">Select your format for a more streamlined experience</div> <button class="-fy" on="tap:format-filter-hint.dismiss"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"/></svg> </button> </div> </div> <main class="ap--main -lv"> <div class="-tf"> <input class="-od ap-a-sidebar-mobile-toggle-input-sidebar" type="checkbox" name="sidebar" id="sidebar" autocomplete="off"> <input class="-om ap-a-sidebar-desktop-toggle-input-sidebar" type="checkbox" name="sidebar-desktop" id="sidebar-desktop" autocomplete="off"> <span id="ap--sidebar-content" class="-oy"></span> <section class="ap--toc"> <div class="ap-o-toc" [class]="contentmenuopen ? 'ap-o-toc contentmenuopen' : 'ap-o-toc'" i-amphtml-binding> <label class="ap-o-toc-toggle" for="toc" on="tap:AMP.setState({contentmenuopen: !contentmenuopen})" role="contentmenutrigger" tabindex="0"> <p class="ap-o-toc-hl">Table of contents</p> </label> <input class="-oh -of" type="checkbox" name="toc" id="toc" autocomplete="off"> <ul> <li> <a href="#product-page">Product Page</a> <ul> <li> <a href="#introduction">Introduction</a> <a href="#metadata">Metadata</a> <a href="#navigation">Navigation</a> <a href="#header-with-search">Header with Search</a> <a href="#social-sharing">Social Sharing</a> <a href="#video">Video</a> <a href="#slides-preview-gallery">Slides preview Gallery</a> <a href="#image-gallery">Image Gallery</a> <a href="#full-screen-image">Full screen image</a> <a href="#product-configuration">Product Configuration</a> <a href="#product-price">Product price</a> <a href="#product-page-<a-name="add-to-cart-button"></a>">Product page <a name="add-to-cart-button"></a></a> <a href="#tab-panels">Tab panels</a> <a href="#dynamic-related-product-lists">Dynamic Related Product Lists</a> <a href="#user-analytics">User Analytics</a> </li> </ul> </li> </ul> </div> </section> <section class="-t"> <label class="-op -ol ap-a-sidebar-mobile-toggle-label-sidebar" for="sidebar" on="tap:sidebar-left.toggle" role="categoriemenutrigger" tabindex="0"> <span class="label-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sidebar-toggle"/></svg></span> <span class="label-title">Toggle Sidebar</span> </label> <label class="-op -og ap-a-sidebar-desktop-toggle-label-sidebar" for="sidebar-desktop" role="categoriemenutrigger-desktop" tabindex="0"> <span class="label-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sidebar-toggle"/></svg></span> <span class="label-title">Toggle Sidebar</span> </label> <ul class="ap--format-tags"> <li class="ap--format-tag ap-a-format-tag ap-a-format-tag-websites">websites</li> </ul> <nav class="-ou"> <a class="ap-m-breadcrumbs-crumb" href="/documentation/">Documentation</a> <span class="ap-m-breadcrumbs-divider"> <svg class="ap-a-ico -oa"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <a class="ap-m-breadcrumbs-crumb" href="/documentation/examples/">Examples</a> </nav> <h1 class="ap--title" id="product-page">Product Page</h1> <div class="-lm"> <a class="ap-a-btn" href="/documentation/examples/e-commerce/product_page//../preview/">View demo</a> <a class="ap-a-btn -lg -ly" href="https://playground.amp.dev/?url=https://preview.amp.dev/documentation/examples/e-commerce/product_page">Open in playground</a> </div> <h2 id="introduction">Introduction</h2> <p>This sample showcases how to build a product page in AMP HTML.</p> <h2 id="metadata">Metadata</h2> <p>The page indexing requires schema.org markup for one of the following types: Type, AggregateRating, Offers. <a href="https://developers.google.com/structured-data/carousels/top-stories#markup_specification">Learn more</a>.</p> <div class="ap-o-code-preview"> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/ld+json"</span><span class="p">></span> <span class="p">{</span> <span class="s2">"@context"</span><span class="o">:</span> <span class="s2">"http://schema.org/"</span><span class="p">,</span> <span class="s2">"@type"</span><span class="o">:</span> <span class="s2">"Product"</span><span class="p">,</span> <span class="s2">"name"</span><span class="o">:</span> <span class="s2">"Apple"</span><span class="p">,</span> <span class="s2">"image"</span><span class="o">:</span> <span class="s2">"https://amp.dev/static/samples/img/golden_apple1_1024x682.jpg"</span><span class="p">,</span> <span class="s2">"description"</span><span class="o">:</span> <span class="s2">"Lorem ipsum"</span><span class="p">,</span> <span class="s2">"mpn"</span><span class="o">:</span> <span class="s2">"925872"</span><span class="p">,</span> <span class="s2">"brand"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"@type"</span><span class="o">:</span> <span class="s2">"Fruit"</span><span class="p">,</span> <span class="s2">"name"</span><span class="o">:</span> <span class="s2">"Apple"</span> <span class="p">},</span> <span class="s2">"aggregateRating"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"@type"</span><span class="o">:</span> <span class="s2">"AggregateRating"</span><span class="p">,</span> <span class="s2">"ratingValue"</span><span class="o">:</span> <span class="s2">"4.4"</span><span class="p">,</span> <span class="s2">"reviewCount"</span><span class="o">:</span> <span class="s2">"88"</span> <span class="p">},</span> <span class="s2">"offers"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"@type"</span><span class="o">:</span> <span class="s2">"Offer"</span><span class="p">,</span> <span class="s2">"priceCurrency"</span><span class="o">:</span> <span class="s2">"USD"</span><span class="p">,</span> <span class="s2">"price"</span><span class="o">:</span> <span class="s2">"1.99"</span><span class="p">,</span> <span class="s2">"priceValidUntil"</span><span class="o">:</span> <span class="s2">"2020-11-05"</span><span class="p">,</span> <span class="s2">"itemCondition"</span><span class="o">:</span> <span class="s2">"http://schema.org/UsedCondition"</span><span class="p">,</span> <span class="s2">"availability"</span><span class="o">:</span> <span class="s2">"http://schema.org/InStock"</span><span class="p">,</span> <span class="s2">"seller"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"@type"</span><span class="o">:</span> <span class="s2">"Retail"</span><span class="p">,</span> <span class="s2">"name"</span><span class="o">:</span> <span class="s2">"AMP by Example"</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> <span class="p"></</span><span class="nt">script</span><span class="p">></span> </code></pre></div> </div> <h2 id="navigation">Navigation</h2> <p>Use the <a href="/documentation/components/amp-sidebar">amp-sidebar</a> component to give customers the chance to quickly jump to any of your product categories.</p> <div class="ap-o-code-preview"> <div class="ap-o-code-preview-preview"> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-sidebar</span> <span class="na">id</span><span class="o">=</span><span class="s">"drawermenu"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"nodisplay"</span><span class="p">></span> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/"</span> <span class="na">class</span><span class="o">=</span><span class="s">"caps text-decoration-none block p1"</span><span class="p">></span>Products<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"><</span><span class="nt">hr</span><span class="p">/></span> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"caps text-decoration-none block p1"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/samples_templates/product_browse_page/preview/"</span><span class="p">></span>Fruit<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"caps text-decoration-none block p1"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/samples_templates/product_browse_page/preview/"</span><span class="p">></span>Vegetable<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"caps text-decoration-none block p1"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/samples_templates/product_browse_page/preview/"</span><span class="p">></span>More<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-sidebar</span><span class="p">></span> </code></pre></div> </div> <h2 id="header-with-search">Header with Search</h2> <p>AMP supports forms, which means you can directly integrate a product search into your AMPs. Try searching for "Apple".</p> <p>You can use CSS3 animations to enrich your page. The expanding text field when the search box is focused is implemented with CSS only.</p> <div class="ap-o-code-preview"> <div class="ap-o-code-preview-preview"> <div class="header"> <a id="sample-menu" on="tap:drawermenu.toggle"> <amp-img srcset="/static/samples/img/ic_menu_white_1x_web_24dp.png 1x, /static/samples/img/ic_menu_white_2x_web_24dp.png 2x" width="24" height="24" alt="navigation" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:24px;height:24px;" i-amphtml-layout="fixed"></amp-img> </a> <form method="GET" action="/documentation/examples/api/search" target="_top"> <input name="search" type="search" placeholder="Search"> <a id="sample-logo" href="/">Product</a> <input type="submit" value> </form> </div> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"header"</span><span class="p">></span> <span class="p"><</span><span class="nt">a</span> <span class="na">id</span><span class="o">=</span><span class="s">"sample-menu"</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:drawermenu.toggle"</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-img</span> <span class="na">srcset</span><span class="o">=</span><span class="s">"/static/samples/img/ic_menu_white_1x_web_24dp.png 1x, /static/samples/img/ic_menu_white_2x_web_24dp.png 2x"</span> <span class="na">width</span><span class="o">=</span><span class="s">"24"</span> <span class="na">height</span><span class="o">=</span><span class="s">"24"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"navigation"</span><span class="p">></</span><span class="nt">amp-img</span><span class="p">></span> <span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"><</span><span class="nt">form</span> <span class="na">method</span><span class="o">=</span><span class="s">"GET"</span> <span class="na">action</span><span class="o">=</span><span class="s">"/documentation/examples/api/search"</span> <span class="na">target</span><span class="o">=</span><span class="s">"_top"</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"search"</span> <span class="na">type</span><span class="o">=</span><span class="s">"search"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"Search"</span><span class="p">></span> <span class="p"><</span><span class="nt">a</span> <span class="na">id</span><span class="o">=</span><span class="s">"sample-logo"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/"</span><span class="p">></span>Product<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">value</span><span class="o">=</span><span class="s">""</span><span class="p">></span> <span class="p"></</span><span class="nt">form</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> </code></pre></div> </div> <h2 id="social-sharing">Social Sharing</h2> <p>The Social Share extension provides a common interface for share buttons. Learn more about <code>amp-social-share</code> <a href="/documentation/components/amp-social-share">here</a>.</p> <div class="ap-o-code-preview"> <div class="ap-o-code-preview-preview"> <div class="m1"> <amp-social-share type="twitter" width="30" height="22" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:30px;height:22px;" i-amphtml-layout="fixed"></amp-social-share> <amp-social-share type="facebook" width="30" height="22" data-attribution="254325784911610" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:30px;height:22px;" i-amphtml-layout="fixed"></amp-social-share> <amp-social-share type="email" width="30" height="22" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:30px;height:22px;" i-amphtml-layout="fixed"></amp-social-share> <amp-social-share type="pinterest" width="33" height="22" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:33px;height:22px;" i-amphtml-layout="fixed"></amp-social-share> </div> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"m1"</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-social-share</span> <span class="na">type</span><span class="o">=</span><span class="s">"twitter"</span> <span class="na">width</span><span class="o">=</span><span class="s">"30"</span> <span class="na">height</span><span class="o">=</span><span class="s">"22"</span><span class="p">></</span><span class="nt">amp-social-share</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-social-share</span> <span class="na">type</span><span class="o">=</span><span class="s">"facebook"</span> <span class="na">width</span><span class="o">=</span><span class="s">"30"</span> <span class="na">height</span><span class="o">=</span><span class="s">"22"</span> <span class="na">data-attribution</span><span class="o">=</span><span class="s">"254325784911610"</span><span class="p">></</span><span class="nt">amp-social-share</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-social-share</span> <span class="na">type</span><span class="o">=</span><span class="s">"email"</span> <span class="na">width</span><span class="o">=</span><span class="s">"30"</span> <span class="na">height</span><span class="o">=</span><span class="s">"22"</span><span class="p">></</span><span class="nt">amp-social-share</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-social-share</span> <span class="na">type</span><span class="o">=</span><span class="s">"pinterest"</span> <span class="na">width</span><span class="o">=</span><span class="s">"33"</span> <span class="na">height</span><span class="o">=</span><span class="s">"22"</span><span class="p">></</span><span class="nt">amp-social-share</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> </code></pre></div> </div> <h2 id="video">Video</h2> <p>AMP supports a wide range of video platforms. Here we are using <code>amp-youtube</code> to show a product video. You can find an overview of all supported video platforms <a href="/advanced/integrating_videos_in_amp_an_overview/">here</a>.</p> <p>In this sample we don't embed the video directly into the page, but instead show it in a lightbox using the <code>amp-lightbox</code> component. Learn more about <code>amp-lightbox</code> <a href="/documentation/components/reference/amp-lightbox.html">here</a>.</p> <div class="ap-o-code-preview"> <div class="ap-o-code-preview-preview"> <button class="ampstart-btn caps m1 mb3" on="tap:watch-video-lightbox"> Show Video </button> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"ampstart-btn caps m1 mb3"</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:watch-video-lightbox"</span> <span class="p">></span> Show Video <span class="p"></</span><span class="nt">button</span><span class="p">></span> </code></pre></div> </div> <h2 id="slides-preview-gallery">Slides preview Gallery</h2> <p>On desktop we've added a film strip like slide preview. Each product colour has its own image gallery and slide preview. We use <a href="/documentation/components/amp-bind/">amp-bind</a> to update the page selecting the gallery and image preview corresponding to the selected colour. We realized the color selection by using <code>amp-selector</code>. Find more the doc and info in The Product Page section below.</p> <p>The green colour is the default color for the gallery when the page loads. Clicking on a preview image will reveal the image in the gallery via the tap action <code>on="tap:AMP.setState({product: {selectedSlideForGreen: 0}})"</code>.</p> <p>See below for more informations on how we use <code>amp-bind</code> .</p> <div class="ap-o-code-preview"> <div class="ap-o-code-preview-preview"> <div class="product-gallery"> <ul [hidden]="product.selectedColor != 'green'" i-amphtml-binding> <li> <amp-img on="tap:AMP.setState({product: {selectedSlideForGreen: 0}})" src="/static/samples/img/green_apple_1_60x40.jpg" width="60" height="40" class="selected i-amphtml-layout-fixed i-amphtml-layout-size-defined" [class]="product.selectedSlideForGreen == 0 ? 'selected' : '' " tabindex="0" role="button" i-amphtml-binding style="width:60px;height:40px;" i-amphtml-layout="fixed"> </amp-img> </li> <li> <amp-img on="tap:AMP.setState({product: {selectedSlideForGreen: 1}})" src="/static/samples/img/green_apple_2_60x40.jpg" width="60" height="40" [class]="product.selectedSlideForGreen == 1 ? 'selected' : '' " tabindex="1" role="button" i-amphtml-binding class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:60px;height:40px;" i-amphtml-layout="fixed"> </amp-img> </li> </ul> <ul hidden [hidden]="product.selectedColor != 'golden'" i-amphtml-binding> <li> <amp-img on="tap:AMP.setState({product: {selectedSlideForGolden: 0}})" src="/static/samples/img/product1_alt1_60x40.jpg" width="60" height="40" class="selected fadeIn i-amphtml-layout-fixed i-amphtml-layout-size-defined" [class]="product.selectedSlideForGolden == 0 ? 'selected fadeIn' : '' " tabindex="0" role="button" i-amphtml-binding style="width:60px;height:40px;" i-amphtml-layout="fixed"> </amp-img> </li> </ul> <ul hidden [hidden]="product.selectedColor != 'red'" i-amphtml-binding> <li> <amp-img on="tap:AMP.setState({ product: {selectedSlideForRed : 0}})" src="/static/samples/static/samples/img/red_apple_1_60x40.jpg" width="60" height="40" class="selected fadeIn i-amphtml-layout-fixed i-amphtml-layout-size-defined" [class]="product.selectedSlideForRed == 0 ? 'selected fadeIn' : '' " tabindex="0" role="button" i-amphtml-binding style="width:60px;height:40px;" i-amphtml-layout="fixed"> </amp-img> </li> <li> <amp-img on="tap:AMP.setState({ product: {selectedSlideForRed : 1}})" src="/static/samples/static/samples/img/red_apple_2_60x46.jpg" width="60" height="40" [class]="product.selectedSlideForRed == 1 ? 'selected' : '' " tabindex="1" role="button" i-amphtml-binding class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:60px;height:40px;" i-amphtml-layout="fixed"> </amp-img> </li> </ul> </div> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"product-gallery"</span><span class="p">></span> <span class="p"><</span><span class="nt">ul</span> <span class="na">[hidden]</span><span class="o">=</span><span class="s">"product.selectedColor != 'green'"</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-img</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:AMP.setState({product: {selectedSlideForGreen: 0}})"</span> <span class="na">src</span><span class="o">=</span><span class="s">"/static/samples/img/green_apple_1_60x40.jpg"</span> <span class="na">width</span><span class="o">=</span><span class="s">"60"</span> <span class="na">height</span><span class="o">=</span><span class="s">"40"</span> <span class="na">class</span><span class="o">=</span><span class="s">"selected"</span> <span class="na">[class]</span><span class="o">=</span><span class="s">"product.selectedSlideForGreen == 0 ? 'selected' : '' "</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"0"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-img</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-img</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:AMP.setState({product: {selectedSlideForGreen: 1}})"</span> <span class="na">src</span><span class="o">=</span><span class="s">"/static/samples/img/green_apple_2_60x40.jpg"</span> <span class="na">width</span><span class="o">=</span><span class="s">"60"</span> <span class="na">height</span><span class="o">=</span><span class="s">"40"</span> <span class="na">[class]</span><span class="o">=</span><span class="s">"product.selectedSlideForGreen == 1 ? 'selected' : '' "</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"1"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-img</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"></</span><span class="nt">ul</span><span class="p">></span> <span class="p"><</span><span class="nt">ul</span> <span class="na">hidden</span> <span class="na">[hidden]</span><span class="o">=</span><span class="s">"product.selectedColor != 'golden'"</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-img</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:AMP.setState({product: {selectedSlideForGolden: 0}})"</span> <span class="na">src</span><span class="o">=</span><span class="s">"/static/samples/img/product1_alt1_60x40.jpg"</span> <span class="na">width</span><span class="o">=</span><span class="s">"60"</span> <span class="na">height</span><span class="o">=</span><span class="s">"40"</span> <span class="na">class</span><span class="o">=</span><span class="s">"selected fadeIn"</span> <span class="na">[class]</span><span class="o">=</span><span class="s">"product.selectedSlideForGolden == 0 ? 'selected fadeIn' : '' "</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"0"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-img</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"></</span><span class="nt">ul</span><span class="p">></span> <span class="p"><</span><span class="nt">ul</span> <span class="na">hidden</span> <span class="na">[hidden]</span><span class="o">=</span><span class="s">"product.selectedColor != 'red'"</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-img</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:AMP.setState({ product: {selectedSlideForRed : 0}})"</span> <span class="na">src</span><span class="o">=</span><span class="s">"/static/samples/static/samples/img/red_apple_1_60x40.jpg"</span> <span class="na">width</span><span class="o">=</span><span class="s">"60"</span> <span class="na">height</span><span class="o">=</span><span class="s">"40"</span> <span class="na">class</span><span class="o">=</span><span class="s">"selected fadeIn"</span> <span class="na">[class]</span><span class="o">=</span><span class="s">"product.selectedSlideForRed == 0 ? 'selected fadeIn' : '' "</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"0"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-img</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-img</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:AMP.setState({ product: {selectedSlideForRed : 1}})"</span> <span class="na">src</span><span class="o">=</span><span class="s">"/static/samples/static/samples/img/red_apple_2_60x46.jpg"</span> <span class="na">width</span><span class="o">=</span><span class="s">"60"</span> <span class="na">height</span><span class="o">=</span><span class="s">"40"</span> <span class="na">[class]</span><span class="o">=</span><span class="s">"product.selectedSlideForRed == 1 ? 'selected' : '' "</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"1"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-img</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"></</span><span class="nt">ul</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> </code></pre></div> </div> <h2 id="image-gallery">Image Gallery</h2> <p>The <code>amp-carousel</code> component works very well for product image galleries. Learn how the <code>amp-carousel</code> component works <a href="/advanced/image_galleries_with_amp-carousel/">here</a>.</p> <p>Notice how we are binding to the <code>slide</code> and <code>class</code> by using to the values of the variables <code>selectedSlideForGreen</code> and <code>selectedColor</code>.</p> <div class="ap-o-code-preview"> <div class="ap-o-code-preview-preview"> <div class="product-gallery"> <amp-carousel id="green-apple-carousel" width="1024" height="682" layout="responsive" type="slides" [slide]="product.selectedSlideForGreen" on="slideChange: AMP.setState({product: {selectedSlideForGreen: event.index}})" class="fadeIn i-amphtml-layout-responsive i-amphtml-layout-size-defined" [hidden]="product.selectedColor != 'green'" i-amphtml-binding i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:66.6016%"></i-amphtml-sizer> <amp-img src="/static/samples/img/green_apple_1_1024x682.jpg" width="1024" height="682" layout="responsive" on="tap:gallery-lightbox" role="button" tabindex="0" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:66.6016%"></i-amphtml-sizer> </amp-img> <amp-img src="/static/samples/img/green_apple_2_1024x685.jpg" width="1024" height="682" layout="responsive" on="tap:gallery-lightbox" role="button" tabindex="0" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:66.6016%"></i-amphtml-sizer> </amp-img> </amp-carousel> <amp-carousel id="golden-apple-carousel" width="1024" height="682" layout="responsive" type="slides" [slide]="product.selectedSlideForGolden" on="slideChange: AMP.setState({product: {selectedSlideForGolden: event.index}})" hidden class="fadeIn i-amphtml-layout-responsive i-amphtml-layout-size-defined" [hidden]="product.selectedColor != 'golden'" i-amphtml-binding i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:66.6016%"></i-amphtml-sizer> <amp-img src="/static/samples/img/golden_apple1_1024x682.jpg" width="1024" height="682" layout="responsive" on="tap:gallery-lightbox" role="button" tabindex="0" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:66.6016%"></i-amphtml-sizer> </amp-img> </amp-carousel> <amp-carousel id="red-apple-carousel" width="1024" height="682" layout="responsive" type="slides" [slide]="product.selectedSlideForRed" on="slideChange: AMP.setState({product: {selectedSlideForRed: event.index}})" hidden class="fadeIn i-amphtml-layout-responsive i-amphtml-layout-size-defined" [hidden]="product.selectedColor != 'red'" i-amphtml-binding i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:66.6016%"></i-amphtml-sizer> <amp-img src="/static/samples/img/red_apple_1_1024x682.jpg" width="1024" height="682" layout="responsive" on="tap:gallery-lightbox" role="button" tabindex="0" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:66.6016%"></i-amphtml-sizer> </amp-img> <amp-img src="/static/samples/img/red_apple_2_1024x793.jpg" width="1024" height="682" layout="responsive" on="tap:gallery-lightbox" role="button" tabindex="0" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:66.6016%"></i-amphtml-sizer> </amp-img> </amp-carousel> </div> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"product-gallery"</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-carousel</span> <span class="na">id</span><span class="o">=</span><span class="s">"green-apple-carousel"</span> <span class="na">width</span><span class="o">=</span><span class="s">"1024"</span> <span class="na">height</span><span class="o">=</span><span class="s">"682"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"responsive"</span> <span class="na">type</span><span class="o">=</span><span class="s">"slides"</span> <span class="na">[slide]</span><span class="o">=</span><span class="s">"product.selectedSlideForGreen"</span> <span class="na">on</span><span class="o">=</span><span class="s">"slideChange: AMP.setState({product: {selectedSlideForGreen: event.index}})"</span> <span class="na">class</span><span class="o">=</span><span class="s">"fadeIn"</span> <span class="na">[hidden]</span><span class="o">=</span><span class="s">"product.selectedColor != 'green'"</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-img</span> <span class="na">src</span><span class="o">=</span><span class="s">"/static/samples/img/green_apple_1_1024x682.jpg"</span> <span class="na">width</span><span class="o">=</span><span class="s">"1024"</span> <span class="na">height</span><span class="o">=</span><span class="s">"682"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"responsive"</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:gallery-lightbox"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"0"</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-img</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-img</span> <span class="na">src</span><span class="o">=</span><span class="s">"/static/samples/img/green_apple_2_1024x685.jpg"</span> <span class="na">width</span><span class="o">=</span><span class="s">"1024"</span> <span class="na">height</span><span class="o">=</span><span class="s">"682"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"responsive"</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:gallery-lightbox"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"0"</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-img</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-carousel</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-carousel</span> <span class="na">id</span><span class="o">=</span><span class="s">"golden-apple-carousel"</span> <span class="na">width</span><span class="o">=</span><span class="s">"1024"</span> <span class="na">height</span><span class="o">=</span><span class="s">"682"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"responsive"</span> <span class="na">type</span><span class="o">=</span><span class="s">"slides"</span> <span class="na">[slide]</span><span class="o">=</span><span class="s">"product.selectedSlideForGolden"</span> <span class="na">on</span><span class="o">=</span><span class="s">"slideChange: AMP.setState({product: {selectedSlideForGolden: event.index}})"</span> <span class="na">hidden</span> <span class="na">class</span><span class="o">=</span><span class="s">"fadeIn"</span> <span class="na">[hidden]</span><span class="o">=</span><span class="s">"product.selectedColor != 'golden'"</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-img</span> <span class="na">src</span><span class="o">=</span><span class="s">"/static/samples/img/golden_apple1_1024x682.jpg"</span> <span class="na">width</span><span class="o">=</span><span class="s">"1024"</span> <span class="na">height</span><span class="o">=</span><span class="s">"682"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"responsive"</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:gallery-lightbox"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"0"</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-img</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-carousel</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-carousel</span> <span class="na">id</span><span class="o">=</span><span class="s">"red-apple-carousel"</span> <span class="na">width</span><span class="o">=</span><span class="s">"1024"</span> <span class="na">height</span><span class="o">=</span><span class="s">"682"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"responsive"</span> <span class="na">type</span><span class="o">=</span><span class="s">"slides"</span> <span class="na">[slide]</span><span class="o">=</span><span class="s">"product.selectedSlideForRed"</span> <span class="na">on</span><span class="o">=</span><span class="s">"slideChange: AMP.setState({product: {selectedSlideForRed: event.index}})"</span> <span class="na">hidden</span> <span class="na">class</span><span class="o">=</span><span class="s">"fadeIn"</span> <span class="na">[hidden]</span><span class="o">=</span><span class="s">"product.selectedColor != 'red'"</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-img</span> <span class="na">src</span><span class="o">=</span><span class="s">"/static/samples/img/red_apple_1_1024x682.jpg"</span> <span class="na">width</span><span class="o">=</span><span class="s">"1024"</span> <span class="na">height</span><span class="o">=</span><span class="s">"682"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"responsive"</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:gallery-lightbox"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"0"</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-img</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-img</span> <span class="na">src</span><span class="o">=</span><span class="s">"/static/samples/img/red_apple_2_1024x793.jpg"</span> <span class="na">width</span><span class="o">=</span><span class="s">"1024"</span> <span class="na">height</span><span class="o">=</span><span class="s">"682"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"responsive"</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:gallery-lightbox"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"0"</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-img</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-carousel</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> </code></pre></div> </div> <h2 id="full-screen-image">Full screen image</h2> <p>The <code>amp-image-lightbox</code> component allows the user to expand an image to fill the viewport. By clicking on each image from the product gallery, the user can see the product image by using the full screen. Learn more <a href="/documentation/components/reference/amp-image-lightbox.html">here</a></p> <div class="ap-o-code-preview"> <div class="ap-o-code-preview-preview"> <amp-image-lightbox id="gallery-lightbox" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <div on="tap:gallery-lightbox.close" role="button" tabindex="0"> <button class="ampstart-btn caps m2 close-gallery-button" on="tap:gallery-lightbox.close" role="button" tabindex="0"> Close </button> </div> </amp-image-lightbox> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-image-lightbox</span> <span class="na">id</span><span class="o">=</span><span class="s">"gallery-lightbox"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"nodisplay"</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:gallery-lightbox.close"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"0"</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"ampstart-btn caps m2 close-gallery-button"</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:gallery-lightbox.close"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"0"</span><span class="p">></span> Close <span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-image-lightbox</span><span class="p">></span> </code></pre></div> </div> <h2 id="product-configuration">Product Configuration</h2> <p>We use the <code>amp-state</code> component (part of <a href="/documentation/components/amp-bind/">amp-bind</a>)</p> <p>to configure the product price depending on the color and the size. We also configure the <code>defaultSize</code></p> <p>for each product when you switch between colours and the size you previously selected is not available for the new color</p> <div class="ap-o-code-preview"> <div class="ap-o-code-preview-preview"> <amp-state id="product" class="i-amphtml-layout-container" i-amphtml-layout="container"> <script type="application/json">{"selectedColor":"green","selectedSize":"S","selectedSlideForRed":0,"selectedSlideForGolden":0,"selectedSlideForGreen":0,"moreItemsPageIndex":0,"hasMorePages":true,"green":{"id":"1","sizes":{"S":"$5.99","M":"$5.99","L":"unavailable"},"defaultSize":"S"},"golden":{"id":"2","sizes":{"S":"$9.99","M":"unavailable","L":"$9.99"},"defaultSize":"L"},"red":{"id":"3","sizes":{"S":"$7.99","M":"$7.99","L":"$7.99"},"defaultSize":"M"}}</script> </amp-state> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-state</span> <span class="na">id</span><span class="o">=</span><span class="s">"product"</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/json"</span><span class="p">></span> <span class="p">{</span> <span class="s2">"selectedColor"</span><span class="o">:</span> <span class="s2">"green"</span><span class="p">,</span> <span class="s2">"selectedSize"</span><span class="o">:</span> <span class="s2">"S"</span><span class="p">,</span> <span class="s2">"selectedSlideForRed"</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> <span class="s2">"selectedSlideForGolden"</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> <span class="s2">"selectedSlideForGreen"</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> <span class="s2">"moreItemsPageIndex"</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> <span class="s2">"hasMorePages"</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="s2">"green"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"id"</span><span class="o">:</span> <span class="s2">"1"</span><span class="p">,</span> <span class="s2">"sizes"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"S"</span><span class="o">:</span> <span class="s2">"$5.99"</span><span class="p">,</span> <span class="s2">"M"</span><span class="o">:</span> <span class="s2">"$5.99"</span><span class="p">,</span> <span class="s2">"L"</span><span class="o">:</span> <span class="s2">"unavailable"</span> <span class="p">},</span> <span class="s2">"defaultSize"</span><span class="o">:</span> <span class="s2">"S"</span> <span class="p">},</span> <span class="s2">"golden"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"id"</span><span class="o">:</span> <span class="s2">"2"</span><span class="p">,</span> <span class="s2">"sizes"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"S"</span><span class="o">:</span> <span class="s2">"$9.99"</span><span class="p">,</span> <span class="s2">"M"</span><span class="o">:</span> <span class="s2">"unavailable"</span><span class="p">,</span> <span class="s2">"L"</span><span class="o">:</span> <span class="s2">"$9.99"</span> <span class="p">},</span> <span class="s2">"defaultSize"</span><span class="o">:</span> <span class="s2">"L"</span> <span class="p">},</span> <span class="s2">"red"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"id"</span><span class="o">:</span> <span class="s2">"3"</span><span class="p">,</span> <span class="s2">"sizes"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"S"</span><span class="o">:</span> <span class="s2">"$7.99"</span><span class="p">,</span> <span class="s2">"M"</span><span class="o">:</span> <span class="s2">"$7.99"</span><span class="p">,</span> <span class="s2">"L"</span><span class="o">:</span> <span class="s2">"$7.99"</span> <span class="p">},</span> <span class="s2">"defaultSize"</span><span class="o">:</span> <span class="s2">"M"</span> <span class="p">}</span> <span class="p">}</span> <span class="p"></</span><span class="nt">script</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-state</span><span class="p">></span> </code></pre></div> </div> <h2 id="product-price">Product price</h2> <p>We use <a href="/documentation/components/amp-bind/">amp-bind</a> to update the price of the product</p> <p>depending on the selected colour.</p> <p>We bind the <code>text</code> attribute to the value of expression <code>product[product.selectedColor].sizes[product.selectedSize]</code>. <code>product</code> is the id <code>amp-state</code> json described in the Product Configuration section.</p> <p>Notice how we set $1.99 value as the default for the price: expressions will not be evaluated at the page load.</p> <p>We use <code>amp-selector</code> together with <code>amp-bind</code> to update the page for showing the price, the size availability, the gallery and preview of images. Every time you select a color, we call <code>AMP.setState</code> with <code>{selectedColor: event.targetOption}</code>. This is triggering all the attributes and elements binded to <code>selectedColor</code> to update: the price (binded with the attribute <code>[text]</code>), the gallery, the image preview and the size selector (all binded with <code>[class]</code>).</p> <div class="ap-o-code-preview"> <div class="ap-o-code-preview-preview"> <p class="price-description">Price: <span [text]="product[product.selectedColor].sizes[product.selectedSize]" i-amphtml-binding>$5.99</span> </p> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"price-description"</span><span class="p">></span>Price: <span class="p"><</span><span class="nt">span</span> <span class="na">[text]</span><span class="o">=</span><span class="s">"product[product.selectedColor].sizes[product.selectedSize]"</span><span class="p">></span>$5.99<span class="p"></</span><span class="nt">span</span><span class="p">></span> <span class="p"></</span><span class="nt">p</span><span class="p">></span> </code></pre></div> </div> <h2 id="product-page">Product page <a name="add-to-cart-button"></a></h2> <p>The add-to-cart action action is implemented using <a href="/documentation/components/reference/amp-form/">amp-form</a>. In our sample we use the <a href="/components/amp-selector.html">amp-selector</a> for selecting different product properties. Pressing the <code>ADD TO CART</code> button adds the product to a shopping cart page using the properties you have selected. Notice that the button URL contains the query <code>clientId={{ClientId}}</code>. If an item is successfully added to the shopping cart, we redirect the user to the shopping cart page. The redirect target is configured via a header in the server's form response (<a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-form/amp-form.md#redirecting-after-a-submission">redirecting after submission</a>):</p> <p>access-control-expose-headers:AMP-Access-Control-Allow-Source-Origin,AMP-Redirect-To amp-redirect-to:<a href="http://ampbyexample.com/shopping_cart/?clientid=amp-123456789">http://ampbyexample.com/shopping_cart/?clientid=amp-123456789</a></p> <p>We use the <code>CLIENT_ID</code> variable to identify the user, this enables storing a shopping cart between repeated visits of an AMP page (either via the AMP Cache or the original host). This variable can be used inside an amp-form by declaring an hidden input value with <code>default-value="CLIENT_ID(cart)</code>. Read more about variable substitution <a href="https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md">here</a>.</p> <div class="ap-o-code-preview"> <div class="ap-o-code-preview-preview"> <form id="order" method="POST" action-xhr="/documentation/examples/e-commerce/shopping_cart/add-to-cart" target="_top" class="flex flex-wrap m1"> <div class="items-center flex"> <label for="color">Color:</label> <amp-selector name="color" layout="container" [selected]="product.selectedColor" on="select:AMP.setState({ product: { selectedColor: event.targetOption, selectedSlideForRed: 0, selectedSlideForGreen: 0, selectedSlideForYellow: 0, selectedSize: product[event.targetOption].sizes[product.selectedSize] != 'unavailable' ? product.selectedSize : product[event.targetOption].defaultSize } })" i-amphtml-binding class="i-amphtml-layout-container" i-amphtml-layout="container"> <ul class="p0 m1"> <li> <div option="green" selected class="square green"></div> </li> <li> <div option="golden" class="square golden"></div> </li> <li> <div option="red" class="square red"></div> </li> </ul> </amp-selector> </div> <div class="items-center flex"> <label for="quantity">Quantity:</label> <amp-selector name="quantity" layout="container" class="i-amphtml-layout-container" i-amphtml-layout="container"> <ul class="p0 m1"> <li option="1" selected>1</li> <li option="2">2</li> <li option="3">3</li> </ul> </amp-selector> </div> <div class="items-center flex"> <label for="size">Size:</label> <amp-selector name="size" layout="container" on="select:AMP.setState({ product: {selectedSize: event.targetOption}})" [selected]="(product[product.selectedColor].sizes[product.selectedSize] != 'unavailable') ? product.selectedSize : product[product.selectedColor].defaultSize" i-amphtml-binding class="i-amphtml-layout-container" i-amphtml-layout="container"> <ul class="p0 m1"> <li option="S" class [class]="(product[product.selectedColor].sizes['S'] != 'unavailable') ? '' : 'unavailable'" i-amphtml-binding>S</li> <li option="M" class selected [class]="(product[product.selectedColor].sizes['M'] != 'unavailable') ? '' : 'unavailable'" i-amphtml-binding>M</li> <li option="L" class="unavailable" [class]="(product[product.selectedColor].sizes['L'] != 'unavailable') ? '' : 'unavailable'" i-amphtml-binding>L</li> </ul> </amp-selector> </div> <div class="items-center flex my1"> <input type="submit" class="ampstart-btn caps" name="add-to-cart" value="add to cart"> </div> <input type="hidden" name="name" value="Apple"> <input type="hidden" name="price" value="$1.99" [value]="product[product.selectedColor].sizes[product.selectedSize]" i-amphtml-binding> <input type="hidden" name="id" value="1" [value]="product[product.selectedColor].id" i-amphtml-binding> <input name="clientId" type="hidden" value="CLIENT_ID(cart)" data-amp-replace="CLIENT_ID"> <div submit-error> <template type="amp-mustache"> Error! Looks like something went wrong with your shopping cart, please try to add an item again. {{error}} </template> </div> </form> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">form</span> <span class="na">id</span><span class="o">=</span><span class="s">"order"</span> <span class="na">method</span><span class="o">=</span><span class="s">"POST"</span> <span class="na">action-xhr</span><span class="o">=</span><span class="s">"/documentation/examples/e-commerce/shopping_cart/add-to-cart"</span> <span class="na">target</span><span class="o">=</span><span class="s">"_top"</span> <span class="na">class</span><span class="o">=</span><span class="s">"flex flex-wrap m1"</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"items-center flex"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"color"</span><span class="p">></span>Color:<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-selector</span> <span class="na">name</span><span class="o">=</span><span class="s">"color"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"container"</span> <span class="na">[selected]</span><span class="o">=</span><span class="s">"product.selectedColor"</span> <span class="na">on</span><span class="o">=</span><span class="s">"select:AMP.setState({</span> <span class="s"> product: {</span> <span class="s"> selectedColor: event.targetOption,</span> <span class="s"> selectedSlideForRed: 0,</span> <span class="s"> selectedSlideForGreen: 0,</span> <span class="s"> selectedSlideForYellow: 0,</span> <span class="s"> selectedSize: product[event.targetOption].sizes[product.selectedSize] != 'unavailable' ? product.selectedSize : product[event.targetOption].defaultSize</span> <span class="s"> }</span> <span class="s"> })"</span><span class="p">></span> <span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"p0 m1"</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">option</span><span class="o">=</span><span class="s">"green"</span> <span class="na">selected</span> <span class="na">class</span><span class="o">=</span><span class="s">"square green"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">option</span><span class="o">=</span><span class="s">"golden"</span> <span class="na">class</span><span class="o">=</span><span class="s">"square golden"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">option</span><span class="o">=</span><span class="s">"red"</span> <span class="na">class</span><span class="o">=</span><span class="s">"square red"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"></</span><span class="nt">ul</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-selector</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"items-center flex"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"quantity"</span><span class="p">></span>Quantity:<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-selector</span> <span class="na">name</span><span class="o">=</span><span class="s">"quantity"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"container"</span><span class="p">></span> <span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"p0 m1"</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span> <span class="na">option</span><span class="o">=</span><span class="s">"1"</span> <span class="na">selected</span><span class="p">></span>1<span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span> <span class="na">option</span><span class="o">=</span><span class="s">"2"</span><span class="p">></span>2<span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span> <span class="na">option</span><span class="o">=</span><span class="s">"3"</span><span class="p">></span>3<span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"></</span><span class="nt">ul</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-selector</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"items-center flex"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"size"</span><span class="p">></span>Size:<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-selector</span> <span class="na">name</span><span class="o">=</span><span class="s">"size"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"container"</span> <span class="na">on</span><span class="o">=</span><span class="s">"select:AMP.setState({ product: {selectedSize: event.targetOption}})"</span> <span class="na">[selected]</span><span class="o">=</span><span class="s">"(product[product.selectedColor].sizes[product.selectedSize] != 'unavailable')</span> <span class="s"> ? product.selectedSize</span> <span class="s"> : product[product.selectedColor].defaultSize"</span><span class="p">></span> <span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"p0 m1"</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span> <span class="na">option</span><span class="o">=</span><span class="s">"S"</span> <span class="na">class</span><span class="o">=</span><span class="s">""</span> <span class="na">[class]</span><span class="o">=</span><span class="s">"(product[product.selectedColor].sizes['S'] != 'unavailable')</span> <span class="s"> ? ''</span> <span class="s"> : 'unavailable'"</span><span class="p">></span>S<span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span> <span class="na">option</span><span class="o">=</span><span class="s">"M"</span> <span class="na">class</span><span class="o">=</span><span class="s">""</span> <span class="na">selected</span> <span class="na">[class]</span><span class="o">=</span><span class="s">"(product[product.selectedColor].sizes['M'] != 'unavailable')</span> <span class="s"> ? ''</span> <span class="s"> : 'unavailable'"</span><span class="p">></span>M<span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span> <span class="na">option</span><span class="o">=</span><span class="s">"L"</span> <span class="na">class</span><span class="o">=</span><span class="s">"unavailable"</span> <span class="na">[class]</span><span class="o">=</span><span class="s">"(product[product.selectedColor].sizes['L'] != 'unavailable')</span> <span class="s"> ? ''</span> <span class="s"> : 'unavailable'"</span><span class="p">></span>L<span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"></</span><span class="nt">ul</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-selector</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"items-center flex my1"</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">class</span><span class="o">=</span><span class="s">"ampstart-btn caps"</span> <span class="na">name</span><span class="o">=</span><span class="s">"add-to-cart"</span> <span class="na">value</span><span class="o">=</span><span class="s">"add to cart"</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"hidden"</span> <span class="na">name</span><span class="o">=</span><span class="s">"name"</span> <span class="na">value</span><span class="o">=</span><span class="s">"Apple"</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"hidden"</span> <span class="na">name</span><span class="o">=</span><span class="s">"price"</span> <span class="na">value</span><span class="o">=</span><span class="s">"$1.99"</span> <span class="na">[value]</span><span class="o">=</span><span class="s">"product[product.selectedColor].sizes[product.selectedSize]"</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"hidden"</span> <span class="na">name</span><span class="o">=</span><span class="s">"id"</span> <span class="na">value</span><span class="o">=</span><span class="s">"1"</span> <span class="na">[value]</span><span class="o">=</span><span class="s">"product[product.selectedColor].id"</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"clientId"</span> <span class="na">type</span><span class="o">=</span><span class="s">"hidden"</span> <span class="na">value</span><span class="o">=</span><span class="s">"CLIENT_ID(cart)"</span> <span class="na">data-amp-replace</span><span class="o">=</span><span class="s">"CLIENT_ID"</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">submit-error</span><span class="p">></span> <span class="p"><</span><span class="nt">template</span> <span class="na">type</span><span class="o">=</span><span class="s">"amp-mustache"</span><span class="p">></span> Error! Looks like something went wrong with your shopping cart, please try to add an item again. {{error}} <span class="p"></</span><span class="nt">template</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"></</span><span class="nt">form</span><span class="p">></span> </code></pre></div> </div> <h2 id="tab-panels">Tab panels</h2> <p>Use <code>amp-selector</code> styled as tab panels to add additional data about your product. Learn how to implement tabs in AMP <a href="/documentation/examples/style-layout/tab_panels_with_amp-selector/">here</a>.</p> <div class="ap-o-code-preview"> <div class="ap-o-code-preview-preview"> <amp-selector role="tablist" layout="container" class="ampTabContainer ampstart-headerbar-nav i-amphtml-layout-container" keyboard-select-mode="select" i-amphtml-layout="container"> <div role="tab" class="tabButton h4 ampstart-nav-item" selected option="a">ABOUT</div> <div role="tabpanel" class="tabContent p1 p">Fruit is rich in vitamins and minerals. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> <div role="tab" class="tabButton h4 ampstart-nav-item" option="b">SPECS</div> <div role="tabpanel" class="tabContent p1 p">Always wash fruit before eating. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> <div role="tab" class="tabButton h4 ampstart-nav-item" option="c">SIZE</div> <div role="tabpanel" class="tabContent p1 p">Size may vary. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </amp-selector> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-selector</span> <span class="na">role</span><span class="o">=</span><span class="s">"tablist"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"container"</span> <span class="na">class</span><span class="o">=</span><span class="s">"ampTabContainer ampstart-headerbar-nav"</span> <span class="na">keyboard-select-mode</span><span class="o">=</span><span class="s">"select"</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span> <span class="na">class</span><span class="o">=</span><span class="s">"tabButton h4 ampstart-nav-item"</span> <span class="na">selected</span> <span class="na">option</span><span class="o">=</span><span class="s">"a"</span><span class="p">></span>ABOUT<span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">role</span><span class="o">=</span><span class="s">"tabpanel"</span> <span class="na">class</span><span class="o">=</span><span class="s">"tabContent p1 p"</span><span class="p">></span>Fruit is rich in vitamins and minerals. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span> <span class="na">class</span><span class="o">=</span><span class="s">"tabButton h4 ampstart-nav-item"</span> <span class="na">option</span><span class="o">=</span><span class="s">"b"</span><span class="p">></span>SPECS<span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">role</span><span class="o">=</span><span class="s">"tabpanel"</span> <span class="na">class</span><span class="o">=</span><span class="s">"tabContent p1 p"</span><span class="p">></span>Always wash fruit before eating. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">role</span><span class="o">=</span><span class="s">"tab"</span> <span class="na">class</span><span class="o">=</span><span class="s">"tabButton h4 ampstart-nav-item"</span> <span class="na">option</span><span class="o">=</span><span class="s">"c"</span><span class="p">></span>SIZE<span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">role</span><span class="o">=</span><span class="s">"tabpanel"</span> <span class="na">class</span><span class="o">=</span><span class="s">"tabContent p1 p"</span><span class="p">></span>Size may vary. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-selector</span><span class="p">></span> </code></pre></div> </div> <h2 id="dynamic-related-product-lists">Dynamic Related Product Lists</h2> <p>With AMP, you can easily pull in different latest offers or highlights without changing the page. To do so, just use <code>amp-list</code> to fire a CORS request to a JSON endpoint which supplies the list of related products. These are populated into an amp-mustache template on the client. Learn more about <code>amp-list</code> <a href="/documentation/components/amp-list">here</a>.</p> <div class="ap-o-code-preview"> <div class="ap-o-code-preview-preview"> <amp-list class="items m1 i-amphtml-layout-fixed-height i-amphtml-layout-size-defined" width="auto" height="145" layout="fixed-height" src="/static/samples/json/related_products.json" [src]="myState.items" binding="no" id="show-more-list" i-amphtml-binding style="height:145px;" i-amphtml-layout="fixed-height"> <template type="amp-mustache"> <a class="text-decoration-none p1" href="/documentation/examples/e-commerce/product_page/preview/"> <amp-img width="70.31" height="46.8" layout="fixed" alt="{{name}}" src="{{img}}"></amp-img> <p class="name">{{name}}</p> <p class="star">{{{stars}}}</p> <p class="price">${{price}}</p> </a> </template> </amp-list> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-list</span> <span class="na">class</span><span class="o">=</span><span class="s">"items m1"</span> <span class="na">width</span><span class="o">=</span><span class="s">"auto"</span> <span class="na">height</span><span class="o">=</span><span class="s">"145"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"fixed-height"</span> <span class="na">src</span><span class="o">=</span><span class="s">"/static/samples/json/related_products.json"</span> <span class="na">[src]</span><span class="o">=</span><span class="s">"myState.items"</span> <span class="na">binding</span><span class="o">=</span><span class="s">"no"</span> <span class="na">id</span><span class="o">=</span><span class="s">"show-more-list"</span><span class="p">></span> <span class="p"><</span><span class="nt">template</span> <span class="na">type</span><span class="o">=</span><span class="s">"amp-mustache"</span><span class="p">></span> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-decoration-none p1"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/documentation/examples/e-commerce/product_page/preview/"</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-img</span> <span class="na">width</span><span class="o">=</span><span class="s">"70.31"</span> <span class="na">height</span><span class="o">=</span><span class="s">"46.8"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"fixed"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"{{name}}"</span> <span class="na">src</span><span class="o">=</span><span class="s">"{{img}}"</span><span class="p">></</span><span class="nt">amp-img</span><span class="p">></span> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"name"</span><span class="p">></span>{{name}}<span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"star"</span><span class="p">></span>{{{stars}}}<span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"price"</span><span class="p">></span>${{price}}<span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">template</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-list</span><span class="p">></span> </code></pre></div> </div> <p>While infinite scrolling is not possible at the moment in AMP, you can use <code>amp-bind</code> to dynamically change the src of <code>amp-list</code> and add more items to the page. We bind the <code>src</code> attribute to the id of an <code>amp-state</code> component so that the <code>amp-list</code> will use the items from that component as a <code>src</code>. The <code>amp-state</code> initial value is set by setting the <code>src</code> value to the same endpoint used by <code>amp-list</code>. We append items to the <code>amp-state</code> everytime the user click on the Show more button, see below for more info.</p> <div class="ap-o-code-preview"> <div class="ap-o-code-preview-preview"> <amp-state id="myState" src="/static/samples/json/related_products.json" class="i-amphtml-layout-container" i-amphtml-layout="container"> </amp-state> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-state</span> <span class="na">id</span><span class="o">=</span><span class="s">"myState"</span> <span class="na">src</span><span class="o">=</span><span class="s">"/static/samples/json/related_products.json"</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-state</span><span class="p">></span> </code></pre></div> </div> <p>You can show or hide a Show more button by using <code>amp-form</code> and the <code>submit-success</code> event: notice how we set the <code>hasMorePages</code> variable to false based on the server response.</p> <div class="ap-o-code-preview"> <div class="ap-o-code-preview-preview"> <form method="GET" action="/documentation/examples/api/json/more_related_products_page" action-xhr="/documentation/examples/api/json/more_related_products_page" target="_top" on="submit-success: AMP.setState({ myState: { items: myState.items.concat(event.response.items)}, product: {moreItemsPageIndex: product.moreItemsPageIndex + 1, hasMorePages: event.response.hasMorePages} });"> <input type="hidden" name="moreItemsPageIndex" value="0" [value]="product.moreItemsPageIndex" i-amphtml-binding> <input type="submit" value="Show more" class="ampstart-btn caps m1 mb3" [hidden]="!product.hasMorePages" i-amphtml-binding> </form> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">form</span> <span class="na">method</span><span class="o">=</span><span class="s">"GET"</span> <span class="na">action</span><span class="o">=</span><span class="s">"/documentation/examples/api/json/more_related_products_page"</span> <span class="na">action-xhr</span><span class="o">=</span><span class="s">"/documentation/examples/api/json/more_related_products_page"</span> <span class="na">target</span><span class="o">=</span><span class="s">"_top"</span> <span class="na">on</span><span class="o">=</span><span class="s">"submit-success: AMP.setState({</span> <span class="s"> myState: { items: myState.items.concat(event.response.items)},</span> <span class="s"> product: {moreItemsPageIndex: product.moreItemsPageIndex + 1,</span> <span class="s"> hasMorePages: event.response.hasMorePages}</span> <span class="s"> });"</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"hidden"</span> <span class="na">name</span><span class="o">=</span><span class="s">"moreItemsPageIndex"</span> <span class="na">value</span><span class="o">=</span><span class="s">"0"</span> <span class="na">[value]</span><span class="o">=</span><span class="s">"product.moreItemsPageIndex"</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">value</span><span class="o">=</span><span class="s">"Show more"</span> <span class="na">class</span><span class="o">=</span><span class="s">"ampstart-btn caps m1 mb3"</span> <span class="na">[hidden] </span><span class="o">=</span> <span class="s">"!product.hasMorePages"</span><span class="p">></span> <span class="p"></</span><span class="nt">form</span><span class="p">></span> </code></pre></div> </div> <h2 id="user-analytics">User Analytics</h2> <p>Analytics must be configured in the body. Here we use Google Analytics to track pageviews.</p> <div class="ap-o-code-preview"> <div class="ap-o-code-preview-preview"> <amp-analytics type="googleanalytics" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:1px;height:1px;" i-amphtml-layout="fixed"> <script type="application/json">{"vars":{"account":"UA-73836974-1"},"triggers":{"default pageview":{"on":"visible","request":"pageview","vars":{"title":"Product"}}}}</script> </amp-analytics> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-analytics</span> <span class="na">type</span><span class="o">=</span><span class="s">"googleanalytics"</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/json"</span><span class="p">></span> <span class="p">{</span> <span class="s2">"vars"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"account"</span><span class="o">:</span> <span class="s2">"UA-73836974-1"</span> <span class="p">},</span> <span class="s2">"triggers"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"default pageview"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"on"</span><span class="o">:</span> <span class="s2">"visible"</span><span class="p">,</span> <span class="s2">"request"</span><span class="o">:</span> <span class="s2">"pageview"</span><span class="p">,</span> <span class="s2">"vars"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"title"</span><span class="o">:</span> <span class="s2">"Product"</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> <span class="p"></</span><span class="nt">script</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-analytics</span><span class="p">></span> </code></pre></div> </div> </section> <section class="ap--help"> <div class="-ff"> <span class="-fl">Need further explanation?</span> <p class="-fh">If the explanations on this page don't cover all of your questions feel free to reach out to other AMP users to discuss your exact use case.</p> <a href="https://stackoverflow.com/questions/tagged/amp-html" rel="noopener" class="-n"> <svg class="ap-a-ico -i"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#external"/></svg> <span class="-r">Go to Stack Overflow</span> </a> <div class="-fp"></div> <span class="-fl">An unexplained feature?</span> <p class="-fh">The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.</p> <a href="https://github.com/ampproject/docs/blob/future/examples/source/e-commerce/Product_Page.html" rel="noopener" class="-n link-preview-1"> <svg class="ap-a-ico -i"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#external"/></svg> <span class="-r">Edit sample on GitHub</span> </a> <div class="-fp"></div> </div> </section> <section class="-t"> <hr> <ul class="ap-o-mini-card-list"> <li class="ap-o-mini-card-list-item"> <div class="ap-m-mini-card"> <amp-img alt="Author avatar" src="https://github.com/aghassemi.png?size=38" width="38" height="38" class="large i-amphtml-layout-responsive i-amphtml-layout-size-defined" style="max-width: 38px" layout="responsive" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:100%"></i-amphtml-sizer> </amp-img> <span> <strong>Written by <a href="https://github.com/aghassemi" rel="nofollow" target="_blank"> @aghassemi </a> </strong> </span> </div></li> </ul> </section> </div> </main> <amp-sidebar id="sidebar-left" class="ap--ampsidebar i-amphtml-layout-nodisplay" layout="nodisplay" side="left" hidden="hidden" i-amphtml-layout="nodisplay"> <nav class="ap--ampsidebar-toolbar" toolbar="(min-width: 768px)" toolbar-target="ap--sidebar-content"> <ul> <div class="ap-m-format-toggle"> <button class="ap-m-format-toggle-selected ap-m-format-toggle-link-websites"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"/></svg> </span> <span>websites</span> <span class="ap-a-ico ap-m-format-toggle-angle"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> </button> <div class="ap-m-format-toggle-formats"> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-stories" href="/documentation/examples/stories/e-commerce/product_page/"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-stories"/></svg> </span> <span>stories</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-ads" href="/documentation/examples/ads/e-commerce/product_page/"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads"/></svg> </span> <span>ads</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-email" href="/documentation/examples/email/e-commerce/product_page/"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email"/></svg> </span> <span>email</span> </a> </div> </div> <div class="ap-o-sidebar-default"> <div class="ap-o-sidebar"> <div class="nav"> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>introduction</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/introduction/hello_world/">Hello World</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>components</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-3d-gltf/">amp-3d-gltf</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-access-laterpay/">amp-access-laterpay</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-access/">amp-access</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-accordion/">amp-accordion</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-ad/">amp-ad</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-addthis/">amp-addthis</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-analytics/">amp-analytics</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-anim/">amp-anim</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-app-banner/">amp-app-banner</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-audio/">amp-audio</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-autocomplete/">amp-autocomplete</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-bind-macro/">amp-bind-macro</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-bind-recaptcha/">amp-bind-recaptcha</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-bind/">amp-bind</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-bodymovin-animation/">amp-bodymovin-animation</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-brid-player/">amp-brid-player</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-brightcove/">amp-brightcove</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-call-tracking/">amp-call-tracking</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-carousel/">amp-carousel</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-dailymotion/">amp-dailymotion</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-date-countdown/">amp-date-countdown</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-date-display/">amp-date-display</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-date-picker/">amp-date-picker</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-dynamic-css-classes/">amp-dynamic-css-classes</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-experiment/">amp-experiment</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-facebook-comments/">amp-facebook-comments</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-facebook-like/">amp-facebook-like</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-facebook-page/">amp-facebook-page</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-facebook/">amp-facebook</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-fit-text/">amp-fit-text</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-font/">amp-font</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-form/">amp-form</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-fx-collection/">amp-fx-collection</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-fx-flying-carpet/">amp-fx-flying-carpet</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-geo/">amp-geo</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-gfycat/">amp-gfycat</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-gist/">amp-gist</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-hulu/">amp-hulu</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-iframe/">amp-iframe</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-ima-video/">amp-ima-video</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-image-lightbox/">amp-image-lightbox</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-image-slider/">amp-image-slider</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-img/">amp-img</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-inputmask/">amp-inputmask</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-instagram/">amp-instagram</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-install-serviceworker/">amp-install-serviceworker</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-jwplayer/">amp-jwplayer</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-kaltura-player/">amp-kaltura-player</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-lightbox-gallery/">amp-lightbox-gallery</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-lightbox/">amp-lightbox</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-list/">amp-list</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-live-list/">amp-live-list</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-mustache/">amp-mustache</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-next-page/">amp-next-page</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-o2-player/">amp-o2-player</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-pinterest/">amp-pinterest</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-pixel/">amp-pixel</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-reach-player/">amp-reach-player</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-recaptcha-input/">amp-recaptcha-input</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-reddit/">amp-reddit</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-render/">amp-render</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-script/">amp-script</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-selector/">amp-selector</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-sidebar/">amp-sidebar</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-social-share/">amp-social-share</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-soundcloud/">amp-soundcloud</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-springboard-player/">amp-springboard-player</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-sticky-ad/">amp-sticky-ad</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-timeago/">amp-timeago</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-twitter/">amp-twitter</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-user-notification/">amp-user-notification</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-video-iframe/">amp-video-iframe</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-video/">amp-video</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-vimeo/">amp-vimeo</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-vine/">amp-vine</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-web-push/">amp-web-push</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/components/amp-youtube/">amp-youtube</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>guides</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/guides/internationalization/">Internationalization</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/guides/using_the_amp_url_api/">Using the AMP URL API</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/guides/using_the_google_amp_cache/">Using the Google AMP Cache</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>advertising-analytics</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/advertising-analytics/amphtml_ads_vs_non_amp_ads/">AMP Ads vs non-AMP Ads</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/advertising-analytics/joining_analytics_sessions/">Joining Analytics Sessions</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/advertising-analytics/tracking_core_web_vitals/">Tracking Core Web Vitals</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item active level-1"> <span class="nav-link"> <span>e-commerce</span> </span> <input class="nav-trigger" type="checkbox" checked> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/e-commerce/amp_for_e-commerce_getting_started/">AMP for E-Commerce Getting Started</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/e-commerce/checkout_flow/">Checkout Flow</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/e-commerce/hotel/">Hotel</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/e-commerce/housing/">Housing</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/e-commerce/payments_in_amp/">Payments in AMP</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/e-commerce/product_browse_page/">Product Browse Page</a> </li> <li class="nav-item active level-2" autoscroll> <a class="nav-link" href="/documentation/examples/websites/e-commerce/product_page/">Product Page</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/e-commerce/shopping_cart/">Shopping Cart</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>interactivity-dynamic-content</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/interactivity-dynamic-content/client-side_filtering/">Client-side filtering</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/interactivity-dynamic-content/combobox/">ComboBox</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/interactivity-dynamic-content/comment_section/">Comment Section</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/interactivity-dynamic-content/conditional_state/">Conditional State</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/interactivity-dynamic-content/copy_button/">Copy Button</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/interactivity-dynamic-content/currency_conversion/">Currency Conversion</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/interactivity-dynamic-content/dynamic_accordion/">Dynamic Accordion</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/interactivity-dynamic-content/dynamic_content_after_user-interaction/">Dynamic Content After User-Interaction</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/interactivity-dynamic-content/favorite_button/">Favorite Button</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/interactivity-dynamic-content/linked_dropdowns/">Linked Dropdowns</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/interactivity-dynamic-content/mixing_dynamic_and_cached_data/">Mixing Dynamic and Cached Data</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/interactivity-dynamic-content/multi_page_flow/">Multi Page Flow</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/interactivity-dynamic-content/paged_list/">Paged List</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/interactivity-dynamic-content/poll/">Poll</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/interactivity-dynamic-content/restrict_duplicate_selection/">Restrict Duplicate Selection</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/interactivity-dynamic-content/seatmap/">SeatMap</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/interactivity-dynamic-content/seatmap_multiple_selection/">SeatMap Multiple Selection</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/interactivity-dynamic-content/show_more_button/">Show More Button</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/interactivity-dynamic-content/star_rating/">Star Rating</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/interactivity-dynamic-content/tic_tac_toe/">Tic-Tac-Toe</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>multimedia-animations</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/multimedia-animations/advanced_video_docking/">Advanced Video Docking</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/multimedia-animations/animated_hamburger_menu/">Animated hamburger menu</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/multimedia-animations/click-to-play_overlay_for_amp-video/">Click-to-play overlay for amp-video</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/multimedia-animations/custom_loading_indicators/">Custom Loading Indicators</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/multimedia-animations/image_galleries_with_amp-carousel/">Image Galleries with amp-carousel</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/multimedia-animations/integrating_videos_in_amp_an_overview/">Integrating Videos in AMP an Overview</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/multimedia-animations/rich_media_notifications/">Rich Media Notifications</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/multimedia-animations/video_carousels_with_amp-carousel/">Video Carousels with amp-carousel</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/multimedia-animations/video_rotate_to_fullscreen_with_hint/">Video rotate to fullscreen with hint</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>news-publishing</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/news-publishing/live_blog/">Live Blog</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/news-publishing/news_article/">News Article</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/news-publishing/recipe/">Recipe</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>personalization</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/personalization/geolocation_with_amp-list/">Geolocation with amp-list</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>style-layout</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/style-layout/dark_mode_toggle/">Dark Mode</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/style-layout/how_to_support_images_with_unknown_dimensions/">How to support Images with unknown Dimensions</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/style-layout/tab_panels_with_amp-selector/">Tab Panels with amp-selector</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>user-consent</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/user-consent/advanced_user_consent_flow/">Advanced User Consent Flow</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/user-consent/client_side_user_consent_flow/">Client Side User Consent Flow</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/user-consent/external_user_consent_flow/">External User Consent Flow</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/user-consent/geolocation-based_consent_flow/">Geolocation-based Consent Flow</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/user-consent/granular_user_consent/">Granular User Consent</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/user-consent/server_side_user_consent_flow/">Server Side User Consent Flow</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/user-consent/user_consent_modal_ui/">User Consent Modal UI</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>visual-effects</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/visual-effects/animated_snackbar/">Animated Snackbar</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/visual-effects/basics_of_orientation_effects/">Basics of orientation effects</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/visual-effects/basics_of_scrollbound_effects/">Basics of scrollbound effects</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/examples/websites/visual-effects/scroll_to_top/">Scroll to top</a> </li> </ul> </li> </ul> </div> </div> </div> </ul> </nav> </amp-sidebar> <footer class="ap--footer"> <div class="-a"> <div class="-f"> <div class="ap-o-footer-hint">Of course, this site is made with AMP!</div> <div class="-l"> <h5 class="-c">Follow us</h5> <ul class="-h"> <li class="-p"> <a class="ap-a-ico -d" href="https://twitter.com/AMPhtml" rel="noopener" title="Twitter"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw" rel="noopener" title="YouTube"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#youtube"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://blog.amp.dev/" rel="noopener"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wordpress" title="WordPress"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://github.com/ampproject" title="GitHub"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"/></svg> </a></li> <li class="-p"> <a class="ap-a-ico -d" href="https://stackoverflow.com/questions/tagged/amp-html" rel="noopener" title="Stackoverflow"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stackoverflow"/></svg></a> </li> </ul> </div> </div> <div class="-v"> <div class="-m"> <h5 class="-g">Overview</h5> <ul class="-y"> <li class="-b"><a href="/about/websites/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>AMP Framework</a></li> <li class="-b"><a href="/about/use-cases/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Use Cases</a></li> <li class="-b"><a href="/success-stories/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Success stories</a></li> <li class="-b"><a href="/about/how-amp-works/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Functionality</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Docs</h5> <ul class="-y"> <li class="-b"><a href="/documentation/guides-and-tutorials/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Get Started</a></li> <li class="-b"><a href="/documentation/guides-and-tutorials/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Guides and Tutorials</a></li> <li class="-b"><a href="/documentation/components/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Components</a></li> <li class="-b"><a href="/documentation/examples/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Examples</a></li> <li class="-b"><a href="/documentation/templates/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Design Templates</a></li> <li class="-b"><a href="/documentation/tools/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Tools</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Community</h5> <ul class="-y"> <li class="-b"><a href="/support/faq/platform-and-vendor-partners/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Platform and Vendor Partners</a></li> <li class="-b"><a href="/documentation/guides-and-tutorials/contribute/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Contribute</a></li> <li class="-b"><a href="/community/roadmap/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Roadmap</a></li> </ul> <h5 class="-g">OpenJS Foundation</h5> <ul class="-y"> <li class="-b"><a class="-w" href="https://openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>The OpenJS Foundation</a></li> <li class="-b"><a class="-w" href="https://bylaws.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>OpenJS Foundation Bylaws</a></li> <li class="-b"><a class="-w" href="https://trademark-policy.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Trademark Policy</a></li> <li class="-b"><a class="-w" href="https://trademark-list.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Trademark List</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Events</h5> <ul class="-y"> <li class="-b"><a href="https://blog.amp.dev/2020/02/20/amp-conf-2020-return-to-nyc/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>AMP Conf 2020</a></li> <li class="-b"><a href="/events/amp-cs-2019/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>AMP Contributor Summit 2019</a></li> </ul> <h5 class="-g">AMP Brand Materials</h5> <ul class="-y"> <li class="-b"><a href="/static/files/brand-material/AMP_Mini_Styleguide.pdf" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"/></svg></div>Styleguide</a></li> <li class="-b"><a href="/static/files/brand-material/AMP_Logo_Rebrush.zip" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"/></svg></div>Logos</a></li> </ul> </div> </div> <div class="-k"> <div class="-_"> <amp-img src="/static/img/logo-openjsf.svg" alt="Logo of the OpenJS Foundation" width="315" height="100" layout="responsive" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:31.746%"></i-amphtml-sizer></amp-img> </div> <ul class="-j"> <li class="-q"><a class="-z" href="https://terms-of-use.openjsf.org" rel="noopener">Terms of Use</a></li> <li class="-q"><a class="-z" href="https://privacy-policy.openjsf.org" rel="noopener">Privacy Policy</a></li> <li class="-q"><a class="-z" href="https://www.linuxfoundation.org/cookies" rel="noopener">Cookie Policy</a></li> </ul> </div> <div class="-te"> © <a href="https://openjsf.org">OpenJS Foundation</a> and AMP Project contributors. All rights reserved. The <a href="https://openjsf.org">OpenJS Foundation</a> has registered trademarks and uses trademarks. For a list of trademarks of the <a href="https://openjsf.org">OpenJS Foundation</a>, please see our <a href="https://trademark-policy.openjsf.org">Trademark Policy</a> and <a href="https://trademark-list.openjsf.org">Trademark List</a>. Trademarks and logos not indicated on the <a href="https://trademark-list.openjsf.org">list of OpenJS Foundation trademarks</a> are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. <br><br> The services available at <a href="https://cdn.ampproject.org">cdn.ampproject.org</a> are provided by Google and the respective <a href="https://policies.google.com/privacy?hl=en">privacy policy</a> applies. </div> </div> </footer> <amp-geo layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"ISOCountryGroups":{"eu":["preset-eea"],"doubleOptIn":["de","at","no","gr","lu"]}}</script> </amp-geo> <amp-consent id="consent" class="-o i-amphtml-layout-nodisplay" layout="nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"consentInstanceId":"consent","promptUI":"consent-popup","consentRequired":false,"geoOverride":{"eu":{"consentRequired":true}}}</script> <div id="consent-popup" class="consent-popup"> <button type="reset" class="-u" on="tap:consent.dismiss" role="button" tabindex="0" aria-label="Dismiss consent"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"/></svg> </button> <p class="ap-o-consent-text"> We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our <a href="https://policies.google.com/technologies/cookies">use of cookies</a> and <a href="https://policies.google.com/privacy">privacy policy</a>. </p> <button on="tap:consent.accept" class="ap-a-btn" role="button" aria-label="Accept use of cookies">Got it!</button> </div> </amp-consent> <amp-analytics type="gtag" data-credentials="include" data-block-on-consent class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:1px;height:1px;" i-amphtml-layout="fixed"> <script type="application/json">{"extraUrlParams":{"cd2":"${ampdocHost}"},"requests":{"CWV_EVENT":"${base}?v=1\u0026t=event\u0026tid=${gtag_id}\u0026cid=0\u0026ec=cwv","base":"https://google-analytics.com/collect/"},"triggers":{"banner":{"on":"click","selector":"#top-banner","vars":{"event_action":"click","event_category":"examples","event_label":"banner","event_name":"banner"}},"breadcrumbLink":{"on":"click","selector":".ap-m-breadcrumbs-crumb","vars":{"event_action":"link","event_category":"examples","event_label":"breadcrumbs","event_name":"breadcrumbs"}},"cls":{"extraUrlParams":{"cls":"${cumulativeLayoutShift}"},"on":"visible","request":"CWV_EVENT"},"defaultPageview":{"on":"visible","request":"pageview","vars":{"title":"{{title}}"}},"fid":{"extraUrlParams":{"fid":"${firstInputDelay}"},"on":"visible","request":"CWV_EVENT"},"formatToggle":{"on":"click","selector":".ap-m-format-toggle-link","vars":{"event_action":"link","event_category":"examples","event_label":"format-toggle","event_name":"format-toggle"}},"lcp":{"extraUrlParams":{"lcp":"${largestContentfulPaint}"},"on":"visible","request":"CWV_EVENT"},"navigation":{"on":"click","selector":".ap--header a, .ap-o-burger-menu-link","vars":{"event_action":"link","event_category":"examples","event_label":"navigation","event_name":"navigation"}},"scrolledEnd":{"on":"scroll","scrollSpec":{"verticalBoundaries":[90]},"vars":{"event_action":"end","event_category":"examples","event_label":"scroll","event_name":"scroll"}},"scrolledHalf":{"on":"scroll","scrollSpec":{"verticalBoundaries":[50]},"vars":{"event_action":"half","event_category":"examples","event_label":"scroll","event_name":"scroll"}},"searchButton":{"on":"click","selector":"#searchTriggerOpen","vars":{"event_action":"open","event_category":"search","event_label":"search","event_name":"search"}},"sidebarLink":{"on":"click","selector":".ap-o-sidebar a","vars":{"event_action":"link","event_category":"examples","event_label":"sidebar","event_name":"sidebar"}},"sidebarToggle":{"on":"click","selector":"label[for=\"sidebar-desktop\"], label[for=\"sidebar\"]","vars":{"event_action":"toggle","event_category":"examples","event_label":"sidebar","event_name":"sidebar"}}},"vars":{"config":{"G-TYM9BH1XCX":{"groups":"default"}},"gtag_id":"G-TYM9BH1XCX"}}</script> </amp-analytics> <amp-install-serviceworker src="/serviceworker.js" data-iframe-src="https://amp.dev/serviceworker.html" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"></amp-install-serviceworker> <style amp-keyframes>@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes duepduep{0%{transform:translate(0)}49%{transform:translate(40px)}50%{transform:translate(-40px)}to{transform:translate(0)}}@keyframes moveSidebarToggleBackwards{0%{transform:translateX(calc(90vw - 50%))}to{transform:translateX(0)}}@keyframes moveSidebarToggleForwards{0%{transform:translateX(0)}to{transform:translateX(calc(90vw - 50%))}}</style></body></html>