Content Models

Primary Content Types

These content types are the primary ones that get rendered into pages for the Design Library.

Guideline

Guidance around a specific subject

Attributes

Title

• Required
• Total: 1
• Type: short text

Body

• Required
• Total: 1
• Type: long text

Resources

• Optional
• Total: 1
• Type: icon and one or more link to webpages or link to download a file

Variables

• Optional
• Total: Multiple
• Type: Object

Pattern

A reusable, customizable interface piece to be used in creating Watson experiences

Attributes

Title

• Required
• Total: 1
• Type: short text

Short Description

• Required
• Total: 1
• Type: long text

Long Description

• Required
• Total: 1
• Type: long text (README.md file)

Application Methods

• Required
• Total: Minimum 1
• Type: object
  • Code
    • Required
    • Total: 1
    • Type: short text
  • Description
    • Required
    • Total: 1
    • type: short text

Settings

• Optional
• Total: Multiple
• Type: object
  • Setting
    • Required
    • Total: 1
    • Type: short text
  • Description
    • Required
    • Total: 1
    • type: short text

Source Code

• Required
• Total: 1
• Type: code ({{pattern}}.html)

Variables

• Optional
• Total: Multiple
• Type: Object

Secondary Content Types

These content types do not get rendered on their own, but are representative of structured content that can be added to the above content types via their variables attribute and used with their respective templating pattern.

Value

Ideals central to understanding Watson

Attributes

Title

• Required
• Total: 1
• Type: short text

Description

• Required
• Total: 1
• Type: long text

Example

A visual that further explains a point.

Attributes

Title

• Required
• Total: 1
• Type: short text

Visual Display

• Required
• Total: 1
• Type: absolute path to image/video

Visual Alternative

• Optional
• Total: 1
• Type: short text

Sentiment

• Optional
• Total: 1
• Type: One of [positive, negative]

Description

• Optional
• Total: 1
• Type: short text

Usage

• {{ _example.small(example) }} - An individual small example. Expects a single example.
• {{ _example.large(example) }} - An individual large example. Expects a single example.
• {{ _example.compare(examples) }} - Multiple small examples being compared. Expects multiple samples.

Aside

A content related to the surrounding content but can be considered separate from that content

Attributes

Description

• Required
• Total: 1
• Type: short text

Usage

• {{ _aside.aside(content) }} - A single aside. Expects a single aside with a description attribute (not just the description). Markdown allowed.

Block Quote

A section that is quoted from another source

Attributes

Quote

• Required
• Total: 1
• Type: short text

Citation

• Required
• Total: 1
• Type: short text

Link to Source

• Optional
• Total: 1
• Type: link to source of quote

Usage

• {{ _quote.quote(blockquote) }} - A single block quote.

Color Swatch

A specific color from the IBM Color Swatches and its meaning to Watson

Attributes

Palette

• Required
• Total: 1
• Type: One of [blue, green, teal, purple, magenta, red, orange, yellow, gray, cool-gray, warm-gray, neutral-white, cool-white, warm-white, black, white]

Tone

• Required
• Total: 1
• Type: One of [core, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]

Adjectives

• Optional
• Total: Minimum of 1
• Type: short text

Usage

• {{ _color.swatch(color) }} - A single color swatch, including its Sass, Hex and RGB values. Expects a single color
• {{ _color.swatchWithAttribute(color) }} - A single color swatch, including its adjectives. Expects a single color
• {{ _color.adjectiveSwatches(colors) }} - Multiple color swatches using the swatchWithAttribute template. Expects colors as an array in the colors attribute.
• {{ _color.groupSwatches(colors) }} - Multiple color swatches using the swatch template. Expects instructions attribute explaining the group and an array of colors in the colors attribute.

Detail

Deep dive into a specific

Attributes

Description

• Optional
• Total: 1
• Type: long text

Visual Display

• Should include numbered callouts that can further explain what is being seen
• Required
• Total: 1
• Type: absolute path to image/video

Callouts

• Callouts from within the visual display, in the order they are numbered
• Required
• Total: Minimum 1
• Type: Object
  • Title
    • Required
    • Total: 1
    • Type: short text
  • Description
    • Required
    • Total: 1
    • Type: short text

Usage

• {{ _detail.view(detail) }} - Displays a single detail view.