Card

Overview

Card is based on the Angular Material card component.

Examples

import mesop as me


def load(e: me.LoadEvent):
  me.set_theme_mode("system")


@me.page(
  on_load=load,
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://google.github.io"],
  ),
  path="/card",
)
def app():
  with me.box(
    style=me.Style(
      display="flex",
      flex_direction="column",
      gap=15,
      margin=me.Margin.all(15),
      max_width=500,
    )
  ):
    with me.card(appearance="outlined"):
      me.card_header(
        title="Grapefruit",
        subtitle="Kind of fruit",
        image="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
      )
      me.image(
        style=me.Style(
          width="100%",
        ),
        src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
      )
      with me.card_content():
        me.text(
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
        )

      with me.card_actions(align="end"):
        me.button(label="Add to cart")
        me.button(label="Buy")

    with me.card(appearance="raised"):
      me.card_header(
        title="Grapefruit",
        subtitle="Kind of fruit",
        image="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
        image_type="small",
      )

      with me.card_content():
        me.text(
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
        )

      with me.card_actions(align="start"):
        me.button(label="Add to cart")
        me.button(label="Buy")

    with me.card(appearance="outlined"):
      me.card_header(
        title="Grapefruit",
        subtitle="Kind of fruit",
        image="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
        image_type="medium",
      )

      with me.card_content():
        me.text(
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
        )

      with me.card_actions(align="start"):
        me.button(label="Add to cart")
        me.button(label="Buy")

      me.card_header(
        title="Grapefruit",
        image="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
        image_type="large",
      )

      with me.card_content():
        me.text(
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
        )

      with me.card_actions(align="end"):
        me.button(label="Add to cart")
        me.button(label="Buy")

      me.card_header(
        title="Grapefruit",
        image_type="large",
      )

      with me.card_content():
        me.text(
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
        )

API

card

This function creates a card.

PARAMETER	DESCRIPTION
appearance	Card appearance style: outlined or raised. TYPE: Literal['outlined', 'raised'] DEFAULT: 'outlined'
style	Style for the component. TYPE: Style | None DEFAULT: None
key	The component key. TYPE: str | None DEFAULT: None

card_header

This function creates a card_header.

This component is meant to be used with the card component. It is used for the header of a card.

This component is a optional. It is mainly used as a convenience for consistent formatting with the card component.

PARAMETER	DESCRIPTION
title	Title TYPE: str
subtitle	Optional subtitle TYPE: str DEFAULT: ''
image	Optional image TYPE: str DEFAULT: ''
image_type	Display style for the image. Avatar will display as a circular image to the left of the title/subtitle. Small/medium/large/extra-large will display a right-aligned image of the specified size. TYPE: Literal['avatar', 'small', 'medium', 'large', 'extra-large'] DEFAULT: 'avatar'

card_content

This function creates a card_content.

This component is meant to be used with the card component. It is used for the contents of a card that

This component is a optional. It is mainly used as a convenience for consistent formatting with the card component.

card_actions

This function creates a card_actions.

This component is meant to be used with the card component. It is used for the bottom area of a card that contains action buttons.

This component is a optional. It is mainly used as a convenience for consistent formatting with the card component.

PARAMETER	DESCRIPTION
align	Align elements to the left (start) or right (end). TYPE: Literal['start', 'end']