Getting started


When you develop an extension for Dynamic Content, it's important to ensure that your extension matches the general style of the Dynamic Content app and the built in UI controls in the content editing form.

This document provides some guidelines to help ensure a consistent experience for your users.

This guide focuses on the styling used by your extension. To find out more about developing extensions, follow the links below.

Useful links


Topics covered in this guide.


Source: components/

Buttons can be used with <a> and <button> elements.

Types of buttons:

  • .ampx-button Default: can be used for links, toolbars or secondary buttons
  • .ampx-button .ampx-button__primary Primary: used for call to actions
  • .ampx-button .ampx-button__disabled Disabled: used to provide a visual cue to indicate an action is disabled


Source: components/

If your extension includes input controls, then you can follow our styling by specifying a solid border and by using color to indicate:

  • an invalid value has been entered
  • the item is disabled and cannot be used to input data


  • .ampx-input__container Default: displays focus.
  • .ampx-input__container .ampx-input__container--error Error: indicates an error by setting the border color and showing error text
  • .ampx-input__container .ampx-input__container--disabled Disabled: makes the item slightly less visible to indicate that it is disabled and cannot be used to input data

An input item requires a title but the description is optional. It can be used with [type=text] and [type=number].


Source: varibles/

Dynamic Content follows a blue color scheme #039be5 with bright green & pink for validation colors. Text, backgrounds and figures within the app use a range of black and greys. Colors used within the app are shown below. We have included some CSS variables for you to use in your own projects.

  • --color-primary: primarily be used for call to actions, and grabbing attention for an action.
  • --color-primary-light: normally used to accent the primary color in cases such as hover actions.
  • --color-valid-green: used to denote that an action has been successful or an item is valid.
  • --color-error-red: used mostly to indicate that items are invalid or that an action has failed

Usage is as follows:

:root {
  --color-primary: #039be5;

.example-class {
  background-color: var(--color-primary);


Source: varibles/

Dynamic Content uses Roboto and you can include it in your project as follows:

<link rel="stylesheet" href=",400,400i,500,700&amp;display=swap">

The text color for standard text should be --color-default-black / #333333.

Usage in the content editing form:

  • .ampx-heading: the main header in an extension.
  • .ampx-subheading-large: the main heading in a sub list or section
  • .ampx-subheading: a heading in a sub list in a section
  • .ampx-body: used for copy.
  • .ampx-link: used for external links.
  • .ampx-label: used for adding contextual information to an entity.
  • .ampx-error: used for adding contextual information to an entity in an error state.

Usage examples:

Extensions Style Guide

No matches.