ListViewCard

ListViewCard is a card component used to display items in list views with an image, title, description, and optional cover sections.

Live Example

Loading component...

Try It

Edit the code below to experiment with the component:

Live Editor

function Demo() {
  return (
    <ListViewCard
      title="Superset Card Title"
      url="/superset/dashboard/births/"
      imgURL="https://picsum.photos/seed/superset/300/200"
      description="Lorem ipsum dolor sit amet, consectetur adipiscing elit..."
      coverLeft="Left Section"
      coverRight="Right Section"
    />
  );
}

Result

Loading...

Props

Prop	Type	Default	Description
title	string	"Superset Card Title"	Title displayed on the card.
loading	boolean	false	Whether the card is in loading state.
url	string	"/superset/dashboard/births/"	URL the card links to.
imgURL	string	"https://picsum.photos/seed/superset/300/200"	Primary image URL for the card.
description	string	"Lorem ipsum dolor sit amet, consectetur adipiscing elit..."	Description text displayed on the card.
coverLeft	string	"Left Section"	Content for the left section of the cover.
coverRight	string	"Right Section"	Content for the right section of the cover.

Import

import { ListViewCard } from '@superset/components';

---

Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.