Info Card

<sl-info-card> | SlInfoCard

Since 2.60.4

stable

As a reusable styled card component with title and info text.

<sl-info-card title="€33 - 101" infoText="Avg. base pay" tooltip="This is the average base pay for this position."></sl-info-card>

import SlButton from '@yoummday/ymmd-shoelace/dist/react/button';
import SlCard from '@yoummday/ymmd-shoelace/dist/react/card';
import SlTxt from '@yoummday/ymmd-shoelace/dist/react/txt';

const App = () => (
  <>
    <SlInfoCard title="test" infoText="infoText" tooltip="Tooltip Text"/>
  </>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script

Import

Bundler

React

To import this component from the CDN using a script tag:

<script type="module" src="https://v2-61-0.yoummday-theme.pages.dev/components/info-card/info-card.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://v2-61-0.yoummday-theme.pages.dev/components/info-card/info-card.js';

To import this component using a bundler:

import '@yoummday/ymmd-shoelace/dist/components/info-card/info-card.js';

To import this component as a React component:

import SlInfoCard from '@yoummday/ymmd-shoelace/dist/react/info-card';

Properties

Name	Description	Type	Default
`cardData.title`	The title of the card.	-	-
`cardData.infoText`	The info text of the card.	-	-
`cardData.tooltip`	The tooltip of the card.	-	-
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Dependencies

This component automatically imports the following dependencies.

<sl-card>