Catalog Cards

<.card>

ConnieUI.Cards

Feature Film — "Northern Lights"

Sofie Lindqvist Mikkel Sørensen Anaïs Dubois
HEEx 
<div class="w-xs">
  <ConnieUI.Cards.card>
    <ConnieUI.Cards.image image={@project.image} />
    <ConnieUI.Cards.content>
      <ConnieUI.Typography.heading level="h3">{@project.name}</ConnieUI.Typography.heading>
      <:footer>
        <ConnieUI.Avatars.avatar_group size="size-8">
          <:avatar :for={member <- @project.members}>
            <ConnieUI.Avatars.avatar name={member.name} image={member.avatar} size="size-8" />
          </:avatar>
        </ConnieUI.Avatars.avatar_group>
      </:footer>
    </ConnieUI.Cards.content>
  </ConnieUI.Cards.card>
</div>

Variant matrix

Every combination of one or two attributes, side by side.

Controls

:string
:string

Set by the example

click

Docs

No @doc for this component.

Attribute Type Default Description
id :string
click {:struct, Phoenix.LiveView.JS} nil
color :string "primary"
primary | secondary | tertiary | quaternary | gradient_wizard
Slot Slot attributes Description
inner_block *
:dropdown
:buttons
:badge