eds-card-feature

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 this practical implementation of component.

Plain HTML

In React

In Vue

Overview

EdsCardFeature is a card component designed to showcase features with an icon, title, description, and optional link.

Key features:

Icon at the top in a colored background box
Title and description
Optional “Learn more” link with arrow
Hover effects with background color change and border glow

This component is ideal for feature grids, service listings, and capability showcases.

Properties

Property	Attribute	Description	Type	Default
`description` (required)	`description`	The description text	`string`	`undefined`
`icon`	`icon`	The icon to display at the top of the card	"copy" \| "arrow-right" \| "chevron-right" \| "chevron-left" \| "chevron-down" \| "chevron-up" \| "arrow-left" \| "arrow-up-right" \| "close" \| "add" \| "edit" \| "checkmark" \| "download" \| "upload" \| "view" \| "exit" \| "caretSort" \| "bookmark" \| "createLink" \| "activity" \| "account" \| "analytics" \| "template" \| "documentExport" \| "documentDownload" \| "trashCan" \| "chooseItem" \| "copyLink" \| "dragHorizontal" \| "dragVertical" \| "login" \| "logout" \| "move" \| "replicate" \| "sortAscending" \| "sortDescending" \| "requestQuote" \| "reset" \| "resultDraft" \| "share" \| "play" \| "book" \| "chatOff" \| "forum" \| "shareKnowledge" \| "time" \| "help" \| "customerService" \| "code" \| "rocket" \| "compass" \| "menu" \| "search" \| "settings" \| "notification" \| "user" \| "group" \| "save" \| "document" \| "folder" \| "image" \| "calendar" \| "information" \| "warning" \| "error" \| "checkmark-filled" \| "star" \| "thumbs-up" \| "thumbs-down" \| "twitter" \| "linkedin" \| "facebook" \| "youtube" \| "mastodon" \| "bluesky"	`undefined`
`linkText`	`link-text`	Optional link text (defaults to “Learn more”)	`string`	`'Learn more'`
`title` (required)	`title`	The title of the feature	`string`	`undefined`
`url`	`url`	Optional URL for “Learn more” link	`string`	`undefined`
`variant`	`variant`	Visual variant: ‘default’ for light text on dark background, ‘inverse’ for dark text on light background	`"default" \| "inverse"`	`'default'`

Dependencies

Depends on

Graph

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

Built with StencilJS