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.

HTML

JSX

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

Squared#

Avatar with squared shape.

HTML

JSX

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

HTML

JSX

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

HTML

JSX

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

+999999

HTML

JSX

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

Online#

Avatar with online status.

HTML

JSX

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

Sizes#

Avatar with different sizes.

HTML

JSX

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

+000

HTML

JSX

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

HTML

JSX

<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#

`Avatar Classes`

class	Description
avatar	Avatar base
avatar-squared	With squared shape
avatar-ring	Set ring with border color
avatar-ring-primary	Set ring with primary color
avatar-ring-secondary	Set ring with secondary color
avatar-ring-success	Set ring with success color
avatar-ring-error	Set ring with error color
avatar-ring-warning	Set ring with warning color
avatar-group	Avatar group base
avatar-online	Set online status
avatar-xs	Set extra small size
avatar-sm	Set small size
avatar-md	Set medium size
avatar-lg	Set large size
avatar-xl	Set extra large size

Alert Badge

Edit this page on GitHub