Avatar

Ripple UI comes with a set of predefined avatar classes for styling images in different shapes and sizes.

​

Default

Simple example of a avatar.

<div class="avatar">
	<img src="https://i.pravatar.cc/150?u=a042581f4e29026024d" alt="avatar" />
</div>

​

Squared

Avatar with squared shape.

<div class="avatar avatar-sm avatar-square">
	<img src="https://i.pravatar.cc/150?u=a042581f4e29026024d" alt="avatar" />
</div>

​

Ring effect

Avatar with ring effect.

<div class="avatar avatar-ring-primary">
	<img src="https://i.pravatar.cc/150?u=a042581f4e29026024d" alt="avatar" />
</div>

​

Ring colors

Avatar with ring effect in different colors.

<div class="avatar avatar-ring">
	<img src="https://i.pravatar.cc/150?u=a042581f4e29026024d" alt="avatar" />
</div>

<div class="avatar avatar-ring-primary">
	<img src="https://i.pravatar.cc/150?u=a042581f4e29026024d" alt="avatar" />
</div>

<div class="avatar avatar-ring-secondary">
	<img src="https://i.pravatar.cc/150?u=a042581f4e29026024d" alt="avatar" />
</div>

<div class="avatar avatar-ring-success">
	<img src="https://i.pravatar.cc/150?u=a042581f4e29026024d" alt="avatar" />
</div>

<div class="avatar avatar-ring-error">
	<img src="https://i.pravatar.cc/150?u=a042581f4e29026024d" alt="avatar" />
</div>

<div class="avatar avatar-ring-warning">
	<img src="https://i.pravatar.cc/150?u=a042581f4e29026024d" alt="avatar" />
</div>

​

Truncate text

Avatar with truncated text.

<div class="avatar avatar-ring-primary avatar-squared truncate">
	<div>+999999</div>
</div>

​

Online

Avatar with online status.

<div class="avatar avatar-online">
	<img src="https://i.pravatar.cc/150?u=a042581f4e29026024d" alt="avatar" />
</div>

​

Sizes

Avatar with different sizes.

<div class="avatar avatar-xs">
	<img src="https://i.pravatar.cc/150?u=a042581f4e29026024d" alt="avatar" />
</div>

<div class="avatar avatar-sm">
	<img src="https://i.pravatar.cc/150?u=a042581f4e29026024d" alt="avatar" />
</div>

<div class="avatar avatar-md">
	<img src="https://i.pravatar.cc/150?u=a042581f4e29026024d" alt="avatar" />
</div>

<div class="avatar avatar-lg">
	<img src="https://i.pravatar.cc/150?u=a042581f4e29026024d" alt="avatar" />
</div>

<div class="avatar avatar-xl">
	<img src="https://i.pravatar.cc/150?u=a042581f4e29026024d" alt="avatar" />
</div>

​

Group

Avatar group.

<div class="avatar-group">
	<div class="avatar avatar-squared">
		<img src="https://i.pravatar.cc/150?u=a042581f4e29026024d" alt="avatar" />
	</div>

	<div class="avatar avatar-online avatar-ring avatar-squared avatar-hover">
		<img src="https://i.pravatar.cc/150?u=a042581f4e29026024d" alt="avatar" />
	</div>
	<div class="avatar avatar-squared avatar-ring-primary">
		<img src="https://i.pravatar.cc/150?u=a042581f4e29026024d" alt="avatar" />
	</div>
	<div class="avatar">
		<img src="https://i.pravatar.cc/150?u=a042581f4e29026024d" alt="avatar" />
	</div>
	<div class="avatar">
		<img src="https://i.pravatar.cc/150?u=a042581f4e29026024d" alt="avatar" />
	</div>
	<div class="avatar">
		<div>+000</div>
	</div>
</div>

​

Dropdown

Avatar with dropdown.

<div class="avatar avatar-ring avatar-md">
	<div class="dropdown-container">
		<div class="dropdown">
			<label class="btn btn-ghost flex cursor-pointer px-0 hover:bg-inherit" tabindex="0">
				<img src="https://i.pravatar.cc/150?u=a042581f4e29026024d" alt="avatar" />
			</label>
			<div class="dropdown-menu dropdown-menu-bottom-right">
				<a class="dropdown-item text-sm">Profile</a>
				<a tabindex="-1" class="dropdown-item text-sm">Account settings</a>
				<a tabindex="-1" class="dropdown-item text-sm">Subscriptions</a>
			</div>
		</div>
	</div>
</div>

​

API