Skip to main content

Tutorial banner

This schema is the tutorial banner example used in the get started tutorial. It is a simple banner with headline, strapline, a background image and a call to action.

Pre-requisites
Link copied!

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

How to use
Link copied!

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

When you register 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 page.

Tutorial banner
Link copied!

{
  "$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
Link copied!

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