Card

Cards are versatile content structures that group related concepts and tasks together as well as provide an entry point to more complex and detailed information.

Text overflow

All text within the card’s predefined slots automatically wraps to a new line and forces its containers to grow to fit it.

<img src="/assets/v2/img/components/card/card-behavior-text-overflow.png" alt="The sample text of the card's title, default slot, and footer slot wrap to multiple lines within the card container." />

Media scaling

Media placed within the media slot scales according to its intrinsic aspect ratio. However, custom aspect ratios can be set via component token and media will scale to fill the container.

<img src="/assets/v2/img/components/card/card-behavior-media-scaling.png" alt="Two cards compare the scale of a sample media image. The bottom card is approximately twice as wide as the top card with its image scaling proportionally to fill the media slot of the card." />

Height

Cards grow in height to accommodate the content of the card.

<img src="/assets/v2/img/components/card/card-behavior-height.png" alt="Two cards compare how a card's height accommodates multiple content elements. The container of the left card hugs content that includes a title and sample body text. The container of the right card hugs content that includes a media image, title, body text, and footer text." />

The card component is made up of nine elements.

Custom layouts

The card component is designed to accommodate custom content and layouts within each of its slots. To make the most of this structure, we recommend adding a series of relevant card “micro-layouts” (headers, body content, footers, etc.) to your product library. You can then swap combinations of these layouts into the slots to create a custom card. If that particular card will be used in multiple places throughout your UI, you can then componentize that specific card with the content in place so it can be consistently reused.

Padding

General padding can be set for the card using the padding property. These options apply broad-level padding settings to the entire card. However, custom paddings may be applied to each individual side of each slot to accommodate specific layout considerations. These can be set on the following layers:

• card-media-wrapper
• card-header-wrapper
• card-default-wrapper
• card-footer-wrapper

When making overrides to the padding, use variables based on Forge’s dimension tokens.

Media slot

One known Figma quirk is that images set using the aspect ratio component within the media slot will not persist between card variants. It’s recommended that you establish the variant you want to use (including padding and dividers) and then set your image.

While the card has its own border radius that can be set, the media slot can also have its own border radius applied. This can help accommodate circumstances where the image is inset and needs rounded corners. In Figma, select the card-media layer and adjust the border radius as needed. Note that, when implemented into code, this isn't applying a border radius to the slot itself. Rather, the radius is applied to whatever content is being placed into the slot (ex., an <img> element).

import '@jack-henry/jh-elements/components/card/card.js'

<jh-card header-title="Title" header-subtitle="Subtitle">
  Body content
  <span slot="jh-card-footer">Footer</span>
</jh-card>