User Card

<sw-user-card>

ready
Renders a compact user information card using the provided user data.

Usage

Loading...
<sw-user-card title="Account" :user="{
    email: 'test@example.com',
    active: true,
    addresses: [{
        salutation: 'Mister',
        title: 'Doctor',
        firstName: 'John',
        lastName: 'Doe',
        street: 'Main St 123',
        zipcode: '12456',
        city: 'Anytown',
        country: { name: 'Germany' }
    }],
    salutation: 'Mister',
    title: 'Doctor',
    firstName: 'John',
    lastName: 'Doe',
    street: 'Main St 123',
    zipcode: '12456',
    city: 'Anytown',
    country: { name: 'Germany' }
}">
<template slot="actions">
    <sw-button size="small" disabled>
        <sw-icon name="small-pencil" small></sw-icon>
        Edit user
    </sw-button>

    <sw-button size="small" disabled>
        <sw-icon name="default-lock-key" small></sw-icon>
        Change password
     </sw-button>
</template>
</sw-user-card>

Component properties

Property name Type Default
user Object
title String
isLoading Boolean false

Imports

  • ./sw-user-card.html.twig
  • ./sw-user-card.scss

Twig blocks

  • sw_user_card_avatar
  • sw_user_card_metadata_user_name
  • sw_user_card_metadata_user_company
  • sw_user_card_metadata_user_email
  • sw_user_card_slot_metadata_additional
  • sw_user_card_metadata_additional
  • sw_user_card_slot_actions
  • sw_user_card_actions
  • sw_user_card_metadata
  • sw_user_card_slot_summary
  • sw_user_card_metadata_container
  • sw_user_card_slot_data_additional
  • sw_user_card_row_primary
  • sw_user_card_slot_default
  • sw_user_card_row_secondary
  • sw_user_card_rows
  • sw_user_card

Slots

  • metadata-additional
  • actions
  • default
  • data-additional