Rich product content format

The rich content data format allows you to compose rich descriptions that combine text and media. Rich content allows you to highlight special features of products or services. Rich content can be provided using different encodings, including JSON-LD, RDFa, and microdata. 

It’s recommended that you use the Google structured data testing tool to test your rich content and check that it doesn’t contain errors. All the examples given in this article can be tried out in the testing tool.

This article describes the data structures necessary for different rich content.

How it works

Rich content

Rich content consists of a sequence of showcase blocks. Each block is either a showcase feature set or a media gallery. Blocks are rendered vertically in a single column. Rich content is specified with an element of type Showcase.
 

Type Showcase extends CollectionPage
Property Expected type Description
showcaseBlock ShowcaseFeatureSet or MediaGallery A block of rich content. The block must either be a showcase feature set or a media gallery.

Showcase feature set

A showcase feature set consists of an optional headline and a sequence of showcase features. Feature sets can be rendered in a single or multiple column display.

Type ShowcaseFeatureSet extends ItemList
Property Expected type Description
layoutHint Text An optional hint indicating how many columns to use for rendering. The features are rendered first in rows and then in columns. The following values are supported:
  • LayoutColumns1
  • LayoutColumns2
  • LayoutColumns3
  • LayoutColumns4
The layout hint is enforced on a best effort basis. On small screens, less columns than requested may be used.
 
headline Text An optional headline describing the feature set.
itemListElement ShowcaseFeature A showcase feature of the set. Features are first rendered in rows and then in columns.

Showcase feature

A showcase feature consists of a headline, a description, and an optional image.

Type ShowcaseFeature extends ListItem
Property Expected Type Description
layoutHint Text An optional hint indicating where to render the image relative to the headline and the description. The following values are supported:
  • LayoutMediaLeft
  • LayoutMediaRight
  • LayoutMediaAbove
  • LayoutMediaBelow
The layout hint is enforced on a best effort basis. On small screens, the image may be rendered in a different position than requested.
headline Text The headline of the feature.
description Text The description of the feature.
image URL or ImageObject An optional image illustrating the feature

Media gallery

A media gallery consists of an optional headline and a sequence of images. The images are rendered in one or multiple columns.

Type MediaGallery extends CollectionPage
Property Expected Type Description
layoutHint Text An optional hint indicating how many columns to use for rendering. The images are rendered first in rows and then in columns. The following values are supported:
  • LayoutColumns1
  • LayoutColumns2
  • LayoutColumns3
  • LayoutColumns4
The layout hint is enforced on a best effort basis. On small screens, less columns than requested may be used.
headline Text An optional headline to display at the top of the gallery.
image URL or ImageObject The image to display in the gallery.

Note on namespaces

The types Showcase, ShowcaseFeatureSet, ShowcaseFeature, and MediaGallery and the properties showcaseBlock and layoutHint are schema extensions defined under http://schema.googleapis.com/. All the other types and properties are defined under http://schema.org/.

Examples

Empty rich content format

The most simple rich content is an empty one. This is the bare minimum needed to express an instance of rich content.
Empty rich content
JSON-LD
{
  "@context": {
    "s": "http://schema.org/",
    "g": "http://schema.googleapis.com/"
  },
  "@type": "g:Showcase"
}
RDFa
<div vocab="http://schema.org/" prefix="g: http://schema.googleapis.com/">
  <div typeof="g:Showcase">
  </div>
</div>
Microdata
<div itemscope itemtype="http://schema.googleapis.com/Showcase">
</div>

Single showcase feature with headline and description, and no image

Here is an instance of rich content that consists of a single showcase feature without an image.
A single showcase feature with
  • headline
  • description
JSON-LD
{
  "@context": {
    "s": "http://schema.org/",
    "g": "http://schema.googleapis.com/"
  },
  "@type": "g:Showcase",
  "g:showcaseBlock": [
    {
      "@type": "g:ShowcaseFeatureSet",
      "s:itemListElement": [
        {
          "@type": "g:ShowcaseFeature",
          "s:headline": "Meet the Google Pixel 3",
          "s:description": "Capture the perfect shot every time, get things done with the Google Assistant, enjoy an all-day battery, and more."
        }
      ]
    }
  ]
}
RDFa
<div vocab="http://schema.org/" prefix="g: http://schema.googleapis.com/" typeof="g:Showcase">
  <div property="g:showcaseBlock" typeof="g:ShowcaseFeatureSet">
    <div property="itemListElement" typeof="g:ShowcaseFeature">
      <div property="headline" content="Meet the Google Pixel 3"></div>
      <div property="description" content="Capture the perfect shot every time, get things done with the Google Assistant, enjoy an all-day battery, and more."></div>
    </div>
  </div>
</div>
Microdata
<div itemscope itemtype="http://schema.googleapis.com/Showcase">
  <div itemprop="http://schema.googleapis.com/showcaseBlock" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeatureSet">
    <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature">
      <div itemprop="http://schema.org/headline" content="Meet the Google Pixel 3"></div>
      <div itemprop="http://schema.org/description" content="Capture the perfect shot every time, get things done with the Google Assistant, enjoy an all-day battery, and more."></div>
    </div>
  </div>
</div>

Single showcase feature with headline, description, and image

You can add an image to the showcase feature.
A single showcase feature with
  • Headline
  • Description
  • Image
JSON-LD
{
  "@context": {
    "s": "http://schema.org/",
    "g": "http://schema.googleapis.com/"
  },
  "@type": "g:Showcase",
  "g:showcaseBlock": [
    {
      "@type": "g:ShowcaseFeatureSet",
      "s:itemListElement": [
        {
          "@type": "g:ShowcaseFeature",
          "s:headline": "Google Lens",
          "s:description": "The power to search what you see with Google Lens",
          "s:image": "http://example.com/pixel3-google-lens.png"
        }
      ]
    }
  ]
}
RDFa
<div vocab="http://schema.org/" prefix="g: http://schema.googleapis.com/" typeof="g:Showcase">
  <div property="g:showcaseBlock" typeof="g:ShowcaseFeatureSet">
    <div property="itemListElement" typeof="g:ShowcaseFeature">
      <div property="headline" content="Google Lens"></div>
      <div property="description" content="The power to search what you see with Google Lens"></div>
      <div property="image" content="http://example.com/pixel3-google-lens.png"></div>
    </div>
  </div>
</div>
Microdata
<div itemscope itemtype="http://schema.googleapis.com/Showcase">
  <div itemprop="http://schema.googleapis.com/showcaseBlock" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeatureSet">
    <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature">
       <div itemprop="http://schema.org/headline" content="Google Lens"></div>
      <div itemprop="http://schema.org/description" content="The power to search what you see with Google Lens"></div>
      <div itemprop="http://schema.org/image" content="http://example.com/pixel3-google-lens.png"></div>
    </div>
  </div>
</div>

Single showcase feature with headline, description, and image using layout hints

Layout hints help you control the position of the image in a showcase feature.
A single showcase feature with
  • Headline
  • Description
  • Image
  • Layout: image left of the other content
JSON-LD
{
  "@context": {
    "s": "http://schema.org/",
    "g": "http://schema.googleapis.com/"
  },
  "@type": "g:Showcase",
  "g:showcaseBlock": [
    {
      "@type": "g:ShowcaseFeatureSet",
      "s:itemListElement": [
        {
          "@type": "g:ShowcaseFeature",
          "g:layoutHint": "LayoutMediaLeft",
          "s:headline": "Google Lens",
          "s:description": "Search what you see with Google Lens to look up clothing and home decor, copy and translate text, and identify landmarks, plants, and animals—all in real-time, right from your camera.",
          "s:image": "http://example.com/pixel3-google-lens.png"
        }
      ]
    }
  ]
}
RDFa
<div vocab="http://schema.org/" prefix="g: http://schema.googleapis.com/" typeof="g:Showcase">
  <div property="g:showcaseBlock" typeof="g:ShowcaseFeatureSet">
    <div property="itemListElement" typeof="g:ShowcaseFeature">
      <div property="g:layoutHint" content="LayoutMediaLeft"></div>
      <div property="headline" content="Google Lens"></div>
      <div property="description" content="Search what you see with Google Lens to look up clothing and home decor, copy and translate text, and identify landmarks, plants, and animals—all in real-time, right from your camera."></div>
      <div property="image" content="http://example.com/pixel3-google-lens.png"></div>
    </div>
  </div>
</div>
Microdata
<div itemscope itemtype="http://schema.googleapis.com/Showcase">
  <div itemprop="http://schema.googleapis.com/showcaseBlock" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeatureSet">
    <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature">
      <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaLeft"></div>
      <div itemprop="http://schema.org/headline" content="Google Lens"></div>
      <div itemprop="http://schema.org/description" content="Search what you see with Google Lens to look up clothing and home decor, copy and translate text, and identify landmarks, plants, and animals—all in real-time, right from your camera."></div>
      <div itemprop="http://schema.org/image" content="http://example.com/pixel3-google-lens.png"></div>
    </div>
  </div>
</div>

Showcase feature set using layout hints to change layout

Layout hints can help you to create appealing layouts.
A single showcase feature set
  • Four showcase features
  • Alternate media positions on the features creates a "zig-zag" pattern
JSON-LD
{
  "@context": {
    "s": "http://schema.org/",
    "g": "http://schema.googleapis.com/"
  },
  "@type": "g:Showcase",
  "g:showcaseBlock": [
    {
      "@type": "g:ShowcaseFeatureSet",
      "g:layoutHint": "LayoutColumns1",
      "s:itemListElement": [
        {
          "@type": "g:ShowcaseFeature",
          "g:layoutHint": "LayoutMediaLeft",
          "s:headline": "Google Lens",
          "s:description": "Search what you see with Google Lens to look up clothing and home decor, copy and translate text, and identify landmarks, plants, and animals—all in real-time, right from your camera.",
          "s:image": "http://example.com/pixel3-google-lens.png"
        },
        {
          "@type": "g:ShowcaseFeature",
          "g:layoutHint": "LayoutMediaRight",
          "s:headline": "Group Selfies",
          "s:description": "Pixel 3's dual front facing cameras let you take Group Selfies without a selfie stick or someone having to jump out and take the photo. Or, use it to get the background in that selfie without being a bobble head.",
          "s:image": "http://example.com/pixel3-group-selfies.png"
        },
        {
          "@type": "g:ShowcaseFeature",
          "g:layoutHint": "LayoutMediaLeft",
          "s:headline": "Digital Wellbeing",
          "s:description": "Disconnect from your phone when and where you want so you can focus on time with family and friends. Set timers on apps and turn off visual notifications. Use wind down mode to turn the screen to gray scale and get ready for a good night's sleep.",
          "s:image": "http://example.com/pixel3-digital-wellbeing.png"
        },
        {
          "@type": "g:ShowcaseFeature",
          "g:layoutHint": "LayoutMediaRight",
          "s:headline": "Google Assistant",
          "s:description": "If you are planning to travel somewhere, your Google Assistant can help you look up top attractions, search for a flight, track flight prices, and retrieve your boarding pass faster by just talking to your Google Assistant. Then, once you’ve arrived, your Google Assistant can also help you find restaurants, local events, and things to do near your hotel.",
          "s:image": "http://example.com/pixel3-google-assistant.png"
        }
      ]
    }
  ]
}
RDFa
<div vocab="http://schema.org/" prefix="g: http://schema.googleapis.com/" typeof="g:Showcase">
  <div property="g:showcaseBlock" typeof="g:ShowcaseFeatureSet">
    <div property="g:layoutHint" content="LayoutColumns1"></div>
    <div property="itemListElement" typeof="g:ShowcaseFeature">
      <div property="g:layoutHint" content="LayoutMediaLeft"></div>
      <div property="headline" content="Google Lens"></div>
      <div property="description" content="Search what you see with Google Lens to look up clothing and home decor, copy and translate text, and identify landmarks, plants, and animals—all in real-time, right from your camera."></div>
      <div property="image" content="http://example.com/pixel3-google-lens.png"></div>
    </div>
    <div property="itemListElement" typeof="g:ShowcaseFeature">
      <div property="g:layoutHint" content="LayoutMediaRight"></div>
      <div property="headline" content="Group Selfies"></div>
      <div property="description" content="Pixel 3's dual front facing cameras let you take Group Selfies without a selfie stick or someone having to jump out and take the photo. Or, use it to get the background in that selfie without being a bobble head."></div>
      <div property="image" content="http://example.com/pixel3-group-selfies.png"></div>
    </div>
    <div property="itemListElement" typeof="g:ShowcaseFeature">
      <div property="g:layoutHint" content="LayoutMediaLeft"></div>
      <div property="headline" content="Digital Wellbeing"></div>
      <div property="description" content="Disconnect from your phone when and where you want so you can focus on time with family and friends. Set timers on apps and turn off visual notifications. Use wind down mode to turn the screen to gray scale and get ready for a good night's sleep."></div>
      <div property="image" content="http://example.com/pixel3-digital-wellbeing.png"></div>
    </div>
    <div property="itemListElement" typeof="g:ShowcaseFeature">
      <div property="g:layoutHint" content="LayoutMediaRight"></div>
      <div property="headline" content="Google Assistant"></div>
      <div property="description" content="If you are planning to travel somewhere, your Google Assistant can help you look up top attractions, search for a flight, track flight prices, and retrieve your boarding pass faster by just talking to your Google Assistant. Then, once you’ve arrived, your Google Assistant can also help you find restaurants, local events, and things to do near your hotel."></div>
      <div property="image" content="http://example.com/pixel3-google-assistant.png"></div>
    </div>
  </div>
</div>
Microdata
<div itemscope itemtype="http://schema.googleapis.com/Showcase">
  <div itemprop="http://schema.googleapis.com/showcaseBlock" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeatureSet">
    <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutColumns1"></div>
    <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature">
      <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaLeft"></div>
      <div itemprop="http://schema.org/headline" content="Google Lens"></div>
      <div itemprop="http://schema.org/description" content="Search what you see with Google Lens to look up clothing and home decor, copy and translate text, and identify landmarks, plants, and animals—all in real-time, right from your camera."></div>
      <div itemprop="http://schema.org/image" content="http://example.com/pixel3-google-lens.png"></div>
    </div>
    <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature">
      <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaRight"></div>
      <div itemprop="http://schema.org/headline" content="Group Selfies"></div>
      <div itemprop="http://schema.org/description" content="Pixel 3's dual front facing cameras let you take Group Selfies without a selfie stick or someone having to jump out and take the photo. Or, use it to get the background in that selfie without being a bobble head."></div>
      <div itemprop="http://schema.org/image" content="http://example.com/pixel3-group-selfies.png"></div>
    </div>
    <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature">
      <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaLeft"></div>
      <div itemprop="http://schema.org/headline" content="Digital Wellbeing"></div>
      <div itemprop="http://schema.org/description" content="Disconnect from your phone when and where you want so you can focus on time with family and friends. Set timers on apps and turn off visual notifications. Use wind down mode to turn the screen to gray scale and get ready for a good night's sleep."></div>
      <div itemprop="http://schema.org/image" content="http://example.com/pixel3-digital-wellbeing.png"></div>
    </div>
    <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature">
      <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaRight"></div>
      <div itemprop="http://schema.org/headline" content="Google Assistant"></div>
      <div itemprop="http://schema.org/description" content="If you are planning to travel somewhere, your Google Assistant can help you look up top attractions, search for a flight, track flight prices, and retrieve your boarding pass faster by just talking to your Google Assistant. Then, once you’ve arrived, your Google Assistant can also help you find restaurants, local events, and things to do near your hotel."></div>
      <div itemprop="http://schema.org/image" content="http://example.com/pixel3-google-assistant.png"></div>
    </div>
  </div>
</div>

Media gallery: single banner image

Similarly, image galleries can be used to turn images into banner images.
A media gallery
  • A single banner image
JSON-LD
{
  "@context": {
    "s": "http://schema.org/",
    "g": "http://schema.googleapis.com/"
  },
  "@type": "g:Showcase",
  "g:showcaseBlock": [
    {
      "@type": "g:MediaGallery",
      "g:layoutHint": "LayoutColumns1",
      "s:image": [
        "http://example.com/pixel3-pink-fruitpop-banner.png"
      ]
    }
  ]
}
RDFa
<div vocab="http://schema.org/" prefix="g: http://schema.googleapis.com/" typeof="g:Showcase">
  <div property="g:showcaseBlock" typeof="g:MediaGallery">
    <div property="g:layoutHint" content="LayoutColumns1"></div>
    <div property="image" content="http://example.com/pixel3-pink-fruitpop-banner.png"></div>
  </div>
</div>
Microdata
<div itemscope itemtype="http://schema.googleapis.com/Showcase">
  <div itemprop="http://schema.googleapis.com/showcaseBlock" itemscope itemtype="http://schema.googleapis.com/MediaGallery">
    <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutColumns1"></div>
    <div itemprop="http://schema.org/image" content="http://example.com/pixel3-pink-fruitpop-banner.png"></div>
  </div>
</div>

Three showcase blocks: single feature, showcase feature set, single banner image

By combining multiple showcase blocks, you’re able to design custom layouts.
Three showcase blocks
  • A showcase feature set with a single feature
  • A showcase feature set with six features in a 3 column layout
  • A media gallery with a single banner image
JSON-LD
{
  "@context": {
    "s": "http://schema.org/",
    "g": "http://schema.googleapis.com/"
  },
  "@type": "g:Showcase",
  "g:showcaseBlock": [
    {
      "@type": "g:ShowcaseFeatureSet",
      "g:layoutHint": "LayoutColumns1",
      "s:itemListElement": [
        {
          "@type": "g:ShowcaseFeature",
          "g:layoutHint": "LayoutMediaBelow",
          "s:headline": "Meet the Google Pixel 3",
          "s:description": "Capture the perfect shot every time, get things done with the Google Assistant, enjoy an all-day battery, and more.",
          "s:image": "http://example.com/pixel3-main-image.png"
        }
      ]
    },
    {
      "@type": "g:ShowcaseFeatureSet",
      "g:layoutHint": "LayoutColumns3",
      "s:headline": "Featuring",
      "s:itemListElement": [
        {
          "@type": "g:ShowcaseFeature",
          "g:layoutHint": "LayoutMediaAbove",
          "s:headline": "Google Lens",
          "s:description": "The power to search what you see with Google Lens.",
          "s:image": "http://example.com/pixel3-google-lens.png"
        },
        {
          "@type": "g:ShowcaseFeature",
          "g:layoutHint": "LayoutMediaAbove",
          "s:headline": "Group Selfies",
          "s:description": "The power to not use a selfie stick with Group Selfies.",
          "s:image": "http://example.com/pixel3-group-selfies.png"
        },
        {
          "@type": "g:ShowcaseFeature",
          "g:layoutHint": "LayoutMediaAbove",
          "s:headline": "Digital Wellbeing",
          "s:description": "The power to experience the joy of missing out with Digital Wellbeing.",
          "s:image": "http://example.com/pixel3-digital-wellbeing.png"
        },
        {
          "@type": "g:ShowcaseFeature",
          "g:layoutHint": "LayoutMediaAbove",
          "s:headline": "Google Assistant",
          "s:description": "The power to ask questions and get things done with The Google Assistant.",
          "s:image": "http://example.com/pixel3-google-assistant.png"
        },
        {
          "@type": "g:ShowcaseFeature",
          "g:layoutHint": "LayoutMediaAbove",
          "s:headline": "Shhh gesture",
          "s:description": "The power to focus on what matters with Shhh gesture.",
          "s:image": "http://example.com/pixel3-shhh-gesture.png"
        },
        {
          "@type": "g:ShowcaseFeature",
          "g:layoutHint": "LayoutMediaAbove",
          "s:headline": "Call Screen",
          "s:description": "The power to let Assistant answer calls for you with Call Screen.",
          "s:image": "http://example.com/pixel3-call-screen.png"
        }
      ]
    },
    {
      "@type": "g:MediaGallery",
      "g:layoutHint": "LayoutColumns1",
      "s:image": [
        "http://example.com/pixel3-pink-fruitpop-banner.png"
      ]
    }
  ]
}
RDFa
<div vocab="http://schema.org/" prefix="g: http://schema.googleapis.com/" typeof="g:Showcase">
  <div property="g:showcaseBlock" typeof="g:ShowcaseFeatureSet">
    <div property="g:layoutHint" content="LayoutColumns1"></div>
    <div property="itemListElement" typeof="g:ShowcaseFeature">
      <div property="g:layoutHint" content="LayoutMediaBelow"></div>
      <div property="headline" content="Meet the Google Pixel 3"></div>
      <div property="description" content="Capture the perfect shot every time, get things done with the Google Assistant, enjoy an all-day battery, and more."></div>
      <div property="image" content="http://example.com/pixel3-main-image.png"></div>
    </div>
  </div>
  <div property="g:showcaseBlock" typeof="g:ShowcaseFeatureSet">
    <div property="g:layoutHint" content="LayoutColumns3"></div>
    <div property="headline" content="Featuring"></div>
    <div property="itemListElement" typeof="g:ShowcaseFeature">
      <div property="g:layoutHint" content="LayoutMediaAbove"></div>
      <div property="headline" content="Google Lens"></div>
      <div property="description" content="The power to search what you see with Google Lens."></div>
      <div property="image" content="http://example.com/pixel3-google-lens.png"></div>
    </div>
    <div property="itemListElement" typeof="g:ShowcaseFeature">
      <div property="g:layoutHint" content="LayoutMediaAbove"></div>
      <div property="headline" content="Group Selfies"></div>
      <div property="description" content="The power to not use a selfie stick with Group Selfies."></div>
      <div property="image" content="http://example.com/pixel3-group-selfies.png"></div>
    </div>
    <div property="itemListElement" typeof="g:ShowcaseFeature">
      <div property="g:layoutHint" content="LayoutMediaAbove"></div>
      <div property="headline" content="Digital Wellbeing"></div>
      <div property="description" content="The power to experience the joy of missing out with Digital Wellbeing."></div>
      <div property="image" content="http://example.com/pixel3-digital-wellbeing.png"></div>
    </div>
    <div property="itemListElement" typeof="g:ShowcaseFeature">
      <div property="g:layoutHint" content="LayoutMediaAbove"></div>
      <div property="headline" content="Google Assistant"></div>
      <div property="description" content="The power to ask questions and get things done with The Google Assistant."></div>
      <div property="image" content="http://example.com/pixel3-google-assistant.png"></div>
    </div>
    <div property="itemListElement" typeof="g:ShowcaseFeature">
      <div property="g:layoutHint" content="LayoutMediaAbove"></div>
      <div property="headline" content="Shhh gesture"></div>
      <div property="description" content="The power to focus on what matters with Shhh gesture."></div>
      <div property="image" content="http://example.com/pixel3-shhh-gesture.png"></div>
    </div>
    <div property="itemListElement" typeof="g:ShowcaseFeature">
      <div property="g:layoutHint" content="LayoutMediaAbove"></div>
      <div property="headline" content="Call Screen"></div>
      <div property="description" content="The power to let Assistant answer calls for you with Call Screen."></div>
      <div property="image" content="http://example.com/pixel3-call-screen.png"></div>
    </div>
  </div>
  <div property="g:showcaseBlock" typeof="g:MediaGallery">
    <div property="g:layoutHint" content="LayoutColumns1"></div>
    <div property="image" content="http://example.com/pixel3-pink-fruitpop-banner.png"></div>
  </div>
</div>
Microdata
<div itemscope itemtype="http://schema.googleapis.com/Showcase">
  <div itemprop="http://schema.googleapis.com/showcaseBlock" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeatureSet">
    <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutColumns1"></div>
    <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature">
      <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaBelow"></div>
      <div itemprop="http://schema.org/headline" content="Meet the Google Pixel 3"></div>
      <div itemprop="http://schema.org/description" content="Capture the perfect shot every time, get things done with the Google Assistant, enjoy an all-day battery, and more."></div>
      <div itemprop="http://schema.org/image" content="http://example.com/pixel3-main-image.png"></div>
    </div>
  </div>
  <div itemprop="http://schema.googleapis.com/showcaseBlock" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeatureSet">
    <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutColumns3"></div>
    <div itemprop="http://schema.org/headline" content="Featuring"></div>
    <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature">
      <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaAbove"></div>
      <div itemprop="http://schema.org/headline" content="Google Lens"></div>
      <div itemprop="http://schema.org/description" content="The power to search what you see with Google Lens."></div>
      <div itemprop="http://schema.org/image" content="http://example.com/pixel3-google-lens.png"></div>
    </div>
    <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature">
      <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaAbove"></div>
      <div itemprop="http://schema.org/headline" content="Group Selfies"></div>
      <div itemprop="http://schema.org/description" content="The power to not use a selfie stick with Group Selfies."></div>
      <div itemprop="http://schema.org/image" content="http://example.com/pixel3-group-selfies.png"></div>
    </div>
    <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature">
      <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaAbove"></div>
      <div itemprop="http://schema.org/headline" content="Digital Wellbeing"></div>
      <div itemprop="http://schema.org/description" content="The power to experience the joy of missing out with Digital Wellbeing."></div>
      <div itemprop="http://schema.org/image" content="http://example.com/pixel3-digital-wellbeing.png"></div>
    </div>
    <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature">
      <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaAbove"></div>
      <div itemprop="http://schema.org/headline" content="Google Assistant"></div>
      <div itemprop="http://schema.org/description" content="The power to ask questions and get things done with The Google Assistant."></div>
      <div itemprop="http://schema.org/image" content="http://example.com/pixel3-google-assistant.png"></div>
    </div>
    <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature">
      <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaAbove"></div>
      <div itemprop="http://schema.org/headline" content="Shhh gesture"></div>
      <div itemprop="http://schema.org/description" content="The power to focus on what matters with Shhh gesture."></div>
      <div itemprop="http://schema.org/image" content="http://example.com/pixel3-shhh-gesture.png"></div>
    </div>
    <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature">
      <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaAbove"></div>
      <div itemprop="http://schema.org/headline" content="Call Screen"></div>
      <div itemprop="http://schema.org/description" content="The power to let Assistant answer calls for you with Call Screen."></div>
      <div itemprop="http://schema.org/image" content="http://example.com/pixel3-call-screen.png"></div>
    </div>
  </div>
  <div itemprop="http://schema.googleapis.com/showcaseBlock" itemscope itemtype="http://schema.googleapis.com/MediaGallery">
    <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutColumns1"></div>
    <div itemprop="http://schema.org/image" content="http://example.com/pixel3-pink-fruitpop-banner.png"></div>
  </div>
</div>
 
Was this helpful?
How can we improve it?