Card

The Card component is a layout component used to group content in a visually consistent block. The component includes an image, a title, and a short description.

Preview

Fields

  • title (required) - Title displayed below the image.

  • description (required) - Short text description shown below the title.

  • imageChooser (default: image) - A switchable field allowing internal or external image selection:

    • If image is selected:

      • image (required) - Chooser for selecting an image from Magnolia DAM.

      • altText (optional) - Alt text for accessibility.

    • If externalImage is selected:

      • externalImage (required) - A full URL to the external image.

      • externalImageAlt (optional) - Alt text for accessibility.

Behavior

  • Displays a vertically stacked card layout.

  • All content is wrapped in a padded container.

  • Image spans the full width of the card.

  • Title appears below the image, followed by the description.

  • Width of the card adapts to the parent container.

Creating the component

To create this component in your project, run:

npm run mgnl -- create-component Card -p card
This command adds a local copy of the component to your project. You can fully customize it afterward.

Available in

Feedback

DX Core

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the Magnolia CLI docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules