CTA

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

• 1. Type
  • 1.1 Local
  • 1.2 Jump
  • 1.3 External
  • 1.4 Video
  • 1.5 Download
• 2. Style
  • 2.1 Text
  • 2.2 Button
  • 2.3 Card
  • 2.4 Feature
  • 2.5 Card link

Dependencies (9)

• Link with icon
• Feature card
• Card link
• Button group
• Card
• Lightbox media viewer
• Carbon icons
• Video service
• Smooth scrolling utility

Used by (12)

• Data model
• Card group
• Card section carousel
• Content block
• Content group
• Content item
• Content section
• Feature section
• Universal banner
• Card in card
• Link list
• Quote

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

• r1: Box folder

---

1. Type

The CTA is made up of various types that add a consistent functionality/behavior and iconography across the different styles ² 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.

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 ¹ 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

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

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

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

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

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