');mask-image:url('data:image/svg+xml;utf8, ');-webkit-mask-position:center 1.75em;mask-position:center 1.75em;-webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;position:absolute;top:0;width:1.75em}}.landing-section--ordered.landing-section--top-3 .item{margin-top:1.75em}@media (max-width:591px){.landing-section--ordered.landing-section--top-3 .item{margin:1.75em 0;padding:0 0 0 3.125rem;position:relative}}.landing-section--ordered.landing-section--top-3 .item__outer{border:0}@media (min-width:592px){.landing-section--ordered.landing-section--top-3 .item__outer::before{background-color:var(--dot-color);content:"";display:block;height:1.75em;left:0;margin-bottom:1.75em;-webkit-mask-image:url('data:image/svg+xml;utf8, ');mask-image:url('data:image/svg+xml;utf8, ');-webkit-mask-position:1.75em center;mask-position:1.75em center;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;position:absolute;top:0;width:100%}}.landing-section--boxes{grid-template-columns:1fr;padding:0}@media (min-width:592px){.landing-section--boxes{grid-template-columns:1fr 1fr 1fr}}.landing-section--boxes .landing-deco{grid-area:1/-2/3/-1}@media (min-width:592px){.landing-section--left{grid-auto-flow:dense;grid-template-columns:1fr 2fr}.landing-section--left div:first-child{grid-column:2}.landing-section--left div:last-child{grid-column:1}}.landing-section--left .item__title{font-size:1.2em}.landing-section--left .item::before{font-size:1.1em}@media (min-width:592px){.landing-section--right{grid-auto-flow:dense;grid-template-columns:1fr 2fr}}.landing-section--right .item__title{font-weight:600}@media (min-width:592px){.landing-section--top-3 .landing-section__links{grid-template-columns:1fr 1fr 1fr}}.landing-section--top-3 .landing-deco__inner{display:grid;grid-template-columns:1fr}@media (min-width:592px){.landing-section--top-3 .landing-deco__inner{grid-template-columns:2fr 1fr}}.landing-section--top-3 .item__title{font-size:1.2em}.landing-section--top-3 .landing-section__links{display:grid}.landing-section--top-3 .item__outer{position:relative}@media (min-width:592px){.landing-section--top-3 .item__outer{border-bottom:0}}.landing-section--top-3 .item__outer:not(:last-child){border-bottom:1px solid var(--color-hairline)}.landing-section--top-3 .item{padding:1em 3em 1em 0}@media (min-width:592px){.landing-section--top-3 .item{padding:1em 3em 3em 0}}.landing-section--top-3 .item::before{margin-top:-1.75em}@media (max-width:591px){.landing-section--top-3 .item::before{margin-top:0}}.landing-section .icon{height:auto;width:auto}.landing-section--ordered .use-case--ordered,.landing-section--ordered .use-case--unordered{counter-reset:section}.landing-section--ordered .use-case--unordered .item::before{content:""}.landing-section--ordered .landing-section__links h3{background:#fff;line-height:2em;padding:6px 0}@media (min-width:592px){.landing-section--ordered.landing-section--left .landing-section__links .use-case--ordered::before,.landing-section--ordered.landing-section--right .landing-section__links .use-case--ordered::before{background-color:var(--dot-color);content:"";display:block;height:100%;left:0;-webkit-mask-image:url('data:image/svg+xml;utf8, ');mask-image:url('data:image/svg+xml;utf8, ');-webkit-mask-position:center 1.75em;mask-position:center 1.75em;-webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;position:absolute;top:0;width:1.75em;z-index:-1}.landing-section--ordered.landing-section--left .usecases.landing-section__links::before,.landing-section--ordered.landing-section--right .usecases.landing-section__links::before{background:0 0;-webkit-mask-image:"";mask-image:"";-webkit-mask-position:center 0;mask-position:center 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}}@media (max-width:591px){.landing-section .related-articles{padding:0 1.5rem}}.landing-section .related-articles ul{column-count:2;column-gap:20px;list-style:none;padding:0}.landing-section .related-item{margin-bottom:6px}.landing-section .related-item a{align-items:center;display:inline-flex;gap:.5ch}.landing-section .related-item p{line-height:2em}.landing-section--top-3 .landing-deco__inner{align-items:center}.landing-explore{display:flex;flex-wrap:wrap;justify-content:space-between}.landing-explore .landing-explore__link{align-items:center;border-radius:.75rem;color:var(--color-bg);display:flex;font-family:"Google Sans";font-weight:400;justify-content:flex-start;margin-top:1.5rem;padding:1rem;position:relative;text-decoration:none}@media (max-width:591px){.landing-explore .landing-explore__link{margin-top:1rem;width:100%}}@media (min-width:592px){.landing-explore .landing-explore__link{width:calc((100% - 1.5rem)/2)}}@media (min-width:992px){.landing-explore .landing-explore__link{width:calc((100% - 3rem)/3)}}.landing-explore .landing-explore__link>div{z-index:1}.landing-explore .landing-explore__link::before{background:rgba(var(--rgb-button-overlay),1);border-radius:inherit;bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .1s;z-index:0}.landing-explore .landing-explore__link:hover::before{opacity:.16}.landing-explore .landing-explore__link:hover{box-shadow:rgba(var(--rgb-button-overlay),.3)0 1px 2px 0,rgba(var(--rgb-button-overlay),.15)0 1px 3px 1px}.landing-explore .landing-explore__icon{display:flex;padding:2px 0}.landing-container{max-width:1200px}.load-more__button{align-items:center;background:var(--color-secondary);border:0;border-radius:10000px;color:var(--color-blue-medium);display:flex;padding:.5em 1.12em;text-decoration:none}.load-more__button svg{fill:var(--color-blue-medium);height:1.2em}.load-more__button:hover{text-decoration:underline}.load-more__button:not([disabled]){cursor:pointer}.load-more__button[disabled]{opacity:.5}.load-more__button[hidden]{display:none}.fugu-showcase .search-box{align-items:center;gap:1rem}.fugu-showcase .search-box__input{background:var(--color-bg-shade);border:0;border-radius:6.25rem;display:block;margin:0;padding:.5rem 3rem}.fugu-showcase .search-box__input::placeholder{color:var(--color-secondary-text)}.fugu-showcase .enhanced-select__wrapper{border:0;color:var(--color-primary)}.fugu-showcase .web-share{appearance:none;background:0 0;border:0;cursor:pointer}.enhanced-select__wrapper{border:1px solid var(--color-hairline);height:100%}.enhanced-select label{cursor:pointer;height:100%;min-width:80px;padding:0 .8em}.enhanced-select label svg{margin-left:.75rem;width:.625rem}.enhanced-select__options{background:#fff;bottom:0;box-shadow:0 1px 2px rgba(60,64,67,.3),0 2px 6px 2px rgba(60,64,67,.15);display:none;left:calc(50% - .75rem);list-style:none;margin:0;max-height:24.5rem;min-width:18rem;overflow-y:auto;padding:1.125rem 0;position:absolute;transform:translateY(100%);z-index:10}.enhanced-select__options::-webkit-scrollbar-thumb{background:#e8eaed}.enhanced-select__options::-webkit-scrollbar{width:.375rem}.enhanced-select__options li{border-radius:0 100px 100px 0;font-family:"Google Sans",sans-serif;font-size:.875rem;font-weight:500;line-height:1.2rem;padding:1rem 2.75rem;text-align:left}.enhanced-select__options li[selected]{background:#f8f9fa;color:#bdc1c6}.enhanced-select__options li:hover:not([selected]){background:#e8f0fe;color:#1967d2}.enhanced-select__options li:first-child{margin-top:0}.enhanced-select__options li:last-child{margin-bottom:0}.enhanced-select[open] .enhanced-select__options{display:block}.enhanced-select[multiple] li[selected] svg{fill:#9aa0a6;margin-right:calc(-2.75rem/2)}.enhanced-select[multiple] li[selected]:hover{color:#80868b}.enhanced-select[multiple] li[selected]:hover svg{fill:#80868b}enhanced-select{align-items:center;display:none;height:2.5rem;position:relative}enhanced-select:defined{display:inline-flex}enhanced-select select{max-height:100%}.hairline{border:1px solid var(--color-hairline)}.hairline-top{border-top:1px solid var(--color-hairline)}.hairline-bottom{border-bottom:1px solid var(--color-hairline)}.bg-blue-lightest{background-color:var(--color-blue-lightest)}.color-blue-medium{color:var(--color-blue-medium)}.bg-blue-medium{background-color:var(--color-blue-medium)}.color-blue-darkest{color:var(--color-blue-darkest)}.bg-yellow-lightest{background-color:var(--color-yellow-lightest)}.color-yellow-darkest{color:var(--color-yellow-darkest)}.color-red-medium{color:var(--color-red-medium)}.bg-green-lightest{background-color:var(--color-green-lightest)}.color-green-darkest{color:var(--color-green-darkest)}.color-bg{color:var(--color-bg)}.color-text{color:var(--color-text)}.color-secondary-text{color:var(--color-secondary-text)}.color-primary{color:var(--color-primary)}.bg-primary{background-color:var(--color-primary)}.scrollbar{scrollbar-color:#9aa0a6 transparent;scrollbar-width:thin}.scrollbar::-webkit-scrollbar{height:10px;width:10px}.scrollbar::-webkit-scrollbar-thumb{background:#9aa0a6;background-clip:padding-box;border:2.5px solid transparent;border-radius:5px}.scrollbar::-webkit-scrollbar-thumb:hover{background-color:#798189}.scrollbar::-webkit-scrollbar-thumb:active{background-color:#61686e}.scrollbar::-webkit-scrollbar-track{background:0 0}.footer__link,.surface{text-decoration:none}.footer__link:focus,.footer__link:hover,.surface:focus,.surface:hover{text-decoration:underline}.visually-hidden,.w-visually-hidden{border:0;clip:rect(0 0 0 0);height:auto;margin:0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
Skip to content The Chrome team is back at Google I/O on May 10!
A sample landing page
This page is used for visual testing of the landing layout and also showcases it's capabilities
Another hero block
You can add such blocks using the heroCardWide macro. The macro supports multiple layouts as demostrated by this block and the one above
Do something # This is a landing section
Such blocks can be added using the landingSection macro. The three blocks beneath are also landingSections; they showcase the various layouts that can be achieved with the macro
If you pass an array of urls to a landing section. They'll surface like this.
Each item should consist of an url, title and description
Or you can pass a single internal URL which will surface as per the following item.
# Landing section 2
Ut morbi tincidunt augue interdum velit euismod. Scelerisque felis imperdiet proin fermentum leo vel orci. Pulvinar elementum integer enim neque.
If you pass an array of urls to a landing section. They'll surface like this.
Each item should consist of an url, title and description
Or you can pass a single internal URL which will surface as per the following item.
# Landing section 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
If you pass an array of urls to a landing section. They'll surface like this.
Each item should consist of an url, title and description
Or you can pass a single internal URL which will surface as per the following item.
# Landing section 4
Ut morbi tincidunt augue interdum velit euismod. Scelerisque felis imperdiet proin fermentum leo vel orci. Pulvinar elementum integer enim neque.
If you pass an array of urls to a landing section. They'll surface like this.
Each item should consist of an url, title and description
Or you can pass a single internal URL which will surface as per the following item.
# An expanded landing section
If you need to add an additional set of links to a landing section you can use the landingSectionExpanded macro
You can add custom links as with the standard landingSection macro.
You can add additional links: # Expanded landing section - 2
The layout/style of the expanded landing section can be modified as per the standard landingSection
You can add custom links as with the standard landingSection macro.
You can add additional links: # Use case landing section
Proposals to prevent third-parties from fingerprinting or collecting unlimited sensitive data.
Use Case 1 A custom link for this use case
A custom link for this use case
A custom link for this use case
Use Case 2 A custom link for this use case
A custom link for this use case
A custom link for this use case
More proposals A custom link for this use case
A custom link for this use case
A custom link for this use case
# Landing deco
You can add banners like this using the landingDeco macro. Be sure to wrap it using landing-section class to keep padding consistent with the other blocks
# Landing deco 2
You can also add banners like the one above to the grid. On desktop, it will always float to the right and span two rows.
Using the landing-section--boxes class you can add a grid of boxes like this
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.