Catalog Cards

<.contact_card>

ConnieUI.Cards

Sofie Lindqvist Producer sofie@nordicfilms.dk +45 20 12 34 56
HEEx 
<div class="w-sm">
  <ConnieUI.Cards.contact_card image={@image} name="Sofie Lindqvist" title="Producer" email="sofie@nordicfilms.dk" phone="+45 20 12 34 56">
    <:action>
      <ConnieUI.Buttons.button size="sm" color="secondary" icon_start="icon-mail-01" full_width>
        Send a message
      </ConnieUI.Buttons.button>
    </:action>
  </ConnieUI.Cards.contact_card>
</div>

Controls

:string
:string
:string
:string
:string

Set by the example

class

Docs

A person to get in touch with: photo, name, title, and how to reach them, with whatever the reader can do about it underneath. `title` is the role the person holds, drawn in the brand colour so it reads as who they are rather than as another way to reach them. Every line but the name is optional and left out when blank. A person without a photo wears their initials (`ConnieUI.Avatars`). ## Examples <ConnieUI.Cards.contact_card name="Olivia Rhye" image={url} title="Line Producer" email="olivia@example.com" phone="+45 22 15 43 30" > <:action> <ConnieUI.Buttons.button full_width size="sm">Request access</ConnieUI.Buttons.button> </:action> </ConnieUI.Cards.contact_card>
Attribute Type Default Description
name * :string
image :string nil
title :string nil
email :string nil
phone :string nil
class :any nil
Slot Slot attributes Description
:action