Component showcase

GC's flux accordion component.

Accordion Item

Used within an accordion group.

GC's flux accordion component.

Preview

Compact Accordion with Chevrons positioned left

Banner

Card Group

This block of tests is for inline entries You should see a search icon.. This should open a dialogue. And then a regular inline button that is a link. This should show a tag and finally a nice Tooltip

Numbered Non-Compact Accordion with Chevrons positioned right

Code Block

const constants = require('gocardless-nodejs/constants');
const gocardless = require('gocardless-nodejs');
const client = gocardless('your_access_token_here', constants.Environments.Sandbox);

const billingRequest = await client.billingRequests.create({
  payment_request: {
    description: "First Payment",
    amount: "500",
    currency: "GBP",
    app_fee: "500",
  },
});

Code Block Group

const constants = require('gocardless-nodejs/constants');
const gocardless = require('gocardless-nodejs');
const client = gocardless('your_access_token_here', constants.Environments.Sandbox);

const billingRequest = await client.billingRequests.create({
  payment_request: {
    description: "First Payment",
    amount: "500",
    currency: "GBP",
    app_fee: "500",
  },
});

Banners

Used to display a notification on a page (e.g. announcements, warnings, important information).

GC's Notification Banner component

Preview

Card Groups

A collection of cards. Allows you to specify the size of each card using a 12 column unit

Card

An element that is used within a card group to display information with a rectangular view. It comprises 3 parts: Card Media, Card Content (Limited rich text field) and Card Call to Action buttons. See the preview below.

Preview

Code Block

A block of formatted and syntax-highlighted code.

Features include A copy button, Bottom links to related URLs (e.g. Github URL, Download URL), and Highlighting important lines of code.

Preview

const constants = require('gocardless-nodejs/constants');
const gocardless = require('gocardless-nodejs');
const client = gocardless('your_access_token_here', constants.Environments.Sandbox);

const billingRequest = await client.billingRequests.create({
  payment_request: {
    description: "First Payment",
    amount: "500",
    currency: "GBP",
    app_fee: "500",
  },
});

Code Block Group

Used to group related code blocks. Typically used to group code by languages.

Preview

const constants = require('gocardless-nodejs/constants');
const gocardless = require('gocardless-nodejs');
const client = gocardless('your_access_token_here', constants.Environments.Sandbox);

const billingRequest = await client.billingRequests.create({
  payment_request: {
    description: "First Payment",
    amount: "500",
    currency: "GBP",
    app_fee: "500",
  },
});

Dialog

A modal window that could either be attached to a page and opened by default or added to a Navigation item (a link). Could be positioned left, right, centre or full width. All elements that can be added to a page can be added to a modal

GC's Flux Dialog component

Preview

This should open a dialogue

List

A collection of list items that are rendered vertically with either icons or images as bullets.

List Item

Use within the "List" content type. Allows a user to specify either a bullet icon or image.

Preview

Image List

This block of tests is for inline entries You should see a search icon. This should open a dialogue. And then a regular inline button that is a link Test inline button . This should show a tag This is a tag and finally a nice Tooltip

2. This block of tests is for inline entries You should see a search icon. This should open a dialogue. And then a regular inline button that is a link Test inline button . This should show a tag This is a tag and finally a nice Tooltip

Padded Icon List

Another list item

Lorem ipsum dolor. We love GC

Another list item 2

Lorem ipsum dolor. We love GC again

Simple Icon List

List item 1

This block of tests is for inline entries You should see a search icon. . This should open a dialogue. And then a regular inline button that is a link Test inline button . This should show a tag This is a tag and finally a nice Tooltip

Markdown

Used to embed Markdown content within a page.

Preview

The block below is a markdown entry

** Start Here**

Heading 1

Heading 2

Heading 3

~~Direct Debit~~ is an automated payment method which allows you to pull payments from your customers’ bank accounts.

The GoCardless API is a wrapper around diverse national Direct Debit systems in the UK, Eurozone, Sweden, Denmark, Australia, New Zealand, Canada and the United States of America, allowing you to collect payments everywhere with one integration.

npm install gc-cli
gc-cli trigger mandate_activated

£ 2000

Header	Header	Header	Header	Header	Header
Cell	Cell	Cell	~~Cell~~	Cell	Cell
Cell	Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell£	Cell	Cell
Cell	Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell	Cell

If you want to allow users to collect and manage their own payments through your application, you'll want to build a partner integration using our OAuth 2 flow. This is a mandatory requirement.

There are three key parts to an integration with the API - you can do one, two or all three of them:

Setting up mandates with your customers’ bank accounts
Collecting payments against your mandates
Staying up-to-date with webhooks

Now, let’s check that the client is working by making our first request to the API: listing our customers (there won’t be any at the moment). Just run the following

Setting up mandates with your customers’ bank accounts
Collecting payments against your mandates
Staying up-to-date
with
webhooks

** End Here**

Richtext

Surely, the most important content type in creating and modifying a page.

All text styles are rendered using GC's design system: Flux

This content type is used within a page to enter content and embed block and inline entries using contentful's WYSIWYG editor.

All pages in the docs have been built using this content type.

Preview

The page here is created using the Rich text blade. Click here to view this in contentful

Swagger Embed

Used to embed swagger docs

Preview

Layout and Navigation

Layout and navigation types are used to build page shells, within which content will live.

Page

Represents a web page. This is the start of a page and allows us to specify everything needed to generate a blank page (e.g. page slug, title, SEO details and page content).

SEO

SEO Metadata for web pages. We also use this data to generate items for the "Page" search index in algolia.

Preview

Click here to view this page in contentful

Page Type: Docs

This is the page type for documentation content. To allow us to create different types of pages using the same contentful space and app (e.g. tutorials, UX Guides), the content field allows us to specify the type of page we want to create.

This type contains a field called Blades. This field is an array of Block entries that can be cascaded to build a page (In the case of the docs, we mostly use the Richtext blade to create content).

Layout

A layout contains 3 navigation types (header, footer and side nav), all of which are optional. This means you can build a page with a header and footer and no side nav or any mix of this you like.

Preview

Click here to view this layout in contentful

Used to group navigation items together to form navigation. Supported variants include:

Header
Footer
SideBar
Page Navigation (Tab or Pill style)

Page Navigations allow us to add a horizontal collection of navigation items within a page.

Preview

Navigation Item

One of the most important content types. See some common use cases below:

Used with the "Navigation" content type to create link items
Used as an inline entry to create page links and buttons
Used to create CTAs within other entries (e.g. Cards, Banners)
Used as a trigger for opening a dialog (modal)
Used to nest other navigation items

A Navigation item is a trigger for a link or a dialog. This is a wrapper around GC's flux button and link component and allows us to specify all the props these components allow (e.g. button icon accessories, theme, layout and multiple variants).

GC's Button Flux Component

GC's Link Flux Component

Preview

Used with the "Navigation" content type to create link items

Used as an inline entry to create page links and buttons

A regular inline button and link Test inline button .

Used as a trigger for opening a dialog (modal)

This should open a dialogue .

Used to create CTAs within other entries (e.g. Cards, Banners)

e.g.

Used to nest other navigation items

As seen on the default side nav. See the link for example used for the "Direct Debit" menu (View in contentful)

Navigation Links

Used within a navigation item to create re-useable links.

This is essential so that if a link URL changes, we get to edit it in one place and it cascades to all navigation items referencing that URL.

The link URL field is unique and prevents us from duplicating links and all other fields are not rendered, but rather used as link metadata.

Inline Elements

Inline elements are entries that are used within a paragraph or header in rich text content.

Icon

Used to create icon props based on GC's Flux Icon library. Some use cases include:

Used as an icon accessory for list items
Used as an icon accessory for navigation items
Used as an embedded inline element in rich-text content

GC's Flux Icon library

Preview

Used as an embedded inline element in rich-text content. e.g. (View in contentful)
Used as an icon accessory for navigation items. e.g. Test inline button (View in contentful)
Used as an icon accessory for list items (View in contentful). e.g.
Another list item
Lorem ipsum dolor. We love GC
Another list item 2
Lorem ipsum dolor. We love GC again

Used to create tooltips based on GC's Flux tooltip component. Usually used as an embedded inline element in rich-text content

GC's Flux tooltip component

Preview

nice Tooltip

Badge

Used to create tags based on GC's Flux tag component. Some use cases include:

Used as an accessory for navigation items
Used as an embedded inline element in rich-text content

GC's Flux tooltip component

Preview

This should show a tag This is a tag