---
canonical: https://amplience.com/developers/docs/schema-reference/schema-examples/tutorials/localized-banner/
title: Localized banner
description: This Amplience localized banner schema example uses field level localization with properties for headline, strapline, a background image and a call to action.
audience: Developer
image: https://cdn.media.amplience.net/i/ampproduct/localized-banner-example-1?w=1200&h=630
image_width: 1200
image_height: 630
date_published: 2022-07-01
date_modified: 2023-06-12
---

# Localized banner

This schema is the localized banner example used in the examples. It is a simple banner using field level localization with properties for headline, strapline, a background image and a call to action. Users will be able to enter values for each property for each locale they have added to their hub.

## 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 the field level localization features of Dynamic Content. It demonstrates how to add localized text and images.

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://s3-eu-west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/tutorialbannerlocaleviz.html?api={{vse.domain}}&content={{content.sys.id}}&locale={{locales}}
```

The currently selected locale with be evaluated and sent to the visualization in the `locale` parameter. You can then add the locale to the content delivery URL to retrieve localized content.

![Users can choose a locale to visualize the localized content](https://cdn.media.amplience.net/i/ampproduct/localized-banner-example-1?w=1880&fmt=png 'Users can choose a locale to visualize the localized content')

For more information about creating a visualization to support field level localized content see [visualizing localized content](https://amplience.com/developers/docs/dev-tools/guides-tutorials/localization#visualizing-localized-content).

## Localized banner

```
{
   "$schema":"http://bigcontent.io/cms/schema/v1/schema#",
   "$id":"https://schema-examples.com/localized-banner",
   "title":"Localized banner",
   "description":"The banner used in the field level localization example",
   "$comment":"Docs: https://amplience.com/docs/development/schema-examples/tutorials/localized-banner.html",
   "allOf":[
      {
         "$ref":"http://bigcontent.io/cms/schema/v1/core#/definitions/content"
      }
   ],
   "propertyOrder":[
      "headline",
      "strapline",
      "background",
      "calltoactiontext",
      "calltoactionurl"
   ],
   "type":"object",
   "properties":{
      "background":{
         "allOf":[
            {
               "$ref":"http://bigcontent.io/cms/schema/v1/core#/definitions/localized-value"
            },
            {
               "properties":{
                  "values":{
                     "items":{
                        "properties":{
                           "value":{
                              "title":"Background image",
                              "description":"The background image for this banner",
                              "type":"object",
                              "allOf":[
                                 {
                                    "$ref":"http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
                                 }
                              ]
                           }
                        }
                     }
                  }
               }
            }
         ]
      },
      "headline":{
         "allOf":[
            {
               "$ref":"http://bigcontent.io/cms/schema/v1/core#/definitions/localized-value"
            }
         ],
         "properties":{
            "values":{
               "items":{
                  "properties":{
                     "value":{
                        "title":"Headline",
                        "description":"The main title of this banner",
                        "type":"string",
                        "format":"text",
                        "minLength":5,
                        "maxLength":256
                     }
                  }
               }
            }
         }
      },
      "strapline":{
         "allOf":[
            {
               "$ref":"http://bigcontent.io/cms/schema/v1/core#/definitions/localized-value"
            }
         ],
         "properties":{
            "values":{
               "items":{
                  "properties":{
                     "value":{
                        "title":"Strapline",
                        "description":"The subtitle for this banner",
                        "type":"string",
                        "format":"text",
                        "maxLength":256
                     }
                  }
               }
            }
         }
      },
      "calltoactiontext":{
         "allOf":[
            {
               "$ref":"http://bigcontent.io/cms/schema/v1/core#/definitions/localized-value"
            }
         ],
         "properties":{
            "values":{
               "items":{
                  "properties":{
                     "value":{
                        "title":"Call to action text",
                        "description":"The text you want displayed with the call to action",
                        "type":"string",
                        "format":"text",
                        "maxLength":256
                     }
                  }
               }
            }
         }
      },
      "calltoactionurl":{
         "title":"Call to action URL",
         "description":"The URL for the call to action",
         "type":"string",
         "format":"uri",
         "maxLength":256
      }
   }
}
```

## Content form preview

An example of creating a content item using a content type registered from the localized banner example schema is shown in the image below. You can enter values for each property and every locale on your hub.

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

## Related Pages

- [Field level localization](https://amplience.com/developers/docs/dev-tools/guides-tutorials/localization)