IxDF Design System

“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

Card Variations

Basic Member

Member with description

Don Norman
Don Norman
Director of The Design Lab
La Jolla California United States
Don Norman is Director of the Design Lab at the University of California, San Diego, cofounder of the Nielsen Norman Group, a member of the National Academy of Engineering, IDEO fellow, and former Vice President of Apple.

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\Models\Member\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".