No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Card

import "@inera/ids-core/components/card/register";

ids-card will render a card-styled container for your content.

Default

Lorem with link consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
NameDescriptionDefaultControl
Properties
bordertop
Will give the card a top border.
Only for 1177 themes
false
fill
Changes color of the card. Only for inera and inera-admin.
(7.0)
false
focuscard
Changes color of the card. Cannot be combined with borderTop.
(7.0)
false
hideonm
Hides card wrapper on medium devices. This will set interactive to false.
false
hideons
Hides card wrapper on small devices. This will set interactive to false.
false
interactive
Will add extra shadow on hover
false
lean
Will decrease padding on y axis
false
slots
For content
-
interactive
Add a link with this slot and the card will be clickable
-

Focus card

Focus card

Lorem with link consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Border top

Not supported for inera

Border top

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Fill

Not supported for 1177

Fill

Lorem with link consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Interactive card

Interactive cards can be achieved with a link with slot="interactive".

Interactive

Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor et dolore magna aliqua

Accessibility

No actions required.