IxDF UI Kit

“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
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".