CSS Legend

Last updated: 16 days ago

Category: Basic

The legend style component is primarily used as a small decorative image and can be placed in any component or module. It includes rep=disk, rep=cube, and rep=image.

Basic Usage

The legend style component includes three types:

• rep="disk": Small circular image with equal width/height (may be cropped), typically used for avatars
• rep="cube": Square image with small rounded corners (may be cropped), typically used for avatars
• rep="image": Regular image (not cropped), typically used for small real images

Dimensions are undefined by default and need to be set by users or parent components.

Embedded Images

Images can be placed inside rep elements with the same effect.

Empty Images

When the img tag's src attribute is empty or missing in embedded images, a default icon will be displayed instead.

Since image transparency can't be determined, rep elements have no background by default, but can be manually added.

Background Images

Since cube and disk maintain aspect ratios, background images can be used for:

• Avatar placeholders
• Framework default images
• Custom background images