eds-card-generic

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.

Default Implementation

With Image

See It in Use with Code

Check out the practical implementations of component.

Passing Tags 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 tags as a JSON string:

Here the tags attribute is a string. The getter will parse it into an array of objects.

Passing Tags as an Object (Using Property Binding)

In frameworks like React or Angular, you can take advantage of property binding to pass the tags directly as an object:

In React

In Vue 3

Overview

EdsCardGeneric is a versatile card component designed to display rich content such as titles, descriptions, images, and tags. The card supports various visual configurations, including hover effects, background styling, and compact layout options.

Key features include:

A customizable title with an optional link.
Display of images, avatars, or initials based on the available content.
Optional description, tag display, and hover effects for interactive use.
Integration with Matomo analytics, emitting a custom event when the card is clicked.

This component is ideal for use in interfaces where structured card-like display elements are needed.

Properties

Property	Attribute	Description	Type	Default
`description`	`description`	The description text displayed within the card.	`string`	`undefined`
`icon`	`icon`	Optional icon name to display at the top of the card (instead of an image).	"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`
`intent`	`intent`		`"dark" \| "inverse" \| "primary" \| "secondary"`	`'secondary'`
`tags`	`tags`	Tags related to the card content.	`Tag[] \| string`	`[]`
`title` (required)	`title`	The title of the card. This is required and displayed prominently.	`string`	`undefined`
`titleSize`	`title-size`	The size of the title text. Controls the heading level and font size. Default is ’large’ (f-heading-03).	`"display" \| "large" \| "medium" \| "small" \| "xlarge"`	`'large'`
`url`	`url`	The URL that the card title links to. If provided, the title becomes a clickable link.	`string`	`undefined`

Dependencies

Used by

eds-timeline

Depends on

eds-icon-wrapper
eds-tag
eds-card-title
eds-card-desc

Graph

graph TD;
  eds-card-generic --> eds-icon-wrapper
  eds-card-generic --> eds-tag
  eds-card-generic --> eds-card-title
  eds-card-generic --> eds-card-desc
  eds-timeline --> eds-card-generic
  style eds-card-generic fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS