<Alert /> renders a small section with an icon.

Attributes

• description or children: string or ReactNode Text content of the alert.

Informative❗

If icons parameter is not provided, default one will be rendered. See above demo for details.

Quicklinks

• Markdown
• Preview MDX

<AccordionCard /> renders an accordion with content inside. You can nest other components inside it.

Attributes

• title: string Accordion title.
• children: ReactNode Content of the accordion.

<BodyWrapper /> renders a wrapper for the main content of a page. It is intended to be used as a container for content of pages with isGreyLayout flag.

<BulletList /> renders a bullet list. It can be used with children (list of bulletListItem) or with items prop.

• Item 1
• Item 2
• Item 3

Informative❗

• bulletList should have a list of bulletListItem as children or prop items with an array of items to render.
• bulletListItem should have a string or ReactNode child.
• Each item of the items array should have a string or ReactNode type.

<Card /> renders a card which has heading, description and up to 2 CTA buttons. Additionally it can have icon or image.

Some Heading

Some description

ctaPrimaryctaSecondary

Some Heading

Some description

ctaPrimary

Some Heading

Some description

View API and more

Attributes

• heading: string Card heading.
• description or children: string or ReactNode Cart description.
• icon: object Card icon (optional). Object containing:
  • name: string Local portal image name to display.
  • altText: string Alt text of image element.
  • size: number or string Size of icon (optional). Default: 40.
• ctaPrimary: CtaProps object CTA primary button (optional).
• ctaSecondary: CtaProps object CTA secondary button (optional).
• image: object Card image (optional). Object containing:
  • src: string Local portal image name.
  • srcDark: string Local portal image name for the dark mode to display (optional).
  • alt: string Alt text of image element.

CtaProps:

• label: string Button label.
• href: string Button link.
• heading: string Button ariaLabel details (optional).
• downloadFilename: string The name of file to be saved local (optional). This requires href to be a reference to a local file (PDF).

Informative❗

• Adding downloadFilename attribute to CTA button, will change button behavior from redirect to download file.
• From security perspective is not possible to provide reference to external file to be downloaded, instead can be used as a link to redirect.
• To make card with download PDF file.

<CardContainer /> renders as a wrapper for a list of cards – 3 by default.

Some Heading

Some description

ctaPrimary

Some Heading

Some description

ctaPrimary

Some Heading

Some description

ctaPrimary

Attributes

• columns: number Number of columns to display (optional). Default value 3.
• children: Array<ReactNode> or ReactNode A component or list of cards to be wrapped.

Informative❗

Old itemCardCollection and nColumn components are deprecated. Please use cardContainer instead.

The <CodeSamples /> component is intended to show multiple code samples in different languages. The primary use case is for code that is equivalent e.g. “This is how to make an API request in language A and language B”.

It can also be used for a single code sample to take advanTage of the convenient “Copy” button, although it is not as compact as using a <code> Tag or just using the triple backticks Markdown syntax. However, the <CodeSamples> component has the advanTage of truncating long code blocks and showing a ”+ Show More” button as required.

It is the component that is used for code samples throughout this document, but this example below shows it with two samples.

<CodeSamples
  heading="Here are some code samples"
  codeSampleHeading="Code Sample Heading"
  samples={[
    {
      lang: `Node + Request`,
      source:
`const request = require('request');
\n
const options = {
  method: 'POST',
  url: 'http://example.com',
  headers: {
    'content-type': 'application/json'
  },
  body: {
    name: 'bob'
  },
  json: true
};
\n
request(options, function (error, response, body) {
  if (error) throw new Error(error);
  console.log(body);
});`,
    },
    {
      lang: `Shell + Curl`,
      source:
`curl --request POST https://example.com
--data 'name=bob'`,
    }
  ]}
/>

Attributes

• heading: string A title that appears above the code samples (optional).
• codeSampleHeading: string A title that appears inside the component (optional).
• samples: Array<object> An array of:
  • sample object: object sample object containing:
    • lang: string The name of the language of the sample. This will be displayed in the select menu, top right of the component
    • source: string The actual code sample. It is recommended to use Javascript template literal syntax to enable multiple lines in the sample.

N.B❗ Due to a bug in how MDX processes, Javascript template literals in MDX do not support empty lines. To include empty lines in your code sample you must use \n line break syntax.

Annoyingly, MDX can quite handle showing the code for the Code Samples component inside a Code Samples component - it’s all a bit too inception for it to handle! As a result, we are using standard Markdown syntax to display it below. Apologies for the lack of copy button and truncation.

<ContentBlock /> renders a section of content with a title and optional icon. It is intended for use where multiple blocks are used to describe features, amongst other uses.

Attributes

• title: string Heading for the block.
• titleAs: string Title as type (optional):
  • Available options: ‘h1’ | ‘h2’ | ‘h3’ | ‘h4’ | ‘h5’ | ‘h6’.
  • Default: ‘h2’.
• description or children: string or ReactNode The main text content of the block.
• width: number Width of the block in pixels.
• icon: object Image object containing (optional):
  • name: string Icon type (ex: circle-audience).
  • altText: string Icon alt text.

<ContactCallout /> renders a component which has a title, description, cta and optional image.

Attributes

• title: string Heading for the block.
• description: string The main text content of the block.
• cta: object Object containing:
  • label: string CTA button label.
  • href: string CTA button link (external link).
• image: object Object containing (optional):
  • imageUrl: string Image URL.
  • altText: string Image alt text.

Informative❗

• In pages with grey layout (flag isGreyLayout set to true), should be used outside the BodyWrapper component.
• If image parameter is not provided, default one will be rendered. See above demo for details.

<ContentStep /> Render a numbered list with title, description and optional children.

Attributes

• items: array An array of:
  • title: string Title text (optional).
  • description: string Description text (optional).
• children: ReactNode Child elements to render with step (optional).

<code> renders a string as a code inline. Usually used to highlight a variable or a prop in a sentence or component.

This is some text and some code in code Tag

<EndpointListItem /> renders a non-interactive Tag with a link.

Attributes

• method: string The type of endpoint:
  • Available options: ‘get’ | ‘post’ | ‘put’ | ‘delete’ | ‘patch’ | ‘options’ | ‘head’ | ‘trace’ | ‘connect’.
• path: string The endpoint URL path.
• deprecated: boolean Mark endpoint as deprecated (optional).

<Faq /> renders the FAQ items.

• Is there a free trial available?

• How can i use your API in my projects?

  You have to sign-up before.

Attributes

• items: Array<object> FAQ items list. An array of:
  • title: string Item title.
  • content: string or ReactNode Item content. Could be a string or a ReactNode. If you want to use links inside the content, you can use ReactNode syntax.

<Hero /> renders a big styled heading with optional copy, subheading, image and ‘call to action’ button.

Applications

Look upon my applications, ye Mighty and despair!

Attributes

• headline: string Sets the text of the hero banner heading (optional).
• subHeading: string Sets the text of the hero banner subHeading.
• copy: ReactNode Description text of the hero (optional).
• cta: object CTA button definition object (optional) containing:
  • label: string Sets the text of the CTA button.
  • href: string Sets the target URI of the CTA button when clicked.
• image: object Image definition object (optional) containing:
  • name: string Image filname / path in the srx/images directory of the DevPortal Web repo.
  • altText: string Accessiblity text for the image.
  • style: CSSObject CSS object containing style properties (optional).

Tips❗

• ✅ Do this: Use only one hero per page. (Yes, we break that rule on this page, for illustrative purposes only!).
• ❌ Don’t do this: Use a hero anywhere other than the top of a page.

<ModalImage /> renders an image that opens a modal with a larger version in a modal window when clicked.

Attributes

• src: string Image URL. For using local images you need to import them first.
• modalParams: object Object containing (optional):
  • bgOverlay: string: RGBA colour value for overlay background.

<NumberedBulletList><NumberedBulletListItem>...</NumberedBulletListItem></NumberedBulletList> renders a numbered bullet list.

1. Item 1
2. Item 2
3. Item 3

Informative❗

• numberedBulletList should have a list of numberedBulletListItem as children.
• numberedBulletListItem should have a string or ReactNode child.

<RelatedLinks /> renders a list of links related to the page content.

Attributes

• links: Array<object> Object containing:
  • type: string Link type. Available options: ‘api’ | ‘journey’ | ‘application’ | ‘integration’.
  • title: string Link title.
  • url: string Link URL.

<pre> renders string inside a box.

const someVar = ‘hello world’;

To render a table use a standard Markdown table syntax (more about it in the Markdown guide):

Alternatively, you can use the <table /> component. However, it is a component that requires the use of the appropriate child components to render correctly. The table component conforms with the HTML table element and should therefore be created as such.

The example above, for example, will render a table with a header row and three rows of data.

<Tag /> renders a non-interactive colour-marked Tag with a label.

Attributes

• children: ReactNode Sets the text of the Tag component.
• variant: string Sets the background color (optional).
  • Available options: ‘get’ | ‘delete’ | ‘head’ | ‘options’ | ‘patch’ | ‘post’ | ‘put’ | ‘pub’ | ‘sub’.
  • Default: ‘get’.
• size: string Sets the size of the Tag (optional).
  • Available options: ‘base’ | ‘sm’.
  • Default: ‘base’.

Tips❗

• ✅ Do this: Use to highlight things like request methods.
• ❌ Don’t do this: Use <a /> Tags or <button /> Tags to try to make the Tag interactive. It is not designed for that, and doing so will break the consistency of the visual language and create confusion for users.