Avatar

This page is currently under construction

Lism UI (@lism-css/ui) is still in preparation.

A component for displaying avatar images.

↓

Preview

<Avatar size="4rem" src="https://cdn.lism-css.com/img/avatar/a-01.jpg" alt="Avatar of xxxx" />

<div class="c--avatar l--frame -ar:1/1 -w -bdrs:99" style="--w: 4rem">
  <img src="https://cdn.lism-css.com/img/avatar/a-01.jpg" alt="Avatar of xxxx" width="100%" height="100%" decoding="async" />
</div>

Usage

Provided as Avatar (c--avatar) from the @lism-css/ui package.

Import

import { Avatar } from '@lism-css/ui/react';

Props

| Prop | Description | |---|---| |size| Specifies the size of the avatar. Default: "1.5em" | |src| Path to the avatar image. | |alt| Alt text for the image. |

Source Code

The source code is available on GitHub.

Examples

↓

Avatar examples

<Avatar size="4rem" src="https://cdn.lism-css.com/img/avatar/a-01.jpg" alt="Avatar of xxxx"/>
<Avatar size="5rem" src="https://cdn.lism-css.com/img/avatar/a-02.jpg" alt="Avatar of xxxx" bd bdw="2px" bdc="base" bxsh="20"/>

<div class="c--avatar l--frame -ar:1/1 -w -bdrs:99" style="--w: 4rem">
  <img src="https://cdn.lism-css.com/img/avatar/a-01.jpg" alt="Avatar of xxxx" width="100%" height="100%" decoding="async" />
</div>
<div class="c--avatar l--frame -ar:1/1 -w -bdrs:99 -bd -bxsh:20" style="--w: 5rem; --bdw: 2px; --bdc: var(--base)">
  <img src="https://cdn.lism-css.com/img/avatar/a-02.jpg" alt="Avatar of xxxx" width="100%" height="100%" decoding="async" />
</div>

Without @lism-css/ui

An example of building an Avatar using only lism-css, without @lism-css/ui.

↓

Example

<Frame ar="1/1" w="4em" bdrs="99">
  <img src="https://cdn.lism-css.com/img/avatar/a-01.jpg" alt="Avatar of xxxx" width="100%" height="100%" decoding="async" />
</Frame>