“Member Card” Component

Design: zeplin.

The member card displays a summary of a member. In the normal variant, the member card has one button: to view the member’s profile page. In other variants—for example, a member card with Local Group actions—more than one button exists.

Card Grid

Don Norman

La Jolla California United States

• 

View profile

Daniel Rosenberg

Founder

San Jose United States

• 
• 

View profile

Clayton Christensen

Professor at Harvard Business School

Massachusetts United States

View profile

Frank Spillers

CEO at Experience Dynamics

Portland OR United States

View profile

Card Variations

Basic Member

Don Norman

La Jolla California United States

• 

View profile

Member with description

Don Norman

La Jolla California United States

• 

Don Norman was the Founding Director of the Design Lab at the University of California, San Diego (now retired), cofounder of the Nielsen Norman Group, a member of the National Academy of Engineering, and former Vice President of Apple.

View profile 🦄️ Member on Facebook

Usage

// basic usage
@component('components.cards.member', ['member' => $member])
@endcomponent

// full usage
@component('components.cards.member', [
    'member' => $member,
    'description' => 'Some details about the Member.',
])
    <a href="{{ $member->facebook_url }}" target="_blank" class="button button-card">🦄️️ Member on Facebook</a>
@endcomponent

Props

• member (required)
  App\Modules\Member\Models\Member

  The member being displayed.

• description
  string

  Details about the Member.

Slots

• default
  slot

  Add extra controls (buttons/links) to the card. A link or button should use the following CSS classes: "button button-card".