A content-link component.


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
Minified + gzip package size for @nib-components/content-link in KB


Setting up your component

Delete this section after you've setup the component

Before the component is accepted into the DLS:

  1. Github: Create the repository under your own username/organisation

When the component is accepted into the DLS:

  1. Github: Transfer ownership of the repository to frontend
  2. BuildKite: Create a New Pipeline
  3. BuildKite: Enter the following settings:
  • Name: content-link
  • Git Repository: git@git.nib.com.au:frontend/content-link.git
  1. BuildKite: Remove the default Step and add a Read steps from repository step
  • And add cd deploy && bundle install && bundle update sceptre sceptre-dotnet sceptre-app && bundle exec sceptre-app pipeline upload to the Commands to run textbox
  • And add os=linux to the Agent Targeting Rules textbox
  1. BuildKite: Create Pipeline and follow the instructions to add the webhook to GithubEnterprise
  2. BuildKite: Go to Settings
  • Check Build pull requests from third-party forked repositories and click Save Github Enterprise Settings
  • Copy the Markdown badge from Settings and past it below.
  1. Github: Edit the readme to remove these steps and kick off a New build
  2. Github: Protect the master branch
  • Go to Settings > Branches
  • Choose the master branch
  • Check Protect this branch
  • Check Require status checks to pass before merging
  • Check Include administrators and Require branches to be up to date before merging
  • Check all Status checks found in the last week for this repository


Build status dependencies Status

A content-link component.


npm install --save @nib-components/content-link


import ContentLink from '@nib-components/content-link';

const iconTypes = {
  imageIcon: ImageIcon

  text="Click here"



The Link component.

Optional. A string or function. Defaults to an a element.


The href for the Link.

Required. A string.


The text displayed href for the Link.

Required. A string.


The tracking tag id of the Link for site navigation analytics.

Required. A string.


The target of the Link, either _self or _blank.

Optional. A string. Defaults to _self.


The icon to displayed with the Link.

Optional. An object.


The map of icon types that can be displayed with the Link e.g. imageIcon, dlsIcon.

Optional. An object.

Change log


Initial release.


You can edit the files in ./src, whilst running npm run watch. This will compile for the ./dist folder.


The link schema, mapping, decorator and tracking tag decorator can be imported from @nib-components/content-link -

import Link, {linkSchema, linkMapping, linkDecorator, trackingTagDecorator} from @nib-components/content-link;

A Link entry should be added to the relevant Contentful space with the following entries -

Name Field ID Type Required/Optional
Title label Short text Required
Text text Short text Optional
Url href Short text Required
Target target Short text (one of 'Blank' or 'Self') Required
Icon icon Reference (Site specific icon types) Optional
Tracking Tag trackingTag JSON object (Analytics tag appearance) Required

The icon type is site specific e.g. dlsIcon for nib icons or standard imageIcon for links with a media image icon. The standard ImageIcon component and iconBuilder can be imported from @nib-components/content-icon.

The tracking tag is transformed in the trackingTagDecorator. It is used as the id on the Link component.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.