PetalComponents.Card (petal_components v4.6.1)

Copy Markdown View Source

Summary

Functions

The card header: title + description on the left, an optional action on the right.

Functions

card(assigns)

Attributes

  • class (:any) - CSS class. Defaults to nil.
  • variant (:string) - basic is THE card (bordered panel); muted is the tinted well for de-emphasised content. outline is a legacy alias of basic (identical look) slated for removal in a future major. Defaults to "basic". Must be one of "basic", "outline", or "muted".
  • Global attributes are accepted.

Slots

  • inner_block

card_content(assigns)

Attributes

  • heading (:string) - creates a heading. Defaults to nil.
  • category (:string) - creates a category. Defaults to nil.
  • category_color_class (:any) - sets a category color class. Defaults to "pc-card__category--primary".
  • class (:any) - CSS class. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

card_footer(assigns)

Attributes

  • class (:any) - CSS class. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

card_header(assigns)

The card header: title + description on the left, an optional action on the right.

<.card_header title="Login to your account" description="Enter your email below">
  <:action><.button color="gray" variant="ghost" size="sm">Sign up</.button></:action>
</.card_header>

Attributes

  • title (:string) - the card title. Defaults to nil.
  • description (:string) - a muted line under the title. Defaults to nil.
  • class (:any) - CSS class. Defaults to nil.
  • Global attributes are accepted.

Slots

  • action - top-right header content - a button, link or menu.
  • inner_block

card_media(assigns)

Attributes

  • aspect_ratio_class (:any) - aspect ratio class. Defaults to "aspect-video".
  • src (:string) - hosted image URL. Defaults to nil.
  • alt (:string) - alt text for the image. Defaults to nil.
  • class (:any) - CSS class. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

review_card(assigns)

Attributes

  • name (:string) (required) - The reviewer's name.
  • username (:string) (required) - The reviewer's username.
  • img (:string) (required) - URL of the reviewer's avatar.
  • body (:string) (required) - The review text content.
  • class (:string) - Additional classes. Defaults to "".
  • Global attributes are accepted.