Sample page

Headers

You can use standard Markdown syntax for headings.

The first line of content is bound to the heading with a smaller margin. Heading levels 1,2, and 3 appear in the right-hand index navigation by default, which helps readers understand the page's content without reading or scrolling through them.

Level 1 heading

They have the biggest font than other headings, and bound to the left margin of the page.

Level 2 heading

They have a smaller font than the level 1 headings, and are also bound to the left margin of the page.

Level 3 heading

They have the smallest font compared to the other headings, and are slightly indented to th right from the left margin of the page.

Level 4 heading

Any headings after level 3 are rendered and aligned the same as level 3 headings, but do not appear on the right-hand index navigation as level 3 headings.

Child section example

Level 2 headings

Some content here.

Level 3 headings

Some content here.

Level 4 headings

Some content here.

Level 5 headings

Some content here.

Level 6 headings

Some content here.

Random heading 1

Some content here.

Random heading 2

Some content here.

Beta section BETA

The BETA flag is added to differentiate features in public beta from existing features, and minimize confusions.

You can also add the BETA flag for headings or fields. However, the syntax is different from the one used for a page. For headings or fields, use <Beta /> next to the text.

• localeProjection - String - Optional BETA
  This is an example of a beta field.

Plan section PLAN2

The flag PLAN1 is added to differentiate features that are offered with particular paying plans.

You can also add the flag for headings or fields. However, the syntax is different from the one used for a page. For headings or fields, use <PlanTag plan="plan name" /> next to the text.

• localeProjection - String - Optional PLAN2
  This is an example of a plan field.

Plans configuration

The actual configuration of each plan (color, text, href...) can be defined by editing the override file located in packages/gatsby-theme-docs-base/src/@commercetools-docs/gatsby-theme-docs/overrides/plan-tags-config.js in the docs repo.

The format of the configuration is similar to this:

const planTagsConfig = {
  plan1: {
    text: 'PLAN1',
    icon: Icons.B2BTagSvgIcon,
    color: 'green',
    overHint: 'This is hover text for tag1',
    href: '/plan',
  },
  ...
}

The keys of the configuration object (plan1 in the example), are used as unique identifiers for plan and can be used in the planTags frontmatter property or as plan property of the <PlanTag plan={'plan1'}> tag.