UserCardWidget.md

UserCardWidget

Since v0.6

Pay attention! You should use echo and widget() method when you work with the widget. It uses ShadowSupport, ColorSupport and CustomCssSupport traits.

Public properties, its types and default values

• string $name - username
• string $image = '' - user image
• string $position = '' - user role or position
• string $background = 'info' - color of a card header (Bootstrap 4 colors or additional colors of AdminLTE) or a path to background image
• bool $gradient = false - makes a gradient card, uses $background property
• array $cols = [] - list of columns, format: [title => text] (see an example below)
• string $textAlign = 'center' - alignment of name and position ('left', 'right', 'center').

Example 1

<?= UserCardWidget::widget([
	'name' => 'Jonathan Burke Jr.',
	'position' => 'Software developer',
	'image' => '../avatars/user2-160x160.jpg',
	'shadow' => 'shadow-sm',
	'background' => 'navy',
	'textAlign' => 'left',
	'cols' => [
		'PROJECTS' => '24',
		'FOLLOWERS' => '1,521',
		'TASKS' => '135',
		'COMPLETED PROJECTS' => '12',
	],
]); ?>

Rendered UserCard with background color

Example 2

<?= UserCardWidget::widget([
	'name' => 'Sarah Bullock',
	'position' => 'UI/UX designer',
	'image' => '../assets/img/user5-128x128.jpg',
	'color' => 'white',
	'shadow' => 'shadow-sm',
	'background' => '../assets/img/photo1.png',
	'textAlign' => 'right',
	'cols' => [
		'PROJECTS' => '16',
		'FOLLOWERS' => '1,710',
		'PRODUCTS' => '25',
	],
]); ?>

Rendered UserCard with background image

Back to doc index or readme