Skip to content

CTA

Jump to bottom
kodiakhq[bot] edited this page Apr 19, 2022 · 135 revisions

Core Functional UI component

This CTA (call to action) component allows one to quickly switch between a couple different CTAs easily based on a given scenario. This makes it easy to offer them all without building that logic every-time, or just as easily limit the number of options for a specific pattern.

Table of contents

Dependencies (9)

Used by (12)

Back links (24)

CTA block (1)

  • user towards a next step of action. The CTA has a couple different

Callout media (2)

  • CTA. This component should sit inside of the...
  • ...| CTA | null | Do not use its CTA.

Card in card (1)

  • CTA functionality to it. The Image expands to...

Card link (1)

  • ...is typically intended to be used by the CTA

Card section carousel (1)

  • and CTA Cards into a single section decorator that...

Card section offset (1)

  • additional resources via a CTA, and

Content block media (1)

  • card CTA

Content block simple (1)

  • and ends with a CTA

Content block (2)

  • optional CTA that allows a user to navigate to related...
  • See CTA for more

Content group (2)

  • optional CTA that allows a user to navigate to related...
  • See CTA for more

Content item horizontal (1)

  • CTAs in a horizontally-distributed column

Content item (3)

  • CTA. Because of its type size and spacing it is...
  • optional CTA that allows a user to navigate to related...
  • See CTA for more

Content section (2)

  • optional section level CTA that allows a user to navigate to
  • See CTA for more

Data model (1)

  • cta | CTA

Feature section (1)

  • and a CTA using a static Feature card allowing for...

Universal banner (2)

  • optional CTA that helps navigate users to more information...
  • See CTA for more

Writing functional specs (1)

  • 1.0.2 | present | Enable component's CTA, and adjusts visuals

Resources


1. Type

The CTA is made up of various types that add a consistent functionality/behavior and iconography across the different styles 2 of CTAs.


1.1 Local

default

The local link is mainly used to navigate a user to another destination within IBM.com.

Logic
condition description
1.1.1 type === 'local' OR undefined Icon should be set to ArrowRight

1.2 Jump

The jump link visually uses the down arrow to indicate to the user this link jumps down the page.

Logic
condition description
1.2.1 type === 'jump' Icon should be set to ArrowDown
Events
name description
1.2.2 onClick When this particular CTA link type is clicked it’ll disable the anchor link and smoothly scroll the user down the page to the provided name or id.

1.3 External

The external link provides a visual indicator that this link leaves the page, and opens the link within a new tab so the IBM page they were looking at will stay there.

Logic
condition description
1.3.1 type === 'external' Icon should be set to Launch
Events
name description
1.3.2 onClick When this particular CTA link type is clicked it should target=“_blank” for a new tab.

1.4 Video

The video type CTA uses the Video service to populate the CTA and Lightbox media viewer's content if not provided, and launches within the Lightbox media viewer to play the Video.

Logic
condition description
1.4.1 type === 'video' AND video.ID Icon should be set to PlayOutline
Events
name description
1.4.2 onClick When this CTA link type is clicked, it should launch the Lightbox media viewer and begin playing the video.

image The Lightbox media viewer's data model and component should be used in addition to the style chosen from below. See Lightbox media viewer


1.5 Download

The download CTA type should be used when you have a file that needs to be downloaded like a PDF, or Excel spreadsheet. Functionality is mostly handled by the browser.

Logic
condition description
1.4.1 type === 'download' Icon should be set to Download


Back to top


2. Style

The CTA component wraps a number of our components to allow for different looks and hierarchy depending on the scenario and context. Each style gets the above types 1 that allows them to share functionality.


2.1 Text

(default)

The default text style is just a Link with icon. This type of CTA can be used at low levels within the page hierarchy.

Logic
condition description
2.1.1 style === 'text' OR undefined Set the data model and component to use: Link with icon

image See Link with icon


Video data logic
condition description
2.1.2 video.id && copy pre-filled by Video service's name if not defined.

Video duration is appended after string of text in parenthesis. (e.g. copy string (duration))


Visual example



2.2 Button

The button CTA style can communicate the primary and secondary action for a given page to the user.

Logic
condition description
2.2.1 style === 'button' Set the data model and component to use: Button group

image See Button group


Video data logic
condition description
2.2.2 video.id && copy pre-filled by Video service's name if not defined.

Video duration is appended after string of text in parenthesis. (e.g. copy string (duration))


Visual example



2.3 Card

The card CTA style is our generic Card that take various forms and content models for flexible Card CTAs.

Logic
condition description
2.3.1 style === 'card' Set the data model and component to use: Card

image See Card


Video data logic
condition description
2.3.2 video.id && heading pre-filled by Video service's name if not defined or explicitly set to false.
2.3.3 video.id && copy pre-filled by Video service's description if not defined or explicitly set to false.
2.3.4 video.id && cta copy pre-filled by Video service's duration if not defined or explicitly set to false.
2.4.5 video.id && image pre-filled by Video service's poster image if not defined or explicitly set to false.

Visual example



2.4 Feature

The feature CTA style is a larger version of Card with an image to really emphasize a specific call to action. It should only be used once within a Content block.

Logic
condition description
2.4.1 style === 'feature' Set the data model and component to use: Feature card

image See Feature card


Video data logic
condition description
2.4.2 video.id && heading pre-filled by Video service's name if not defined.
2.4.3 video.id && copy pre-filled by Video service's description if not defined or explicitly set to false.
2.4.4 video.id && cta copy pre-filled by Video service's duration if not explicitly set to false.
2.4.5 video.id && image pre-filled by Video service's poster image if not defined.

Visual example



2.5 Card link

The card link CTA style is a small Card link that can be used at higher levels within the page hierarchy.

Logic
condition description
2.5.1 style === 'cardlink Set the data model and component to use: Card link

image See Card link


Video data logic
condition description
2.5.2 video.id && heading pre-filled by Video service's name if not defined.
2.5.3 video.id && copy pre-filled by Video service's description if not defined or explicitly set to false.
2.5.4 video.id && cta copy pre-filled by Video service's duration if not explicitly set to false.

Visual example


Back to top


Website guidelines

Publishing guidelines (6)

Functional specs

Layout component (37)
Service (3)
UI component (34)
Utility (5)

Additional components

Carbon component (19)
Design only (9)
Feature flag (3)
Clone this wiki locally