create-flowmo 1.0.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/skills/outsystems-ui/SKILL.md +139 -20
- package/skills/outsystems-ui/assets/layout-base.html +108 -0
- package/skills/outsystems-ui/assets/layout-blank.html +30 -0
- package/skills/outsystems-ui/assets/layout-side.html +117 -0
- package/skills/outsystems-ui/assets/layout-template.html +53 -30
- package/skills/outsystems-ui/assets/layout-top.html +100 -0
- package/skills/outsystems-ui/references/screen-templates.md +259 -33
- package/skills/outsystems-ui/references/ui-patterns.md +1253 -0
- package/template/screens/home.visual.html +55 -20
- package/skills/outsystems-ui/references/patterns-adaptive.md +0 -178
- package/skills/outsystems-ui/references/patterns-content.md +0 -242
- package/skills/outsystems-ui/references/patterns-interaction.md +0 -288
- package/skills/outsystems-ui/references/patterns-navigation.md +0 -180
- package/skills/outsystems-ui/references/patterns-numbers.md +0 -94
- package/skills/outsystems-ui/references/patterns-utilities.md +0 -124
- package/skills/outsystems-ui/references/widgets.md +0 -270
|
@@ -7,30 +7,65 @@
|
|
|
7
7
|
<link rel="stylesheet" href="../theme/outsystems-ui.css">
|
|
8
8
|
<link rel="stylesheet" href="../theme/theme.css">
|
|
9
9
|
</head>
|
|
10
|
-
<body>
|
|
11
|
-
<div class="
|
|
12
|
-
<
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
10
|
+
<body class="desktop">
|
|
11
|
+
<div class="active-screen">
|
|
12
|
+
<div data-block="Layouts.LayoutTopMenu" class="layout layout-top fixed-header">
|
|
13
|
+
<div class="main">
|
|
14
|
+
|
|
15
|
+
<!-- Header -->
|
|
16
|
+
<header role="banner" class="header">
|
|
17
|
+
<div class="header-top ThemeGrid_Container">
|
|
18
|
+
<div class="header-content display-flex">
|
|
19
|
+
<div class="menu-icon" role="button" aria-label="Toggle the Menu" aria-haspopup="true">
|
|
20
|
+
<div class="menu-icon-line" aria-hidden="true"></div>
|
|
21
|
+
<div class="menu-icon-line" aria-hidden="true"></div>
|
|
22
|
+
<div class="menu-icon-line" aria-hidden="true"></div>
|
|
23
|
+
</div>
|
|
24
|
+
<div class="header-navigation">
|
|
25
|
+
<nav class="app-menu-content display-flex" role="navigation">
|
|
26
|
+
<div class="header-logo">
|
|
27
|
+
<div class="application-name display-flex align-items-center full-height">
|
|
28
|
+
<span class="heading6 text-neutral-8">My App</span>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="app-menu-links" role="menubar">
|
|
32
|
+
<a class="active" role="menuitem" href="#">Home</a>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="app-login-info">
|
|
35
|
+
<div class="user-info">
|
|
36
|
+
<div class="padding-y-base display-flex align-items-center">
|
|
37
|
+
<span>User</span>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</nav>
|
|
42
|
+
<div class="app-menu-overlay" role="button" aria-label="Close Menu"></div>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
</header>
|
|
47
|
+
|
|
48
|
+
<!-- Content -->
|
|
49
|
+
<div class="content">
|
|
50
|
+
<div class="main-content ThemeGrid_Container" role="main">
|
|
51
|
+
<div class="content-top display-flex align-items-center">
|
|
52
|
+
<div class="content-top-title heading1">Welcome</div>
|
|
53
|
+
</div>
|
|
54
|
+
<div class="content-middle">
|
|
55
|
+
<p class="paragraph">Start building your screen here. Open this file in the Visual Inspector to see the layer structure.</p>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
19
58
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
59
|
+
<!-- Footer -->
|
|
60
|
+
<footer role="contentinfo" class="content-bottom">
|
|
61
|
+
<div class="footer ThemeGrid_Container">
|
|
62
|
+
<p class="paragraph text-neutral-6">Built with Flowmo</p>
|
|
63
|
+
</div>
|
|
64
|
+
</footer>
|
|
25
65
|
</div>
|
|
26
|
-
</section>
|
|
27
|
-
</main>
|
|
28
66
|
|
|
29
|
-
<footer class="footer">
|
|
30
|
-
<div class="container">
|
|
31
|
-
<p class="paragraph text-neutral-6">Built with Flowmo</p>
|
|
32
67
|
</div>
|
|
33
|
-
</
|
|
68
|
+
</div>
|
|
34
69
|
</div>
|
|
35
70
|
</body>
|
|
36
71
|
</html>
|
|
@@ -1,178 +0,0 @@
|
|
|
1
|
-
# OutSystems UI — Adaptive Patterns (12)
|
|
2
|
-
|
|
3
|
-
Layout and responsive patterns for building multi-column, device-aware, and master-detail screens.
|
|
4
|
-
|
|
5
|
-
## Columns2
|
|
6
|
-
|
|
7
|
-
Two equal-width columns that auto-stack on mobile.
|
|
8
|
-
|
|
9
|
-
```html
|
|
10
|
-
<div class="columns2">
|
|
11
|
-
<div class="column">{{content-left}}</div>
|
|
12
|
-
<div class="column">{{content-right}}</div>
|
|
13
|
-
</div>
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
**Mandatory classes**: `.columns2`, `.column`
|
|
17
|
-
|
|
18
|
-
## Columns3
|
|
19
|
-
|
|
20
|
-
```html
|
|
21
|
-
<div class="columns3">
|
|
22
|
-
<div class="column">{{content-1}}</div>
|
|
23
|
-
<div class="column">{{content-2}}</div>
|
|
24
|
-
<div class="column">{{content-3}}</div>
|
|
25
|
-
</div>
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
**Mandatory classes**: `.columns3`, `.column`
|
|
29
|
-
|
|
30
|
-
## Columns4
|
|
31
|
-
|
|
32
|
-
```html
|
|
33
|
-
<div class="columns4">
|
|
34
|
-
<div class="column">{{content-1}}</div>
|
|
35
|
-
<div class="column">{{content-2}}</div>
|
|
36
|
-
<div class="column">{{content-3}}</div>
|
|
37
|
-
<div class="column">{{content-4}}</div>
|
|
38
|
-
</div>
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
**Mandatory classes**: `.columns4`, `.column`
|
|
42
|
-
|
|
43
|
-
## Columns5
|
|
44
|
-
|
|
45
|
-
```html
|
|
46
|
-
<div class="columns5">
|
|
47
|
-
<div class="column">{{content-1}}</div>
|
|
48
|
-
<div class="column">{{content-2}}</div>
|
|
49
|
-
<div class="column">{{content-3}}</div>
|
|
50
|
-
<div class="column">{{content-4}}</div>
|
|
51
|
-
<div class="column">{{content-5}}</div>
|
|
52
|
-
</div>
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
**Mandatory classes**: `.columns5`, `.column`
|
|
56
|
-
|
|
57
|
-
## Columns6
|
|
58
|
-
|
|
59
|
-
```html
|
|
60
|
-
<div class="columns6">
|
|
61
|
-
<div class="column">{{content-1}}</div>
|
|
62
|
-
<div class="column">{{content-2}}</div>
|
|
63
|
-
<div class="column">{{content-3}}</div>
|
|
64
|
-
<div class="column">{{content-4}}</div>
|
|
65
|
-
<div class="column">{{content-5}}</div>
|
|
66
|
-
<div class="column">{{content-6}}</div>
|
|
67
|
-
</div>
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
**Mandatory classes**: `.columns6`, `.column`
|
|
71
|
-
|
|
72
|
-
## Columns Medium Left
|
|
73
|
-
|
|
74
|
-
Asymmetric — left column is wider (medium-sized), right is narrow.
|
|
75
|
-
|
|
76
|
-
```html
|
|
77
|
-
<div class="columns-medium-left">
|
|
78
|
-
<div class="column">{{content-main}}</div>
|
|
79
|
-
<div class="column">{{content-aside}}</div>
|
|
80
|
-
</div>
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
**Mandatory classes**: `.columns-medium-left`, `.column`
|
|
84
|
-
|
|
85
|
-
## Columns Medium Right
|
|
86
|
-
|
|
87
|
-
Asymmetric — left is narrow, right column is wider.
|
|
88
|
-
|
|
89
|
-
```html
|
|
90
|
-
<div class="columns-medium-right">
|
|
91
|
-
<div class="column">{{content-aside}}</div>
|
|
92
|
-
<div class="column">{{content-main}}</div>
|
|
93
|
-
</div>
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
**Mandatory classes**: `.columns-medium-right`, `.column`
|
|
97
|
-
|
|
98
|
-
## Columns Small Left
|
|
99
|
-
|
|
100
|
-
Left column is narrow sidebar, right column takes remaining space.
|
|
101
|
-
|
|
102
|
-
```html
|
|
103
|
-
<div class="columns-small-left">
|
|
104
|
-
<div class="column">{{content-sidebar}}</div>
|
|
105
|
-
<div class="column">{{content-main}}</div>
|
|
106
|
-
</div>
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
**Mandatory classes**: `.columns-small-left`, `.column`
|
|
110
|
-
|
|
111
|
-
## Columns Small Right
|
|
112
|
-
|
|
113
|
-
Left column takes most space, right column is narrow.
|
|
114
|
-
|
|
115
|
-
```html
|
|
116
|
-
<div class="columns-small-right">
|
|
117
|
-
<div class="column">{{content-main}}</div>
|
|
118
|
-
<div class="column">{{content-sidebar}}</div>
|
|
119
|
-
</div>
|
|
120
|
-
```
|
|
121
|
-
|
|
122
|
-
**Mandatory classes**: `.columns-small-right`, `.column`
|
|
123
|
-
|
|
124
|
-
## Display On Device
|
|
125
|
-
|
|
126
|
-
Show or hide content based on device type.
|
|
127
|
-
|
|
128
|
-
```html
|
|
129
|
-
<div class="display-desktop">{{desktop-only-content}}</div>
|
|
130
|
-
<div class="display-tablet">{{tablet-only-content}}</div>
|
|
131
|
-
<div class="display-phone">{{phone-only-content}}</div>
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
**Classes**: `.display-desktop`, `.display-tablet`, `.display-phone`
|
|
135
|
-
|
|
136
|
-
## Gallery
|
|
137
|
-
|
|
138
|
-
Responsive grid with configurable columns per breakpoint.
|
|
139
|
-
|
|
140
|
-
```html
|
|
141
|
-
<div class="gallery" style="
|
|
142
|
-
--grid-desktop: 4;
|
|
143
|
-
--grid-tablet: 2;
|
|
144
|
-
--grid-phone: 1;
|
|
145
|
-
--grid-gap: var(--space-base);
|
|
146
|
-
">
|
|
147
|
-
<div class="gallery-item">{{content-1}}</div>
|
|
148
|
-
<div class="gallery-item">{{content-2}}</div>
|
|
149
|
-
<div class="gallery-item">{{content-3}}</div>
|
|
150
|
-
<div class="gallery-item">{{content-4}}</div>
|
|
151
|
-
</div>
|
|
152
|
-
```
|
|
153
|
-
|
|
154
|
-
**Mandatory classes**: `.gallery`, `.gallery-item`
|
|
155
|
-
**CSS Variables**: `--grid-desktop`, `--grid-tablet`, `--grid-phone`, `--grid-gap`
|
|
156
|
-
|
|
157
|
-
## Master Detail
|
|
158
|
-
|
|
159
|
-
Side-by-side layout for list + detail views. Common for entity list screens.
|
|
160
|
-
|
|
161
|
-
```html
|
|
162
|
-
<div class="master-detail" style="
|
|
163
|
-
--master-detail-height: 600px;
|
|
164
|
-
--left-percentage: 50;
|
|
165
|
-
">
|
|
166
|
-
<div class="master-detail-list">{{list-content}}</div>
|
|
167
|
-
<div class="master-detail-detail">{{detail-content}}</div>
|
|
168
|
-
</div>
|
|
169
|
-
```
|
|
170
|
-
|
|
171
|
-
**Mandatory classes**: `.master-detail`, `.master-detail-list`, `.master-detail-detail`
|
|
172
|
-
**CSS Variables**: `--master-detail-height`, `--left-percentage` (default: 50)
|
|
173
|
-
|
|
174
|
-
## Notes
|
|
175
|
-
|
|
176
|
-
- All column patterns auto-stack on phone breakpoints. Do NOT add custom `@media` queries.
|
|
177
|
-
- Column patterns use flexbox internally. Child `.column` elements stretch to equal height by default.
|
|
178
|
-
- Gallery is CSS Grid-based and the most flexible option for card-heavy layouts.
|
|
@@ -1,242 +0,0 @@
|
|
|
1
|
-
# OutSystems UI — Content Patterns (16)
|
|
2
|
-
|
|
3
|
-
Patterns for displaying content: cards, alerts, sections, and informational elements.
|
|
4
|
-
|
|
5
|
-
## Accordion
|
|
6
|
-
|
|
7
|
-
Expandable/collapsible sections. Each item has a title and content area.
|
|
8
|
-
|
|
9
|
-
```html
|
|
10
|
-
<div class="osui-accordion">
|
|
11
|
-
<div class="osui-accordion__item">
|
|
12
|
-
<div class="osui-accordion__item__header">
|
|
13
|
-
<span class="osui-accordion__item__header__title">{{title}}</span>
|
|
14
|
-
<span class="osui-accordion__item__header__icon"></span>
|
|
15
|
-
</div>
|
|
16
|
-
<div class="osui-accordion__item__content">{{content}}</div>
|
|
17
|
-
</div>
|
|
18
|
-
</div>
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
**Mandatory classes**: `.osui-accordion`, `.osui-accordion__item`, `__header`, `__content`
|
|
22
|
-
|
|
23
|
-
## Alert
|
|
24
|
-
|
|
25
|
-
Inline feedback message with semantic color.
|
|
26
|
-
|
|
27
|
-
```html
|
|
28
|
-
<div class="osui-alert osui-alert--{type}">
|
|
29
|
-
<div class="osui-alert__content">{{message}}</div>
|
|
30
|
-
<div class="osui-alert__close"></div>
|
|
31
|
-
</div>
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
**Types**: Replace `{type}` with `info`, `success`, `warning`, `error`
|
|
35
|
-
**Mandatory classes**: `.osui-alert`, `.osui-alert--{type}`
|
|
36
|
-
|
|
37
|
-
## Blank Slate
|
|
38
|
-
|
|
39
|
-
Empty state placeholder — use when a list or section has no data.
|
|
40
|
-
|
|
41
|
-
```html
|
|
42
|
-
<div class="blank-slate">
|
|
43
|
-
<div class="blank-slate-image">{{icon-or-image}}</div>
|
|
44
|
-
<div class="blank-slate-content">
|
|
45
|
-
<h5>{{title}}</h5>
|
|
46
|
-
<p>{{description}}</p>
|
|
47
|
-
</div>
|
|
48
|
-
<div class="blank-slate-footer">{{action-button}}</div>
|
|
49
|
-
</div>
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
**Mandatory classes**: `.blank-slate`
|
|
53
|
-
|
|
54
|
-
## Card
|
|
55
|
-
|
|
56
|
-
The most common content container. Adds elevation and padding.
|
|
57
|
-
|
|
58
|
-
```html
|
|
59
|
-
<div class="card">
|
|
60
|
-
<div class="card-header">{{header}}</div>
|
|
61
|
-
<div class="card-content">{{content}}</div>
|
|
62
|
-
<div class="card-footer">{{footer}}</div>
|
|
63
|
-
</div>
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
**Mandatory classes**: `.card`
|
|
67
|
-
**Optional sections**: `.card-header`, `.card-content`, `.card-footer`
|
|
68
|
-
|
|
69
|
-
## Card Background
|
|
70
|
-
|
|
71
|
-
Card with a background image. Content overlays the image.
|
|
72
|
-
|
|
73
|
-
```html
|
|
74
|
-
<div class="card-background" style="background-image: url('{{image-url}}');">
|
|
75
|
-
<div class="card-background-content">
|
|
76
|
-
<h4>{{title}}</h4>
|
|
77
|
-
<p>{{description}}</p>
|
|
78
|
-
</div>
|
|
79
|
-
</div>
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
**Mandatory classes**: `.card-background`, `.card-background-content`
|
|
83
|
-
|
|
84
|
-
## Card Item
|
|
85
|
-
|
|
86
|
-
Compact card variant used inside lists. Typically has an image + text side by side.
|
|
87
|
-
|
|
88
|
-
```html
|
|
89
|
-
<div class="card-item">
|
|
90
|
-
<div class="card-item-image">{{image}}</div>
|
|
91
|
-
<div class="card-item-content">
|
|
92
|
-
<div class="card-item-title">{{title}}</div>
|
|
93
|
-
<div class="card-item-description">{{description}}</div>
|
|
94
|
-
</div>
|
|
95
|
-
</div>
|
|
96
|
-
```
|
|
97
|
-
|
|
98
|
-
**Mandatory classes**: `.card-item`
|
|
99
|
-
|
|
100
|
-
## Card Sectioned
|
|
101
|
-
|
|
102
|
-
Card divided into distinct sections with dividers.
|
|
103
|
-
|
|
104
|
-
```html
|
|
105
|
-
<div class="card-sectioned">
|
|
106
|
-
<div class="card-sectioned-item">{{section-1}}</div>
|
|
107
|
-
<div class="card-sectioned-item">{{section-2}}</div>
|
|
108
|
-
<div class="card-sectioned-item">{{section-3}}</div>
|
|
109
|
-
</div>
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
**Mandatory classes**: `.card-sectioned`, `.card-sectioned-item`
|
|
113
|
-
|
|
114
|
-
## Chat Message
|
|
115
|
-
|
|
116
|
-
Message bubble for chat-style interfaces.
|
|
117
|
-
|
|
118
|
-
```html
|
|
119
|
-
<div class="chat-message">
|
|
120
|
-
<div class="chat-message-avatar">{{avatar}}</div>
|
|
121
|
-
<div class="chat-message-content">
|
|
122
|
-
<div class="chat-message-header">
|
|
123
|
-
<span class="chat-message-name">{{name}}</span>
|
|
124
|
-
<span class="chat-message-time">{{timestamp}}</span>
|
|
125
|
-
</div>
|
|
126
|
-
<div class="chat-message-text">{{message}}</div>
|
|
127
|
-
</div>
|
|
128
|
-
</div>
|
|
129
|
-
```
|
|
130
|
-
|
|
131
|
-
**Mandatory classes**: `.chat-message`
|
|
132
|
-
**Variants**: Add `.chat-message--right` for outgoing messages.
|
|
133
|
-
|
|
134
|
-
## Flip Content
|
|
135
|
-
|
|
136
|
-
Two-sided content that flips on hover or click.
|
|
137
|
-
|
|
138
|
-
```html
|
|
139
|
-
<div class="flip-content">
|
|
140
|
-
<div class="flip-content-front">{{front-content}}</div>
|
|
141
|
-
<div class="flip-content-back">{{back-content}}</div>
|
|
142
|
-
</div>
|
|
143
|
-
```
|
|
144
|
-
|
|
145
|
-
**Mandatory classes**: `.flip-content`, `.flip-content-front`, `.flip-content-back`
|
|
146
|
-
|
|
147
|
-
## Floating Content
|
|
148
|
-
|
|
149
|
-
Content that overlays the page in a fixed/floating position.
|
|
150
|
-
|
|
151
|
-
```html
|
|
152
|
-
<div class="floating-content">
|
|
153
|
-
{{content}}
|
|
154
|
-
</div>
|
|
155
|
-
```
|
|
156
|
-
|
|
157
|
-
**Mandatory classes**: `.floating-content`
|
|
158
|
-
|
|
159
|
-
## List Item Content
|
|
160
|
-
|
|
161
|
-
Structured list item with image, text, and optional right action.
|
|
162
|
-
|
|
163
|
-
```html
|
|
164
|
-
<div class="list-item-content">
|
|
165
|
-
<div class="list-item-content-left">{{image-or-icon}}</div>
|
|
166
|
-
<div class="list-item-content-center">
|
|
167
|
-
<div class="list-item-content-title">{{title}}</div>
|
|
168
|
-
<div class="list-item-content-description">{{description}}</div>
|
|
169
|
-
</div>
|
|
170
|
-
<div class="list-item-content-right">{{action}}</div>
|
|
171
|
-
</div>
|
|
172
|
-
```
|
|
173
|
-
|
|
174
|
-
**Mandatory classes**: `.list-item-content`
|
|
175
|
-
|
|
176
|
-
## Section
|
|
177
|
-
|
|
178
|
-
Groups related content under a heading.
|
|
179
|
-
|
|
180
|
-
```html
|
|
181
|
-
<div class="section">
|
|
182
|
-
<div class="section-header">
|
|
183
|
-
<h5 class="section-title">{{title}}</h5>
|
|
184
|
-
</div>
|
|
185
|
-
<div class="section-content">{{content}}</div>
|
|
186
|
-
</div>
|
|
187
|
-
```
|
|
188
|
-
|
|
189
|
-
**Mandatory classes**: `.section`
|
|
190
|
-
|
|
191
|
-
## Section Group
|
|
192
|
-
|
|
193
|
-
Container for multiple Sections with consistent spacing.
|
|
194
|
-
|
|
195
|
-
```html
|
|
196
|
-
<div class="section-group">
|
|
197
|
-
<div class="section">{{section-1}}</div>
|
|
198
|
-
<div class="section">{{section-2}}</div>
|
|
199
|
-
</div>
|
|
200
|
-
```
|
|
201
|
-
|
|
202
|
-
**Mandatory classes**: `.section-group`
|
|
203
|
-
|
|
204
|
-
## Tag
|
|
205
|
-
|
|
206
|
-
Small label/badge for categorization.
|
|
207
|
-
|
|
208
|
-
```html
|
|
209
|
-
<span class="tag">{{label}}</span>
|
|
210
|
-
```
|
|
211
|
-
|
|
212
|
-
**Mandatory classes**: `.tag`
|
|
213
|
-
**Color variants**: Combine with `.background-primary`, `.background-success`, etc.
|
|
214
|
-
**Shape**: Add `.border-radius-rounded` for pill shape.
|
|
215
|
-
|
|
216
|
-
## Tooltip
|
|
217
|
-
|
|
218
|
-
Information popup on hover.
|
|
219
|
-
|
|
220
|
-
```html
|
|
221
|
-
<div class="osui-tooltip">
|
|
222
|
-
<div class="osui-tooltip__trigger">{{trigger-element}}</div>
|
|
223
|
-
<div class="osui-tooltip__content">{{tooltip-text}}</div>
|
|
224
|
-
</div>
|
|
225
|
-
```
|
|
226
|
-
|
|
227
|
-
**Mandatory classes**: `.osui-tooltip`
|
|
228
|
-
**Position**: Add `.osui-tooltip--top`, `.osui-tooltip--bottom`, `.osui-tooltip--left`, `.osui-tooltip--right`
|
|
229
|
-
|
|
230
|
-
## User Avatar
|
|
231
|
-
|
|
232
|
-
Circular user image with optional initials fallback.
|
|
233
|
-
|
|
234
|
-
```html
|
|
235
|
-
<div class="user-avatar">
|
|
236
|
-
<img src="{{image-url}}" alt="{{name}}" />
|
|
237
|
-
</div>
|
|
238
|
-
```
|
|
239
|
-
|
|
240
|
-
**Mandatory classes**: `.user-avatar`
|
|
241
|
-
**Sizes**: `.user-avatar--small`, `.user-avatar--medium` (default), `.user-avatar--large`
|
|
242
|
-
**Fallback**: Use initials text inside the div when no image is available.
|