eds-card-app

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

Using Property Binding

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

In React

In Vue

Overview

EdsCardApp is a card component designed to showcase applications with category, title, description, tags, and link.

Key features:

Category label at the top (e.g., “BRAIN ATLASES”, “DATA MANAGEMENT”)
Large, lightweight title
Description text
Multiple tags for features/technologies
Optional action link at the bottom
Hover effects with transform and border glow

This component is ideal for application grids, service catalogs, and platform showcases.

Properties

Property	Attribute	Description	Type	Default
`category`	`category`	The category label (e.g., “BRAIN ATLASES”, “DATA MANAGEMENT”) Optional - if not provided, the category tag won’t be displayed	`string`	`undefined`
`description` (required)	`description`	The description text	`string`	`undefined`
`linkText`	`link-text`	Optional link text (defaults to “Explore Components”)	`string`	`'Explore Components'`
`tags`	`tags`	Tags to display (features, technologies, etc.) Can be a JSON string or array of tag objects	`AppTag[] \| string`	`[]`
`title` (required)	`title`	The main title of the application	`string`	`undefined`
`url`	`url`	Optional URL for the action 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-app --> eds-tag
  eds-card-app --> eds-link
  eds-link --> eds-icon-wrapper
  style eds-card-app fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS