Avatar
Combine this classes with container class .media
| Shortcuts | Render |
|---|---|
.media-sm |
Small media dimension |
.media-md |
Medium media dimension |
.media-lg |
Large media dimension |
.media-xl |
Extra-large media dimension |
Avatar font size
Combine this classes with container class .media
| Shortcuts | Render |
|---|---|
.media-fs-1 |
Small media font size |
.media-fs-2 |
Medium media font size |
.media-fs-3 |
Large media font size |
Flip Effects
| Shortcuts | Render |
|---|---|
.flip |
Flips the element horizontally and vertically. |
.flip-x |
Flips the element horizontally. |
.flip-y |
Flips the element vertically. |
Brightness Effects
| Shortcuts | Render |
|---|---|
.bright-1 |
Applies a slight dimming effect (80% brightness). |
.bright-2 |
Applies more dimming (70% brightness). |
.bright-3 |
Applies significant dimming (60% brightness). |
Blur Effects
| Shortcuts | Render |
|---|---|
.blur-1 |
Adds a slight blur to the element (0.1rem). |
.blur-2 |
Adds moderate blur to the element (0.2rem). |
.blur-3 |
Adds heavy blur to the element (0.3rem). |
Grayscale Effects
| Shortcuts | Render |
|---|---|
.gray |
Converts the element to grayscale (no color). |
.gray-blur-1 |
Applies grayscale and a slight blur (0.1rem). |
.gray-blur-2 |
Applies grayscale and a moderate blur (0.2rem). |
.gray-blur-3 |
Applies grayscale and a heavy blur (0.3rem). |
Background Blur Effects
| Shortcuts | Render |
|---|---|
.bg-blur-1 |
Applies a slight blur to the background (0.1rem). |
.bg-blur-2 |
Applies a moderate blur to the background (0.2rem). |
.bg-blur-3 |
Applies a heavy blur to the background (0.3rem). |
Background Grayscale + Blur Effects
| Shortcuts | Render |
|---|---|
.bg-gray-blur-1 |
Applies grayscale and a slight blur to the background (0.1rem). |
.bg-gray-blur-2 |
Applies grayscale and a moderate blur to the background (0.2rem). |
.bg-gray-blur-3 |
Applies grayscale and a heavy blur to the background (0.3rem). |