<tyro-ui-bento-card>
Bento Card
Flexible container card for dashboards. Displays an optional header (icon, label, title) and projects any content via
ng-content. Supports sizes, hover effect and animated gradient border. Preview - sizes
size='small' | 'medium' | 'large'
SMALL
Compact card
Reduced padding for dense layouts.
MEDIUM
Default card
Standard padding - default size.
LARGE
Spacious card
More padding for airy content.
Preview - effects
[hoverable] | [gradient]
Hoverable
Hover to see the shadow + lift effect.
Gradient border
Hover to see the animated gradient border.
Preview - header action slot
[tyro-header-action]
OVERVIEW
Analytics
The named slot [tyro-header-action] projects content to the top right of the header.
Inputs
Property | Type | Default | Description |
|---|---|---|---|
[title?] | string | - | Title displayed in the card header |
[label?] | string | - | Eyebrow label displayed above the title (uppercase) |
[icon?] | string | - | Remix-icon class displayed in the header |
[iconImg?] | string | - | Image URL replacing the icon in the header |
[size] | 'small' | 'medium' | 'large' | 'medium' | Card size - affects padding and internal gaps |
[hoverable] | boolean | false | Enables hover effect (shadow + slight translateY) |
[gradient] | boolean | false | Enables the animated Tyrolium gradient border on hover |
Content slots
Slot | Description |
|---|---|
ng-content (default) | Card body - accepts any content |
[tyro-header-action] | Content projected to the top right of the header (button, badge, etc.) |