Info Card
<wa-info-card>
A compact summary card with optional title, info text, and tooltip.
Examples
Basic usage
Use title for the headline and infoText for the supporting line.
Add a tooltip
Provide tooltip to render a focusable info trigger beside the supporting text.
Notes
wa-info-cardis a Yoummday-owned component composed fromwa-card,wa-icon, andwa-tooltip.- The public migration from
sl-info-cardis mainly an element and package rename. - The tooltip trigger is keyboard-focusable and uses a standard Web Awesome icon.
API
Importing
If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.
Import this component directly from the CDN:
import 'https://cdn.yoummday.com/packages/@yoummday/webawesome/0.5.1/dist/components/info-card/info-card.js';
After installing Web Awesome via npm, import this component:
import '@yoummday/webawesome/dist/components/info-card/info-card.js';
If you're self-hosting Web Awesome, import this component from your server:
import './webawesome/dist/components/info-card/info-card.js';
To import this component for React 18 or below, use the following code:
import WaInfoCard from '@yoummday/webawesome/dist/react/info-card/index.js';
Attributes & Properties
Learn more about attributes and properties.
| Name | Description | Reflects |
|---|---|---|
infoTextinfotext |
Supporting copy shown below the title.
The legacy component accepted
infoText in markup, which HTML lowercases
to infotext. Keep that contract so the migration stays to an element
rename for plain HTML and framework consumers alike.
Type
string
Default
''
|
|
titletitle |
The card title shown above the supporting info row.
Type
string
Default
''
|
|
tooltiptooltip |
Tooltip text rendered next to the supporting copy.
Type
string
Default
''
|
Dependencies
This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.