card

card groups related content and actions in a structured card surface.

XML Element

card

Java Class

JmixCard

Basics

LIVE DEMO

The example combines card attributes and slots to present related information and actions:

<card id="card" width="30em"
      themeNames="cover-media elevated outlined"
      title="msg://card.title" subtitle="msg://card.subtitle">
    <media>
        <image resource="icons/jmix-background.png"/>
    </media>
    <headerPrefix>
        <avatar image="icons/jmix-icon.png"/>
    </headerPrefix>
    <content>
        <p text="msg://card.content.text"/>
    </content>
    <footer>
        <button id="visitSiteButton" text="msg://visitSiteButton.text" icon="EXTERNAL_LINK" themeNames="primary"
                iconAfterText="true"/>
        <button id="learnMoreButton" text="msg://learnMoreButton.text" icon="QUESTION"
                iconAfterText="true"/>
    </footer>
</card>

Title and Subtitle

The title identifies the card, while the subtitle adds secondary text below it. Define them with the title and subtitle attributes or with nested elements of the same names. A nested element takes precedence over the corresponding attribute.

Neither value is rendered when a custom header is present.

Card with the title and subtitle attributes:

<card width="20em"
      themeNames="elevated"
      title="msg://card.title"
      subtitle="msg://card.subtitle">
    <content>
        <p text="msg://card.content.text"/>
    </content>
</card>

Card with nested title and subtitle elements:

<card width="20em"
      themeNames="elevated">
    <title>
        <div>
            <h2 text="msg://card.title"/>
            <div text="msg://card.subtitle"
                 classNames="uppercase text-xs text-secondary"/>
        </div>
    </title>
    <content>
        <p text="msg://card.content.text"/>
    </content>
</card>
<card width="20em"
      title="msg://card.title"
      themeNames="elevated">
    <subtitle>
        <div text="msg://card.subtitle"/>
    </subtitle>
    <content>
        <p text="msg://card.content.text"/>
    </content>
</card>

Custom Card Header

LIVE DEMO

Use header to replace the predefined title and subtitle area with custom content. The headerPrefix and headerSuffix slots place components before and after that content.

<layout classNames="card-header">
    <card id="card" width="30em"
          themeNames="cover-media elevated outlined">
        <headerPrefix>
            <avatar image="icons/jmix-icon.png"/>
        </headerPrefix>
        <header>
            <flexLayout flexDirection="COLUMN_REVERSE" classNames="header">
                <h2 text="Jmix"/>
                <div text="Modern Dev platform" classNames="subtitle"/>
            </flexLayout>
        </header>
        <headerSuffix>
            <span text="Fullstack" themeNames="badge success"/>
        </headerSuffix>
    </card>
</layout>

The headerPrefix slot commonly contains an avatar, icon, or another visual identifier.

The headerSuffix slot commonly contains a status indicator or action.

Card Media

Specifies a visual component, such as an image, avatar, or icon, to be displayed as the card’s media.

To control how the media content is sized, apply the stretch-media or cover-media theme variants using the themeNames attribute.

<card width="20em"
      themeNames="elevated, stretch-media"
      title="msg://card.title"
      subtitle="msg://card.subtitle">
    <media>
        <image resource="icons/headphones.png"/>
    </media>
    <content>
        <p text="msg://card.content.text"/>
    </content>
</card>

Card Content

Contains the main content of the card. This slot can hold any number of elements, providing flexibility for rich and complex layouts.

<card width="20em"
      title="msg://card.title"
      subtitle="msg://card.subtitle"
      themeNames="outlined" titleHeadingLevel="4">
    <content>
        <p text="msg://card.content.text"/>
        <vbox spacing="false" padding="false">
            <p text="Color:"/>
            <radioButtonGroup id="colorRBtn"
                              themeNames="vertical"/>
        </vbox>
    </content>
</card>

Defines the footer area of the card. This slot supports multiple elements, enabling flexible layouts for actions, status indicators, and supplementary information.

The footer follows the main content and stays at the bottom when the card has extra height.

<card width="20em"
      themeNames="elevated"
      title="msg://card.title"
      subtitle="msg://card.subtitle" titleHeadingLevel="1">
    <content>
        <p text="msg://card.content.text"/>
    </content>
    <footer>
        <span text=" Delivery: 1-2 days"
              themeNames="badge, success"/>
        <button id="buyButton"
                text="Buy Now"
                icon="vaadin:clock"
                iconAfterText="true"/>
    </footer>
</card>

Theme Variants

LIVE DEMO

Use the themeNames attribute to set a component theme.

Variant Description Supported By

outlined

Applies a border around the card.

Aura, Lumo

elevated

Adds a shadow effect to create elevation.

Aura, Lumo

horizontal

Arranges the card content horizontally.

Aura, Lumo

stretch-media

Scales the media content to fill its container.

Aura, Lumo

cover-media

Crops the media content to cover its container.

Aura, Lumo

Attributes

Common attributes serve the same purpose for all components.

The following attributes are specific to card:

Name Description Default

subtitle

Sets secondary text with predefined styling. See Title and Subtitle.

—

title

Sets the title text with predefined styling. See Title and Subtitle.

—

titleHeadingLevel

Sets the aria-level of a title defined with the title attribute. It does not affect a custom title component. Use a value from 1 through 6 to preserve a valid heading hierarchy.

2

Handlers

Name Description

AttachEvent

Fires when the card is attached to the UI.

DetachEvent

Fires when the card is detached from the UI.

Elements

A card can contain the title, subtitle, header, headerPrefix, headerSuffix, media, content, and footer elements described above.

See Also