Skip to main content

Panes

Panes provide a flexible way for sites to showcase prominent products or services together as a group. They differ from product placement because they provide greater prominence to a few items rather than equal prominence to many.

Example

Surface Book

Surface Book

With the power of a high performance laptop and the versatility of tablet, Surface Book is the ultimate laptop.

Starting at  $ 899.99

User rating: 4/ 5

Placeholder image

Xbox One S

Sleeker, slimmer, sharper. With 4k Ultra HD video, Xbox One S is the most advanced Xbox One ever.

Starting at  $ 299.99

User rating: 4/ 5

Surface Pro 4

Surface Pro 4

Powerful and lightweight, with the latest Intel Core processors, Surface Pro 4 is the tablet that can replace your laptop.

Starting at  $ 899.99

User rating: 4/ 5

Three panes in a 1x2 configuration with one product on the left and two products stacked on the right

Best practices

Use panes to group together similar items that are meant to be promoted jointly with a similar level of priority. Depending on the type of content, some layouts may be more useful than others.

Do

  • Use images that have clear cut boundaries or masking.

Don’t

  • Don’t use panes for content coming from an automatic feed.
  • Avoid using images with ambiguous edges that might bleed into the other pane regions.

Related

Content placement
Mosaic
Product placement

Options

  • Panes follow several predefined patterns as outlined below...

Specifications

Browser support IE10+, Edge, Safari, Firefox, and Chrome

Development

  • Schema definition: The panes schema defines the acceptable configurations, requirements, and options for each module.

Code and preview

Triptych panes configuration

Placeholder image

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec justo tincidunt, mattis dui non, ultrices massa. Nulla eleifend, eros sed laoreet auctor, turpis purus aliquet ligula, sit amet facilisis enim dolor nec nisl. Aliquam erat volutpat.

Starting at $ 1,000

Community rating: 3/5

Placeholder image

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec justo tincidunt, mattis dui non, ultrices massa. Nulla eleifend, eros sed laoreet auctor, turpis purus aliquet ligula, sit amet facilisis enim dolor nec nisl. Aliquam erat volutpat.

Starting at $ 1,000

Community rating: 3/5

Placeholder image

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec justo tincidunt, mattis dui non, ultrices massa. Nulla eleifend, eros sed laoreet auctor, turpis purus aliquet ligula, sit amet facilisis enim dolor nec nisl. Aliquam erat volutpat.

Starting at $ 1,000

Community rating: 3/5

<div class="m-panes" data-grid="col-12">
    <section class="f-align-middle">
        <div class="m-panes-product-placement-item">
            <picture class="c-image">
                <source srcset="http://placehold.it/570x570/2F2F2F/171717" media="(min-width: 1779px)">
                <source srcset="http://placehold.it/570x570/2F2F2F/171717" media="(min-width:1400px)">
                <source srcset="http://placehold.it/360x360/2F2F2F/171717" media="(min-width:1084px)">
                <source srcset="http://placehold.it/360x360/2F2F2F/171717" media="(min-width:768px)">
                <source srcset="http://placehold.it/360x360/2F2F2F/171717" media="(min-width:540px)">
                <source srcset="http://placehold.it/360x360/2F2F2F/171717" media="(min-width:0)">
                <img srcset="http://placehold.it/360x360/2F2F2F/171717" src="http://placehold.it/360x360/2F2F2F/171717" alt="Placeholder image">
            </picture>
            <div>
                <h3 class="c-heading">Heading</h3>
                <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec justo tincidunt, mattis dui non, ultrices massa. Nulla eleifend, eros sed laoreet auctor, turpis purus aliquet ligula, sit amet facilisis enim dolor nec nisl. Aliquam erat
                    volutpat.</p>
                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                    <span>Starting at&nbsp;</span>
                    <meta itemprop="priceCurrency" content="USD">
                    <span>$</span>
                    <span itemprop="price">1,000</span>
                    <link itemprop="availability" href="http://schema.org/InStock">
                </div>
                <div class="c-rating" data-value="3" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                    <p class="x-screen-reader">Community rating:
                        <span itemprop="ratingValue">3</span>/
                        <span itemprop="bestRating">5</span>
                    </p>
                    <div></div>
                </div>
                <div>
                    <a href="#" class="c-call-to-action c-glyph" aria-label="More verbose call to action text">
                        <span>CALL TO ACTION</span>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <section class="f-stacked">
        <div>
            <div class="m-panes-product-placement-item">
                <picture class="c-image">
                    <source srcset="http://placehold.it/353x353/2F2F2F/171717" media="(min-width: 1779px)">
                    <source srcset="http://placehold.it/353x353/2F2F2F/171717" media="(min-width:1400px)">
                    <source srcset="http://placehold.it/277x277/2F2F2F/171717" media="(min-width:1084px)">
                    <source srcset="http://placehold.it/204x204/2F2F2F/171717" media="(min-width:768px)">
                    <source srcset="http://placehold.it/204x204/2F2F2F/171717" media="(min-width:540px)">
                    <source srcset="http://placehold.it/204x204/2F2F2F/171717" media="(min-width:0)">
                    <img srcset="http://placehold.it/277x277/2F2F2F/171717" src="http://placehold.it/277x277/2F2F2F/171717" alt="Placeholder image">
                </picture>
                <div>
                    <h3 class="c-heading">Heading</h3>
                    <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec justo tincidunt, mattis dui non, ultrices massa. Nulla eleifend, eros sed laoreet auctor, turpis purus aliquet ligula, sit amet facilisis enim dolor nec nisl. Aliquam
                        erat volutpat.</p>
                    <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                        <span>Starting at&nbsp;</span>
                        <meta itemprop="priceCurrency" content="USD">
                        <span>$</span>
                        <span itemprop="price">1,000</span>
                        <link itemprop="availability" href="http://schema.org/InStock">
                    </div>
                    <div class="c-rating" data-value="3" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                        <p class="x-screen-reader">Community rating:
                            <span itemprop="ratingValue">3</span>/
                            <span itemprop="bestRating">5</span>
                        </p>
                        <div></div>
                    </div>
                    <div>
                        <a href="#" class="c-call-to-action c-glyph" aria-label="More verbose call to action text">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="m-panes-product-placement-item">
                <picture class="c-image">
                    <source srcset="http://placehold.it/353x353/2F2F2F/171717" media="(min-width: 1779px)">
                    <source srcset="http://placehold.it/353x353/2F2F2F/171717" media="(min-width:1400px)">
                    <source srcset="http://placehold.it/277x277/2F2F2F/171717" media="(min-width:1084px)">
                    <source srcset="http://placehold.it/204x204/2F2F2F/171717" media="(min-width:768px)">
                    <source srcset="http://placehold.it/204x204/2F2F2F/171717" media="(min-width:540px)">
                    <source srcset="http://placehold.it/204x204/2F2F2F/171717" media="(min-width:0)">
                    <img srcset="http://placehold.it/277x277/2F2F2F/171717" src="http://placehold.it/277x277/2F2F2F/171717" alt="Placeholder image">
                </picture>
                <div>
                    <h3 class="c-heading">Heading</h3>
                    <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec justo tincidunt, mattis dui non, ultrices massa. Nulla eleifend, eros sed laoreet auctor, turpis purus aliquet ligula, sit amet facilisis enim dolor nec nisl. Aliquam
                        erat volutpat.</p>
                    <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                        <span>Starting at&nbsp;</span>
                        <meta itemprop="priceCurrency" content="USD">
                        <span>$</span>
                        <span itemprop="price">1,000</span>
                        <link itemprop="availability" href="http://schema.org/InStock">
                    </div>
                    <div class="c-rating" data-value="3" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                        <p class="x-screen-reader">Community rating:
                            <span itemprop="ratingValue">3</span>/
                            <span itemprop="bestRating">5</span>
                        </p>
                        <div></div>
                    </div>
                    <div>
                        <a href="#" class="c-call-to-action c-glyph" aria-label="More verbose call to action text">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

Three-up panes configuration

Placeholder image

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec justo tincidunt, mattis dui non, ultrices massa. Nulla eleifend, eros sed laoreet auctor, turpis purus aliquet ligula, sit amet facilisis enim dolor nec nisl. Aliquam erat volutpat.

Starting at $ 1,000

Community rating: 3/5

Placeholder image

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec justo tincidunt, mattis dui non, ultrices massa. Nulla eleifend, eros sed laoreet auctor, turpis purus aliquet ligula, sit amet facilisis enim dolor nec nisl. Aliquam erat volutpat.

Starting at $ 1,000

Community rating: 3/5

Placeholder image

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec justo tincidunt, mattis dui non, ultrices massa. Nulla eleifend, eros sed laoreet auctor, turpis purus aliquet ligula, sit amet facilisis enim dolor nec nisl. Aliquam erat volutpat.

Starting at $ 1,000

Community rating: 3/5

<div class="m-panes" data-grid="col-12">
    <section>
        <div class="m-panes-product-placement-item">
            <picture class="c-image">
                <source srcset="http://placehold.it/570x570/2F2F2F/171717" media="(min-width: 1779px)">
                <source srcset="http://placehold.it/570x570/2F2F2F/171717" media="(min-width:1400px)">
                <source srcset="http://placehold.it/360x360/2F2F2F/171717" media="(min-width:1084px)">
                <source srcset="http://placehold.it/360x360/2F2F2F/171717" media="(min-width:768px)">
                <source srcset="http://placehold.it/360x360/2F2F2F/171717" media="(min-width:540px)">
                <source srcset="http://placehold.it/360x360/2F2F2F/171717" media="(min-width:0)">
                <img srcset="http://placehold.it/360x360/2F2F2F/171717" src="http://placehold.it/360x360/2F2F2F/171717" alt="Placeholder image">
            </picture>
            <div>
                <h3 class="c-heading">Heading</h3>
                <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec justo tincidunt, mattis dui non, ultrices massa. Nulla eleifend, eros sed laoreet auctor, turpis purus aliquet ligula, sit amet facilisis enim dolor nec nisl. Aliquam erat
                    volutpat.</p>
                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                    <span>Starting at&nbsp;</span>
                    <meta itemprop="priceCurrency" content="USD">
                    <span>$</span>
                    <span itemprop="price">1,000</span>
                    <link itemprop="availability" href="http://schema.org/InStock">
                </div>
                <div class="c-rating" data-value="3" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                    <p class="x-screen-reader">Community rating:
                        <span itemprop="ratingValue">3</span>/
                        <span itemprop="bestRating">5</span>
                    </p>
                    <div></div>
                </div>
                <div>
                    <a href="#" class="c-call-to-action c-glyph" aria-label="More verbose call to action text">
                        <span>CALL TO ACTION</span>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="m-panes-product-placement-item">
            <picture class="c-image">
                <source srcset="http://placehold.it/570x570/2F2F2F/171717" media="(min-width: 1779px)">
                <source srcset="http://placehold.it/570x570/2F2F2F/171717" media="(min-width:1400px)">
                <source srcset="http://placehold.it/347x347/2F2F2F/171717" media="(min-width:1084px)">
                <source srcset="http://placehold.it/360x360/2F2F2F/171717" media="(min-width:768px)">
                <source srcset="http://placehold.it/360x360/2F2F2F/171717" media="(min-width:540px)">
                <source srcset="http://placehold.it/360x360/2F2F2F/171717" media="(min-width:0)">
                <img srcset="http://placehold.it/347x347/2F2F2F/171717" src="http://placehold.it/347x347/2F2F2F/171717" alt="Placeholder image">
            </picture>
            <div>
                <h3 class="c-heading">Heading</h3>
                <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec justo tincidunt, mattis dui non, ultrices massa. Nulla eleifend, eros sed laoreet auctor, turpis purus aliquet ligula, sit amet facilisis enim dolor nec nisl. Aliquam erat
                    volutpat.</p>
                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                    <span>Starting at&nbsp;</span>
                    <meta itemprop="priceCurrency" content="USD">
                    <span>$</span>
                    <span itemprop="price">1,000</span>
                    <link itemprop="availability" href="http://schema.org/InStock">
                </div>
                <div class="c-rating" data-value="3" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                    <p class="x-screen-reader">Community rating:
                        <span itemprop="ratingValue">3</span>/
                        <span itemprop="bestRating">5</span>
                    </p>
                    <div></div>
                </div>
                <div>
                    <a href="#" class="c-call-to-action c-glyph" aria-label="More verbose call to action text">
                        <span>CALL TO ACTION</span>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="m-panes-product-placement-item">
            <picture class="c-image">
                <source srcset="http://placehold.it/570x570/2F2F2F/171717" media="(min-width: 1779px)">
                <source srcset="http://placehold.it/570x570/2F2F2F/171717" media="(min-width:1400px)">
                <source srcset="http://placehold.it/347x347/2F2F2F/171717" media="(min-width:1084px)">
                <source srcset="http://placehold.it/360x360/2F2F2F/171717" media="(min-width:768px)">
                <source srcset="http://placehold.it/360x360/2F2F2F/171717" media="(min-width:540px)">
                <source srcset="http://placehold.it/360x360/2F2F2F/171717" media="(min-width:0)">
                <img srcset="http://placehold.it/347x347/2F2F2F/171717" src="http://placehold.it/347x347/2F2F2F/171717" alt="Placeholder image">
            </picture>
            <div>
                <h3 class="c-heading">Heading</h3>
                <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec justo tincidunt, mattis dui non, ultrices massa. Nulla eleifend, eros sed laoreet auctor, turpis purus aliquet ligula, sit amet facilisis enim dolor nec nisl. Aliquam erat
                    volutpat.</p>
                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                    <span>Starting at&nbsp;</span>
                    <meta itemprop="priceCurrency" content="USD">
                    <span>$</span>
                    <span itemprop="price">1,000</span>
                    <link itemprop="availability" href="http://schema.org/InStock">
                </div>
                <div class="c-rating" data-value="3" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                    <p class="x-screen-reader">Community rating:
                        <span itemprop="ratingValue">3</span>/
                        <span itemprop="bestRating">5</span>
                    </p>
                    <div></div>
                </div>
                <div>
                    <a href="#" class="c-call-to-action c-glyph" aria-label="More verbose call to action text">
                        <span>CALL TO ACTION</span>
                    </a>
                </div>
            </div>
        </div>
    </section>
</div>

Two-up panes configuration

Placeholder image

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec justo tincidunt, mattis dui non, ultrices massa. Nulla eleifend, eros sed laoreet auctor, turpis purus aliquet ligula, sit amet facilisis enim dolor nec nisl. Aliquam erat volutpat.

Starting at $ 1,000

Community rating: 3/5

Placeholder image

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec justo tincidunt, mattis dui non, ultrices massa. Nulla eleifend, eros sed laoreet auctor, turpis purus aliquet ligula, sit amet facilisis enim dolor nec nisl. Aliquam erat volutpat.

Starting at $ 1,000

Community rating: 3/5

<div class="m-panes" data-grid="col-12">
    <section>
        <div class="m-panes-product-placement-item">
            <picture class="c-image">
                <source srcset="http://placehold.it/570x570/2F2F2F/171717" media="(min-width: 1779px)">
                <source srcset="http://placehold.it/570x570/2F2F2F/171717" media="(min-width:1400px)">
                <source srcset="http://placehold.it/360x360/2F2F2F/171717" media="(min-width:1084px)">
                <source srcset="http://placehold.it/360x360/2F2F2F/171717" media="(min-width:768px)">
                <source srcset="http://placehold.it/360x360/2F2F2F/171717" media="(min-width:540px)">
                <source srcset="http://placehold.it/360x360/2F2F2F/171717" media="(min-width:0)">
                <img srcset="http://placehold.it/360x360/2F2F2F/171717" src="http://placehold.it/360x360/2F2F2F/171717" alt="Placeholder image">
            </picture>
            <div>
                <h3 class="c-heading">Heading</h3>
                <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec justo tincidunt, mattis dui non, ultrices massa. Nulla eleifend, eros sed laoreet auctor, turpis purus aliquet ligula, sit amet facilisis enim dolor nec nisl. Aliquam erat
                    volutpat.</p>
                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                    <span>Starting at&nbsp;</span>
                    <meta itemprop="priceCurrency" content="USD">
                    <span>$</span>
                    <span itemprop="price">1,000</span>
                    <link itemprop="availability" href="http://schema.org/InStock">
                </div>
                <div class="c-rating" data-value="3" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                    <p class="x-screen-reader">Community rating:
                        <span itemprop="ratingValue">3</span>/
                        <span itemprop="bestRating">5</span>
                    </p>
                    <div></div>
                </div>
                <div>
                    <a href="#" class="c-call-to-action c-glyph" aria-label="More verbose call to action text">
                        <span>CALL TO ACTION</span>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="m-panes-product-placement-item">
            <picture class="c-image">
                <source srcset="http://placehold.it/570x570/2F2F2F/171717" media="(min-width: 1779px)">
                <source srcset="http://placehold.it/570x570/2F2F2F/171717" media="(min-width:1400px)">
                <source srcset="http://placehold.it/347x347/2F2F2F/171717" media="(min-width:1084px)">
                <source srcset="http://placehold.it/360x360/2F2F2F/171717" media="(min-width:768px)">
                <source srcset="http://placehold.it/360x360/2F2F2F/171717" media="(min-width:540px)">
                <source srcset="http://placehold.it/360x360/2F2F2F/171717" media="(min-width:0)">
                <img srcset="http://placehold.it/347x347/2F2F2F/171717" src="http://placehold.it/347x347/2F2F2F/171717" alt="Placeholder image">
            </picture>
            <div>
                <h3 class="c-heading">Heading</h3>
                <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec justo tincidunt, mattis dui non, ultrices massa. Nulla eleifend, eros sed laoreet auctor, turpis purus aliquet ligula, sit amet facilisis enim dolor nec nisl. Aliquam erat
                    volutpat.</p>
                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                    <span>Starting at&nbsp;</span>
                    <meta itemprop="priceCurrency" content="USD">
                    <span>$</span>
                    <span itemprop="price">1,000</span>
                    <link itemprop="availability" href="http://schema.org/InStock">
                </div>
                <div class="c-rating" data-value="3" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                    <p class="x-screen-reader">Community rating:
                        <span itemprop="ratingValue">3</span>/
                        <span itemprop="bestRating">5</span>
                    </p>
                    <div></div>
                </div>
                <div>
                    <a href="#" class="c-call-to-action c-glyph" aria-label="More verbose call to action text">
                        <span>CALL TO ACTION</span>
                    </a>
                </div>
            </div>
        </div>
    </section>
</div>