---
canonical: https://amplience.com/developers/docs/schema-reference/schema-examples/tutorials/banner/
title: Tutorial banner
description: Schema for the tutorial banner example used in the Amplience get started tutorial. The banner has a headline, strapline, a background image and call to action.
audience: Developer
image: https://cdn.media.amplience.net/i/ampproduct/step2-create-content-4?w=1200&h=630
image_width: 1200
image_height: 630
date_published: 2022-07-01
date_modified: 2023-06-12
---

# Tutorial banner

This schema is the tutorial banner example used in the [get started](https://amplience.com/developers/docs/start) tutorial. It is a simple banner with headline, strapline, a background image and a call to action.

## Pre-requisites

None. This is a self contained schema. Just register it as a content type and use it to create content.

## How to use

This example is useful for getting familiar with Dynamic Content schemas, adding your own validation and additional properties, for example.

When you [register](https://amplience.com/developers/docs/dev-tools/guides-tutorials/content-types) the schema as a content type, you can add a visualization with the following URL:

```
https://amp-product.s3.eu-west-1.amazonaws.com/doc-examples/visualization/realtimetutorialbannerviz.html?api={{vse.domain}}&content={{content.sys.id}}&realtime=true
```

For more information see the [creating a visualization](https://amplience.com/developers/docs/dev-tools/guides-tutorials/visualizations) page.

## Tutorial banner

```json
{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "$id": "https://schema-examples.com/tutorial-banner",

  "title": "Example Banner",
  "description": "Banner used for code examples in developer portal",

  "allOf": [
    {
      "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
    }
  ],

  "type": "object",
  "properties": {
    "headline": {
      "title": "Headline",
      "description": "The main title of this banner",
      "type": "string"
    },
    "strapline": {
      "title": "Strapline",
      "description": "The subtitle of this banner",
      "type": "string"
    },
    "background": {
      "type": "object",
      "title": "Background image",
      "properties": {
        "alt": {
          "title": "Alternative text",
          "description": "Alternative text for the background image",
          "type": "string"
        },
        "image": {
          "title": "Image",
          "description": "The image for the background of this banner",
          "allOf": [
            {
              "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
            }
          ]
        }
      }
    },
    "link": {
      "type": "object",
      "title": "Link",
      "properties": {
        "url": {
          "title": "URL",
          "description": "The url that will be opened when link is clicked",
          "type": "string"
        },
        "title": {
          "title": "Title",
          "description": "Text displayed for the link",
          "type": "string"
        }
      }
    }
  },
  "propertyOrder": []
}
```

## Content form preview

An example of creating a content item using a content type registered from the tutorial banner example schema is shown in the image below.

![Creating content from the banner content type](https://cdn.media.amplience.net/i/ampproduct/step2-create-content-4?w=1880&fmt=png 'Creating content from the banner content type')

## Related Pages

- [Tutorial carousel](carousel.md)