Learn Design System

  • Introduction
  • Inputs
  • Utils

Fundamentals

General

Inputs

Layout

Navigation

Modals

A card is a structured container for content. It has several parts: a header, footer, title, body, and image. The card will calculate certain sizes and posititions depending on the content provided.

PropTypeNotes
titlestringThe card's title text.
bodystringThe card's body text.
headerstringThe card's header text.
footerstringThe card's footer text.
bodystringThe card's body text.
autosizebooleanWhether to resize the body container to fit its content.
imagestringAn image URL.
overlaybooleanWhether to show an overlay on the card's image.
colorstringThe color for the image overlay.
favoritebooleanWhether to display the favorite button.
isFavoritebooleanWhether the card should be favorited.
onFavoriteChangefunctionA callback to call when the user toggles the favorite.

Examples

Overrides

// App.tsx

import { Override } from "framer";

// Event Handlers

const handleFavoriteChange = isFavorite => {
  console.log("Card is favorite: " + isFavorite);
};

// Overrides

export function CardExampleA(): Override {
  return {
    title: "Card A"
  };
}

export function CardExampleB(): Override {
  return {
    title: "Card B",
    body: "This is the list's second card"
  };
}

export function CardExampleC(): Override {
  return {
    header: "Card C",
    image: "http://imgur.com/exampleImage",
    favorite: true,
    isFavorite: true,
    onFavoriteChange: handleFavoriteChange
  };
}

export function CardExampleD(): Override {
  return {
    header: "Card D",
    favorite: true,
    isFavorite: true,
    onFavoriteChange: handleFavoriteChange,
    image: "http://imgur.com/exampleImage",
    footer: "This card has a footer."
  };
}