eds-card-hero
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
EdsCardHero is a floating card component designed for hero sections with label, title, description, and tags.
Key features:
- Small uppercase label (e.g., “DATA MANAGEMENT”)
- Large, lightweight title
- Description text
- Multiple tags at the bottom
- Floating animation effects
- Hover effects with border glow
This component is ideal for hero sections, landing pages, and feature highlights.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
category (required) | category | The small label displayed at the top (e.g., “DATA MANAGEMENT”, “BRAIN ATLASES”) | string | undefined |
description | description | The description text | string | undefined |
tags | tags | Tags to display at the bottom of the card Can be a JSON string or array of tag objects | HeroTag[] | string | [] |
title (required) | title | The main title of the card | string | undefined |
url | url | Optional URL to link the card to | string | undefined |
variant | variant | Visual variant: ‘default’ for light text on dark background, ‘inverse’ for dark text on light background | "default" | "inverse" | 'default' |
Built with StencilJS