eds-card-cta

Explore the Interactive Component

Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.

See It in Use with Code

Check out the practical implementations of component.

Passing Links as a JSON String (Plain HTML)

When you’re using the component directly in HTML (or in frameworks that don’t support property binding), you must pass the links as a JSON string:

Using Property Binding

In frameworks like React or Angular, you can take advantage of property binding:

In React

In Vue

Overview

EdsCardCta is a call-to-action card component with title, description, action buttons, and footer links.

Key features:

Large title with line breaks
Description text
Primary and secondary action buttons
Footer links in a row
Animated rotating radial gradient background
Green border with hover effects
Variant support (default/inverse)

This component is ideal for landing pages, campaign sections, and conversion-focused layouts.

Properties

Property	Attribute	Description	Type	Default
`description` (required)	`description`	The description text below the title	`string`	`undefined`
`links`	`links`	Footer links as JSON string or array of link objects Example: [{“label”: “GitLab Repository”, “url”: “#”}, {“label”: “Storybook”, “url”: “#”}]	`CtaLink[] \| string`	`[]`
`primaryButtonText`	`primary-button-text`	Text for the primary action button	`string`	`'Get Started'`
`primaryButtonUrl`	`primary-button-url`	URL for the primary action button	`string`	`undefined`
`secondaryButtonText`	`secondary-button-text`	Text for the secondary action button	`string`	`undefined`
`secondaryButtonUrl`	`secondary-button-url`	URL for the secondary action button	`string`	`undefined`
`title` (required)	`title`	The main title text (supports HTML for line breaks)	`string`	`undefined`
`variant`	`variant`	Visual variant: ‘default’ for brand-black background, ‘inverse’ for white background	`"default" \| "inverse"`	`'default'`

Dependencies

Depends on

Graph

graph TD;
  eds-card-cta --> eds-button
  eds-card-cta --> eds-link
  eds-button --> eds-icon-wrapper
  eds-link --> eds-icon-wrapper
  style eds-card-cta fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS