Patterns | Component patterns

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="web.dev"> <meta property="og:type" content="website"><meta name="theme-color" content="#3740ff"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/web/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/touchicon-180.png"><link rel="canonical" href="https://web.dev/patterns"><link rel="search" type="application/opensearchdescription+xml" title="web.dev" href="https://web.dev/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://web.dev/patterns" /><link rel="alternate" hreflang="x-default" href="https://web.dev/patterns" /><link rel="alternate" hreflang="ar" href="https://web.dev/patterns?hl=ar" /><link rel="alternate" hreflang="bn" href="https://web.dev/patterns?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://web.dev/patterns?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://web.dev/patterns?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://web.dev/patterns?hl=fa" /><link rel="alternate" hreflang="fr" href="https://web.dev/patterns?hl=fr" /><link rel="alternate" hreflang="de" href="https://web.dev/patterns?hl=de" /><link rel="alternate" hreflang="he" href="https://web.dev/patterns?hl=he" /><link rel="alternate" hreflang="hi" href="https://web.dev/patterns?hl=hi" /><link rel="alternate" hreflang="id" href="https://web.dev/patterns?hl=id" /><link rel="alternate" hreflang="it" href="https://web.dev/patterns?hl=it" /><link rel="alternate" hreflang="ja" href="https://web.dev/patterns?hl=ja" /><link rel="alternate" hreflang="ko" href="https://web.dev/patterns?hl=ko" /><link rel="alternate" hreflang="pl" href="https://web.dev/patterns?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://web.dev/patterns?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://web.dev/patterns?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://web.dev/patterns?hl=es-419" /><link rel="alternate" hreflang="th" href="https://web.dev/patterns?hl=th" /><link rel="alternate" hreflang="tr" href="https://web.dev/patterns?hl=tr" /><link rel="alternate" hreflang="vi" href="https://web.dev/patterns?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://web.developers.google.cn/patterns" /><link rel="alternate" hreflang="x-default" href="https://web.developers.google.cn/patterns" /><link rel="alternate" hreflang="ar-cn" href="https://web.developers.google.cn/patterns?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://web.developers.google.cn/patterns?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://web.developers.google.cn/patterns?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://web.developers.google.cn/patterns?hl=zh-tw" /><link rel="alternate" hreflang="fa-cn" href="https://web.developers.google.cn/patterns?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://web.developers.google.cn/patterns?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://web.developers.google.cn/patterns?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://web.developers.google.cn/patterns?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://web.developers.google.cn/patterns?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://web.developers.google.cn/patterns?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://web.developers.google.cn/patterns?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://web.developers.google.cn/patterns?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://web.developers.google.cn/patterns?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://web.developers.google.cn/patterns?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://web.developers.google.cn/patterns?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://web.developers.google.cn/patterns?hl=ru" /><link rel="alternate" hreflang="es-419-cn" href="https://web.developers.google.cn/patterns?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://web.developers.google.cn/patterns?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://web.developers.google.cn/patterns?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://web.developers.google.cn/patterns?hl=vi" /><title>Patterns  |  Component patterns  |  web.dev</title> <meta property="og:title" content="Patterns  |  Component patterns  |  web.dev"><meta property="og:url" content="https://web.dev/patterns"><meta property="og:locale" content="en"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "Patterns" } </script><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Component patterns", "item": "https://web.dev/patterns/components" },{ "@type": "ListItem", "position": 2, "name": "Patterns", "item": "https://web.dev/patterns" }] } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="landing" theme="web-theme" type="article" appearance layout="full" pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="web.dev"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab > <a href="https://web.dev/about" track-metadata-eventdetail="https://web.dev/about" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - about" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: About" track-name="about" > About </a> </tab> <tab > <a href="https://web.dev/html" track-metadata-eventdetail="https://web.dev/html" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - html" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: HTML" track-name="html" > HTML </a> </tab> <tab > <a href="https://web.dev/css" track-metadata-eventdetail="https://web.dev/css" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - css" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: CSS" track-name="css" > CSS </a> </tab> <tab > <a href="https://web.dev/javascript" track-metadata-eventdetail="https://web.dev/javascript" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - javascript" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: JavaScript" track-name="javascript" > JavaScript </a> </tab> <tab > <a href="https://web.dev/blog" track-metadata-eventdetail="https://web.dev/blog" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - blog" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" > Blog </a> </tab> <tab > <a href="https://web.dev/learn" track-metadata-eventdetail="https://web.dev/learn" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - learn" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Learn" track-name="learn" > Learn </a> </tab> <tab > <a href="https://web.dev/explore" track-metadata-eventdetail="https://web.dev/explore" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - explore" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Explore" track-name="explore" > Explore </a> </tab> <tab class="devsite-active"> <a href="https://web.dev/patterns" track-metadata-eventdetail="https://web.dev/patterns" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - patterns" track-metadata-module="primary nav" aria-label="Patterns, selected" data-category="Site-Wide Custom Events" data-label="Tab: Patterns" track-name="patterns" > Patterns </a> </tab> <tab > <a href="https://web.dev/case-studies" track-metadata-eventdetail="https://web.dev/case-studies" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - case studies" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Case studies" track-name="case studies" > Case studies </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Component patterns" tenant-name="web.dev" > <form class="devsite-search-form" action="https://web.dev/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-appearance-selector></devsite-appearance-selector> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section "> <div class="devsite-header-background"> <div class="devsite-doc-set-nav-row"> <devsite-tabs class="lower-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Lower tabs"> <tab > <a href="https://web.dev/patterns/animation" track-metadata-eventdetail="https://web.dev/patterns/animation" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - animations" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Animations" track-name="animations" > Animations </a> </tab> <tab > <a href="https://web.dev/patterns/clipboard" track-metadata-eventdetail="https://web.dev/patterns/clipboard" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - clipboard" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Clipboard" track-name="clipboard" > Clipboard </a> </tab> <tab > <a href="https://web.dev/patterns/components" track-metadata-eventdetail="https://web.dev/patterns/components" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - components" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Components" track-name="components" > Components </a> </tab> <tab > <a href="https://web.dev/patterns/files" track-metadata-eventdetail="https://web.dev/patterns/files" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - files & directories" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Files & Directories" track-name="files & directories" > Files & Directories </a> </tab> <tab > <a href="https://web.dev/patterns/layout" track-metadata-eventdetail="https://web.dev/patterns/layout" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - layout" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Layout" track-name="layout" > Layout </a> </tab> <tab > <a href="https://web.dev/patterns/media" track-metadata-eventdetail="https://web.dev/patterns/media" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - media" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Media" track-name="media" > Media </a> </tab> <tab > <a href="https://web.dev/patterns/theming" track-metadata-eventdetail="https://web.dev/patterns/theming" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - theming" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Theming" track-name="theming" > Theming </a> </tab> <tab > <a href="https://web.dev/patterns/web-apps" track-metadata-eventdetail="https://web.dev/patterns/web-apps" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - web apps" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Web apps" track-name="web apps" > Web apps </a> </tab> <tab > <a href="https://web.dev/patterns/web-vitals-patterns" track-metadata-eventdetail="https://web.dev/patterns/web-vitals-patterns" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - web vitals" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Web Vitals" track-name="web vitals" > Web Vitals </a> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars hidden> <div class="devsite-book-nav-filter" hidden> <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="web.dev"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/about" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: About" track-name="about" data-category="Site-Wide Custom Events" data-label="Responsive Tab: About" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > About </span> </a> </li> <li class="devsite-nav-item"> <a href="/html" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: HTML" track-name="html" data-category="Site-Wide Custom Events" data-label="Responsive Tab: HTML" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > HTML </span> </a> </li> <li class="devsite-nav-item"> <a href="/css" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: CSS" track-name="css" data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS </span> </a> </li> <li class="devsite-nav-item"> <a href="/javascript" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: JavaScript" track-name="javascript" data-category="Site-Wide Custom Events" data-label="Responsive Tab: JavaScript" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > JavaScript </span> </a> </li> <li class="devsite-nav-item"> <a href="/blog" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Blog" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Blog </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Learn" track-name="learn" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Explore" track-name="explore" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Explore" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Explore </span> </a> </li> <li class="devsite-nav-item"> <a href="/patterns" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Patterns" track-name="patterns" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Patterns" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Patterns </span> </a> <ul class="devsite-nav-responsive-tabs"> <li class="devsite-nav-item"> <a href="/patterns/animation" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Animations" track-name="animations" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Animations" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Animations </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/patterns/clipboard" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Clipboard" track-name="clipboard" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Clipboard" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Clipboard </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/patterns/components" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Components" track-name="components" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Components" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Components </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/patterns/files" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Files & Directories" track-name="files & directories" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Files & Directories" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Files & Directories </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/patterns/layout" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Layout" track-name="layout" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Layout" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Layout </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/patterns/media" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Media" track-name="media" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Media" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Media </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/patterns/theming" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Theming" track-name="theming" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Theming" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Theming </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/patterns/web-apps" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Web apps" track-name="web apps" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Web apps" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Web apps </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/patterns/web-vitals-patterns" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Web Vitals" track-name="web vitals" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Web Vitals" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Web Vitals </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/case-studies" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Case studies" track-name="case studies" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Case studies" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Case studies </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars disabled></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://web.dev/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="" > Home </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.dev/patterns" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="Patterns" > Patterns </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.dev/patterns/components" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="3" track-type="globalNav" track-name="breadcrumb" track-metadata-position="3" track-metadata-eventdetail="Component patterns" > Component patterns </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.dev/patterns/animation" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="4" track-type="globalNav" track-name="breadcrumb" track-metadata-position="4" track-metadata-eventdetail="" > Animations </a> </li> </ul> </div> <devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded disabled> </devsite-toc> <div class="devsite-article-body clearfix "> <section class="devsite-landing-row devsite-landing-row-3-up devsite-landing-row-cards devsite-landing-row-padding-large devsite-landing-row-no-image-background" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://web.dev/patterns/animation"> <picture> <img alt="" src="https://web.dev/static/patterns/animation/hero.png" srcset="https://web.dev/static/patterns/animation/hero_36.png 36w,https://web.dev/static/patterns/animation/hero_48.png 48w,https://web.dev/static/patterns/animation/hero_72.png 72w,https://web.dev/static/patterns/animation/hero_96.png 96w,https://web.dev/static/patterns/animation/hero_480.png 480w,https://web.dev/static/patterns/animation/hero_720.png 720w,https://web.dev/static/patterns/animation/hero_856.png 856w,https://web.dev/static/patterns/animation/hero_960.png 960w,https://web.dev/static/patterns/animation/hero_1440.png 1440w,https://web.dev/static/patterns/animation/hero_1920.png 1920w,https://web.dev/static/patterns/animation/hero_2880.png 2880w" sizes="(max-width: 840px) 50vw, 464px" fetchpriority="high"> </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="animation" data-text="Animation" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/patterns/animation"> Animation </a> </h3> <div class="devsite-landing-row-item-description-content"> Animation techniques built using CSS or JavaScript with considerations for accessibility and user preferences. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/patterns/animation" class="button button-primary " >See patterns</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://web.dev/patterns/clipboard"> <picture> <img alt="" src="https://web.dev/static/patterns/clipboard/hero.png" srcset="https://web.dev/static/patterns/clipboard/hero_36.png 36w,https://web.dev/static/patterns/clipboard/hero_48.png 48w,https://web.dev/static/patterns/clipboard/hero_72.png 72w,https://web.dev/static/patterns/clipboard/hero_96.png 96w,https://web.dev/static/patterns/clipboard/hero_480.png 480w,https://web.dev/static/patterns/clipboard/hero_720.png 720w,https://web.dev/static/patterns/clipboard/hero_856.png 856w,https://web.dev/static/patterns/clipboard/hero_960.png 960w,https://web.dev/static/patterns/clipboard/hero_1440.png 1440w,https://web.dev/static/patterns/clipboard/hero_1920.png 1920w,https://web.dev/static/patterns/clipboard/hero_2880.png 2880w" sizes="(max-width: 840px) 50vw, 464px" fetchpriority="high"> </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="clipboard" data-text="Clipboard" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/patterns/clipboard"> Clipboard </a> </h3> <div class="devsite-landing-row-item-description-content"> Common patterns for dealing with the clipboard. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/patterns/clipboard" class="button button-primary " >See patterns</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://web.dev/patterns/components"> <picture> <img alt="" src="https://web.dev/static/patterns/components/hero.png" srcset="https://web.dev/static/patterns/components/hero_36.png 36w,https://web.dev/static/patterns/components/hero_48.png 48w,https://web.dev/static/patterns/components/hero_72.png 72w,https://web.dev/static/patterns/components/hero_96.png 96w,https://web.dev/static/patterns/components/hero_480.png 480w,https://web.dev/static/patterns/components/hero_720.png 720w,https://web.dev/static/patterns/components/hero_856.png 856w,https://web.dev/static/patterns/components/hero_960.png 960w,https://web.dev/static/patterns/components/hero_1440.png 1440w,https://web.dev/static/patterns/components/hero_1920.png 1920w,https://web.dev/static/patterns/components/hero_2880.png 2880w" sizes="(max-width: 840px) 50vw, 464px" fetchpriority="high"> </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="components" data-text="Components" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/patterns/components"> Components </a> </h3> <div class="devsite-landing-row-item-description-content"> Cross-browser UI components for use in accelerating or inspiring your own design systems. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/patterns/components" class="button button-primary " >See patterns</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://web.dev/patterns/files"> <picture> <img alt="" src="https://web.dev/static/patterns/files/hero.png" srcset="https://web.dev/static/patterns/files/hero_36.png 36w,https://web.dev/static/patterns/files/hero_48.png 48w,https://web.dev/static/patterns/files/hero_72.png 72w,https://web.dev/static/patterns/files/hero_96.png 96w,https://web.dev/static/patterns/files/hero_480.png 480w,https://web.dev/static/patterns/files/hero_720.png 720w,https://web.dev/static/patterns/files/hero_856.png 856w,https://web.dev/static/patterns/files/hero_960.png 960w,https://web.dev/static/patterns/files/hero_1440.png 1440w,https://web.dev/static/patterns/files/hero_1920.png 1920w,https://web.dev/static/patterns/files/hero_2880.png 2880w" sizes="(max-width: 840px) 50vw, 464px" fetchpriority="high"> </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="files-and-directories" data-text="Files and directories" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/patterns/files"> Files and directories </a> </h3> <div class="devsite-landing-row-item-description-content"> Common patterns for dealing with files and directories. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/patterns/files" class="button button-primary " >See patterns</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://web.dev/patterns/layout"> <picture> <img alt="" src="https://web.dev/static/patterns/layout/hero.png" srcset="https://web.dev/static/patterns/layout/hero_36.png 36w,https://web.dev/static/patterns/layout/hero_48.png 48w,https://web.dev/static/patterns/layout/hero_72.png 72w,https://web.dev/static/patterns/layout/hero_96.png 96w,https://web.dev/static/patterns/layout/hero_480.png 480w,https://web.dev/static/patterns/layout/hero_720.png 720w,https://web.dev/static/patterns/layout/hero_856.png 856w,https://web.dev/static/patterns/layout/hero_960.png 960w,https://web.dev/static/patterns/layout/hero_1440.png 1440w,https://web.dev/static/patterns/layout/hero_1920.png 1920w,https://web.dev/static/patterns/layout/hero_2880.png 2880w" sizes="(max-width: 840px) 50vw, 464px" fetchpriority="high"> </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="layout" data-text="Layout" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/patterns/layout"> Layout </a> </h3> <div class="devsite-landing-row-item-description-content"> Layout patterns built using modern CSS APIs that help you build common interfaces such as cards, dynamic grid areas, and full-page layouts. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/patterns/layout" class="button button-primary " >See patterns</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://web.dev/patterns/media"> <picture> <img alt="" src="https://web.dev/static/patterns/media/hero.png" srcset="https://web.dev/static/patterns/media/hero_36.png 36w,https://web.dev/static/patterns/media/hero_48.png 48w,https://web.dev/static/patterns/media/hero_72.png 72w,https://web.dev/static/patterns/media/hero_96.png 96w,https://web.dev/static/patterns/media/hero_480.png 480w,https://web.dev/static/patterns/media/hero_720.png 720w,https://web.dev/static/patterns/media/hero_856.png 856w,https://web.dev/static/patterns/media/hero_960.png 960w,https://web.dev/static/patterns/media/hero_1440.png 1440w,https://web.dev/static/patterns/media/hero_1920.png 1920w,https://web.dev/static/patterns/media/hero_2880.png 2880w" sizes="(max-width: 840px) 50vw, 464px" fetchpriority="high"> </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="media" data-text="Media" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/patterns/media"> Media </a> </h3> <div class="devsite-landing-row-item-description-content"> Common patterns for working with media. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/patterns/media" class="button button-primary " >See patterns</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://web.dev/patterns/theming"> <picture> <img alt="" src="https://web.dev/static/patterns/theming/hero.png" srcset="https://web.dev/static/patterns/theming/hero_36.png 36w,https://web.dev/static/patterns/theming/hero_48.png 48w,https://web.dev/static/patterns/theming/hero_72.png 72w,https://web.dev/static/patterns/theming/hero_96.png 96w,https://web.dev/static/patterns/theming/hero_480.png 480w,https://web.dev/static/patterns/theming/hero_720.png 720w,https://web.dev/static/patterns/theming/hero_856.png 856w,https://web.dev/static/patterns/theming/hero_960.png 960w,https://web.dev/static/patterns/theming/hero_1440.png 1440w,https://web.dev/static/patterns/theming/hero_1920.png 1920w,https://web.dev/static/patterns/theming/hero_2880.png 2880w" sizes="(max-width: 840px) 50vw, 464px" fetchpriority="high"> </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="theming" data-text="Theming" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/patterns/theming"> Theming </a> </h3> <div class="devsite-landing-row-item-description-content"> Techniques to assist in managing color throughout your projects. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/patterns/theming" class="button button-primary " >See patterns</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://web.dev/patterns/web-apps"> <picture> <img alt="" src="https://web.dev/static/patterns/web-apps/hero.png" srcset="https://web.dev/static/patterns/web-apps/hero_36.png 36w,https://web.dev/static/patterns/web-apps/hero_48.png 48w,https://web.dev/static/patterns/web-apps/hero_72.png 72w,https://web.dev/static/patterns/web-apps/hero_96.png 96w,https://web.dev/static/patterns/web-apps/hero_480.png 480w,https://web.dev/static/patterns/web-apps/hero_720.png 720w,https://web.dev/static/patterns/web-apps/hero_856.png 856w,https://web.dev/static/patterns/web-apps/hero_960.png 960w,https://web.dev/static/patterns/web-apps/hero_1440.png 1440w,https://web.dev/static/patterns/web-apps/hero_1920.png 1920w,https://web.dev/static/patterns/web-apps/hero_2880.png 2880w" sizes="(max-width: 840px) 50vw, 464px" fetchpriority="high"> </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="web-apps" data-text="Web apps" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/patterns/web-apps"> Web apps </a> </h3> <div class="devsite-landing-row-item-description-content"> Common patterns for building web apps. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/patterns/web-apps" class="button button-primary " >See patterns</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://web.dev/patterns/web-vitals-patterns"> <picture> <img alt="" src="https://web.dev/static/patterns/web-vitals-patterns/hero.png" srcset="https://web.dev/static/patterns/web-vitals-patterns/hero_36.png 36w,https://web.dev/static/patterns/web-vitals-patterns/hero_48.png 48w,https://web.dev/static/patterns/web-vitals-patterns/hero_72.png 72w,https://web.dev/static/patterns/web-vitals-patterns/hero_96.png 96w,https://web.dev/static/patterns/web-vitals-patterns/hero_480.png 480w,https://web.dev/static/patterns/web-vitals-patterns/hero_720.png 720w,https://web.dev/static/patterns/web-vitals-patterns/hero_856.png 856w,https://web.dev/static/patterns/web-vitals-patterns/hero_960.png 960w,https://web.dev/static/patterns/web-vitals-patterns/hero_1440.png 1440w,https://web.dev/static/patterns/web-vitals-patterns/hero_1920.png 1920w,https://web.dev/static/patterns/web-vitals-patterns/hero_2880.png 2880w" sizes="(max-width: 840px) 50vw, 464px" fetchpriority="high"> </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="web-vitals-patterns" data-text="Web Vitals patterns" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/patterns/web-vitals-patterns"> Web Vitals patterns </a> </h3> <div class="devsite-landing-row-item-description-content"> Common patterns optimized for Core Web Vitals, including patterns that are often tricky to implement without hurting your Core Web Vitals scores. You can use the code in these examples to help ensure your projects stay on the right track. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/patterns/web-vitals-patterns" class="button button-primary " >See patterns</a> </div> </div> </div> </div> </div> </div> </section> </div> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],[],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox wd-footer-promo"> <h3 class="devsite-footer-linkbox-heading no-link">web.dev</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <h3 class="devsite-footer-linkbox-heading no-link"> web.dev </h3> <div class="devsite-footer-linkbox-description">We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users. This site is our home for content to help you on that journey, written by members of the Chrome team, and external experts.</div> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Contribute</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues/new?component=1400680&template=1857359" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > File a bug </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues?q=status:open%20componentid:1400680&s=created_time:desc" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > See open issues </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Related Content</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://developer.chrome.com/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Chrome for Developers </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://blog.chromium.org/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Chromium updates </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/case-studies" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Case studies </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/shows" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Podcasts & shows </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Follow</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://twitter.com/ChromiumDev" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > @ChromiumDev on X </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.youtube.com/user/ChromeDevelopers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > YouTube </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.linkedin.com/showcase/chrome-for-developers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Chrome for Developers on LinkedIn </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/static/blog/feed.xml" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > RSS </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [], "ga4p": [], "gtm": [{"id": "GTM-MZWCJPP", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "Component patterns", "signedIn": "False", "tenant": "web", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="+l3xQhLsHUSzDRGjdX/tcCo/qkM7HI"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/js/app_loader.js', '[27,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web","https://web-dot-devsite-v2-prod-3p.appspot.com",1,null,["/_pwa/web/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyCNm9YxQumEXwGJgTDjxoxXK6m1F-9720Q","AIzaSyCc76DZePGtoyUjqKrLdsMGk_ry7sljLbY","web.dev","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["Cloud__enable_free_trial_server_call","MiscFeatureFlags__enable_project_variables","Search__enable_dynamic_content_confidential_banner","CloudShell__cloud_shell_button","Cloud__enable_cloud_facet_chat","Profiles__enable_complete_playlist_endpoint","MiscFeatureFlags__emergency_css","Profiles__require_profile_eligibility_for_signin","DevPro__enable_developer_subscriptions","Experiments__reqs_query_experiments","Cloud__enable_llm_concierge_chat","EngEduTelemetry__enable_engedu_telemetry","BookNav__enable_tenant_cache_key","TpcFeatures__enable_required_headers","Profiles__enable_profile_collections","Profiles__enable_dashboard_curated_recommendations","Profiles__enable_page_saving","DevPro__enable_cloud_innovators_plus","Cloud__enable_cloudx_experiment_ids","Cloud__enable_cloud_dlp_service","MiscFeatureFlags__enable_variable_operator","Profiles__enable_awarding_url","TpcFeatures__enable_mirror_tenant_redirects","Search__enable_suggestions_from_borg","Search__enable_page_map","Cloud__enable_cloud_shell_fte_user_flow","Profiles__enable_recognition_badges","MiscFeatureFlags__enable_firebase_utm","Analytics__enable_clearcut_logging","MiscFeatureFlags__developers_footer_dark_image","Search__enable_ai_eligibility_checks","Profiles__enable_developer_profiles_callout","MiscFeatureFlags__developers_footer_image","Cloud__enable_legacy_calculator_redirect","Cloud__enable_cloudx_ping","Concierge__enable_pushui","Profiles__enable_release_notes_notifications","MiscFeatureFlags__enable_explain_this_code","MiscFeatureFlags__enable_view_transitions","Profiles__enable_completecodelab_endpoint","OnSwitch__enable","Profiles__enable_public_developer_profiles","Cloud__enable_cloud_shell","CloudShell__cloud_code_overflow_menu"],null,null,"AIzaSyA58TaKli1DculwmAmbpzLVGuWc8eCQgQc","https://developerscontentserving-pa.googleapis.com","AIzaSyDWBU60w0P9hEkr29kkksYs8Z7gvZ8u_wc","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[27,"web","web.dev","web.dev",null,"web-dot-devsite-v2-prod-3p.appspot.com",null,null,[null,null,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],null,null,null,null,[1,null,1],[1,1,null,1,1]],null,[38,null,null,null,null,null,"/images/lockup.svg","/images/touchicon-180.png",null,null,null,1,1,null,null,null,null,null,null,null,null,2,null,null,null,"/images/lockup-dark-theme.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[[],[1,1]],[[null,null,null,null,null,["GTM-MZWCJPP"],null,null,null,null,null,[["GTM-MZWCJPP",1]],1]],null,4]]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Patterns | Component patterns | web.dev