@iress-oss/ids-mcp-server 5.15.0 → 6.0.0-alpha.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/generated/docs/components-alert-docs.md +579 -7
- package/generated/docs/components-autocomplete-docs.md +694 -15
- package/generated/docs/components-autocomplete-recipes-docs.md +1 -1
- package/generated/docs/components-badge-docs.md +442 -59
- package/generated/docs/components-button-docs.md +1150 -70
- package/generated/docs/components-buttongroup-docs.md +441 -3
- package/generated/docs/components-card-docs.md +487 -37
- package/generated/docs/components-checkbox-docs.md +506 -5
- package/generated/docs/components-checkboxgroup-docs.md +586 -191
- package/generated/docs/components-checkboxgroup-recipes-docs.md +3 -3
- package/generated/docs/components-col-docs.md +451 -36
- package/generated/docs/components-container-docs.md +32 -0
- package/generated/docs/components-divider-docs.md +427 -27
- package/generated/docs/components-expander-docs.md +487 -108
- package/generated/docs/components-field-docs.md +1400 -68
- package/generated/docs/components-filter-docs.md +268 -55
- package/generated/docs/components-hide-docs.md +447 -10
- package/generated/docs/components-icon-docs.md +522 -259
- package/generated/docs/components-image-docs.md +493 -0
- package/generated/docs/components-inline-docs.md +1179 -44
- package/generated/docs/components-input-docs.md +544 -12
- package/generated/docs/components-input-recipes-docs.md +4 -4
- package/generated/docs/components-inputcurrency-docs.md +532 -0
- package/generated/docs/components-inputcurrency-recipes-docs.md +4 -5
- package/generated/docs/components-introduction-docs.md +450 -0
- package/generated/docs/components-label-docs.md +454 -27
- package/generated/docs/components-link-docs.md +586 -0
- package/generated/docs/components-menu-docs.md +531 -89
- package/generated/docs/components-menu-menuitem-docs.md +556 -10
- package/generated/docs/components-modal-docs.md +814 -55
- package/generated/docs/components-panel-docs.md +418 -198
- package/generated/docs/components-placeholder-docs.md +420 -1
- package/generated/docs/components-popover-docs.md +1097 -32
- package/generated/docs/components-popover-recipes-docs.md +39 -73
- package/generated/docs/components-progress-docs.md +464 -0
- package/generated/docs/components-provider-docs.md +57 -2
- package/generated/docs/components-radio-docs.md +460 -4
- package/generated/docs/components-radiogroup-docs.md +586 -116
- package/generated/docs/components-readonly-docs.md +450 -4
- package/generated/docs/components-richselect-docs.md +4660 -1257
- package/generated/docs/components-row-docs.md +2065 -588
- package/generated/docs/components-select-docs.md +489 -5
- package/generated/docs/components-skeleton-docs.md +399 -16
- package/generated/docs/components-skeleton-recipes-docs.md +7 -7
- package/generated/docs/components-skiplink-docs.md +548 -27
- package/generated/docs/components-slideout-docs.md +648 -150
- package/generated/docs/components-slider-docs.md +515 -33
- package/generated/docs/components-spinner-docs.md +393 -2
- package/generated/docs/components-stack-docs.md +732 -74
- package/generated/docs/components-table-ag-grid-docs.md +497 -127
- package/generated/docs/components-table-docs.md +1049 -27
- package/generated/docs/components-tabset-docs.md +454 -27
- package/generated/docs/components-tabset-tab-docs.md +464 -0
- package/generated/docs/components-tag-docs.md +452 -19
- package/generated/docs/components-text-docs.md +322 -131
- package/generated/docs/components-toaster-docs.md +463 -53
- package/generated/docs/components-toggle-docs.md +476 -20
- package/generated/docs/components-tooltip-docs.md +443 -7
- package/generated/docs/components-validationmessage-docs.md +933 -13
- package/generated/docs/extensions-editor-docs.md +906 -13
- package/generated/docs/extensions-editor-recipes-docs.md +51 -1
- package/generated/docs/foundations-accessibility-docs.md +1 -23
- package/generated/docs/foundations-grid-docs.md +74 -0
- package/generated/docs/foundations-introduction-docs.md +6 -4
- package/generated/docs/foundations-responsive-breakpoints-docs.md +193 -0
- package/generated/docs/foundations-tokens-colour-docs.md +564 -0
- package/generated/docs/foundations-tokens-elevation-docs.md +155 -0
- package/generated/docs/foundations-tokens-introduction-docs.md +190 -0
- package/generated/docs/foundations-tokens-radius-docs.md +71 -0
- package/generated/docs/foundations-tokens-spacing-docs.md +89 -0
- package/generated/docs/foundations-tokens-typography-docs.md +322 -0
- package/generated/docs/foundations-z-index-stacking-docs.md +31 -0
- package/generated/docs/guidelines.md +1537 -295
- package/generated/docs/introduction-docs.md +65 -21
- package/generated/docs/news-version-6-docs.md +93 -0
- package/generated/docs/patterns-form-docs.md +3902 -0
- package/generated/docs/patterns-form-recipes-docs.md +1370 -0
- package/generated/docs/patterns-introduction-docs.md +24 -0
- package/generated/docs/patterns-loading-docs.md +2940 -201
- package/generated/docs/resources-introduction-docs.md +38 -0
- package/generated/docs/resources-mcp-server-docs.md +27 -0
- package/generated/docs/styling-props-colour-docs.md +172 -0
- package/generated/docs/styling-props-elevation-docs.md +88 -0
- package/generated/docs/styling-props-radius-docs.md +86 -0
- package/generated/docs/styling-props-reference-docs.md +160 -0
- package/generated/docs/styling-props-screen-readers-docs.md +71 -0
- package/generated/docs/styling-props-sizing-docs.md +627 -0
- package/generated/docs/styling-props-spacing-docs.md +2282 -0
- package/generated/docs/styling-props-typography-docs.md +121 -0
- package/generated/docs/themes-available-themes-docs.md +29 -29
- package/generated/docs/themes-introduction-docs.md +1 -1
- package/package.json +3 -22
- package/generated/docs/components-button-recipes-docs.md +0 -76
- package/generated/docs/components-card-recipes-docs.md +0 -89
- package/generated/docs/components-combobox-docs.md +0 -1016
- package/generated/docs/components-form-docs.md +0 -2410
- package/generated/docs/components-form-recipes-docs.md +0 -886
- package/generated/docs/components-navbar-docs.md +0 -291
- package/generated/docs/components-navbar-recipes-docs.md +0 -413
- package/generated/docs/components-toaster-toast-docs.md +0 -157
- package/generated/docs/foundations-colours-docs.md +0 -257
- package/generated/docs/foundations-typography-docs.md +0 -191
- package/generated/docs/resources-changelog-docs.md +0 -6
- package/generated/docs/themes-tokens-docs.md +0 -1200
|
@@ -1,257 +0,0 @@
|
|
|
1
|
-
[](#colours)Colours
|
|
2
|
-
===================
|
|
3
|
-
|
|
4
|
-
Colour is an integral aspect of conveying clear concise data. Our colours are optimized across two backgrounds, meeting or exceeding [WCAG 2.1 Level AA Accessibility Guidelines](https://www.w3.org/TR/WCAG21/#contrast-minimum).
|
|
5
|
-
|
|
6
|
-
The Iress themes are designed to meet WCAG contrast guidelines (2.1 AA). We can't guarantee this when consumer branding is applied, so colour combinations should be checked to ensure conformance.
|
|
7
|
-
|
|
8
|
-
[](#backgrounds)Backgrounds
|
|
9
|
-
---------------------------
|
|
10
|
-
|
|
11
|
-
### Default Background
|
|
12
|
-
|
|
13
|
-
\--iress-g-background-color
|
|
14
|
-
|
|
15
|
-
Used for the default panel background.
|
|
16
|
-
|
|
17
|
-
#### Allowed foregrounds
|
|
18
|
-
|
|
19
|
-
* \--iress-g-text-color
|
|
20
|
-
|
|
21
|
-
9.7 AAA
|
|
22
|
-
|
|
23
|
-
* \--iress-g-muted-text-color
|
|
24
|
-
|
|
25
|
-
5.4 AA
|
|
26
|
-
|
|
27
|
-
* \--iress-g-info-color
|
|
28
|
-
|
|
29
|
-
5.4 AA
|
|
30
|
-
|
|
31
|
-
* \--iress-g-success-color
|
|
32
|
-
|
|
33
|
-
5.4 AA
|
|
34
|
-
|
|
35
|
-
* \--iress-g-warning-color
|
|
36
|
-
|
|
37
|
-
5.6 AA
|
|
38
|
-
|
|
39
|
-
* \--iress-g-danger-color
|
|
40
|
-
|
|
41
|
-
5.4 AA
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
### Page Background
|
|
45
|
-
|
|
46
|
-
\--iress-g-page-background-color
|
|
47
|
-
|
|
48
|
-
The background colour of the page.
|
|
49
|
-
|
|
50
|
-
#### Allowed foregrounds
|
|
51
|
-
|
|
52
|
-
* \--iress-g-text-color
|
|
53
|
-
|
|
54
|
-
10.4 AAA
|
|
55
|
-
|
|
56
|
-
* \--iress-g-muted-text-color
|
|
57
|
-
|
|
58
|
-
5.7 AA
|
|
59
|
-
|
|
60
|
-
* \--iress-g-info-color
|
|
61
|
-
|
|
62
|
-
5.8 AA
|
|
63
|
-
|
|
64
|
-
* \--iress-g-success-color
|
|
65
|
-
|
|
66
|
-
5.8 AA
|
|
67
|
-
|
|
68
|
-
* \--iress-g-warning-color
|
|
69
|
-
|
|
70
|
-
6.0 AA
|
|
71
|
-
|
|
72
|
-
* \--iress-g-danger-color
|
|
73
|
-
|
|
74
|
-
5.8 AA
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
### Alt Background
|
|
78
|
-
|
|
79
|
-
\--iress-g-background-color-alt
|
|
80
|
-
|
|
81
|
-
Used for the alt panel background.
|
|
82
|
-
|
|
83
|
-
#### Allowed foregrounds
|
|
84
|
-
|
|
85
|
-
* \--iress-g-text-color
|
|
86
|
-
|
|
87
|
-
8.2 AAA
|
|
88
|
-
|
|
89
|
-
* \--iress-g-muted-text-color
|
|
90
|
-
|
|
91
|
-
4.5 AA
|
|
92
|
-
|
|
93
|
-
* \--iress-g-info-color
|
|
94
|
-
|
|
95
|
-
4.6 AA
|
|
96
|
-
|
|
97
|
-
* \--iress-g-success-color
|
|
98
|
-
|
|
99
|
-
4.5 AA
|
|
100
|
-
|
|
101
|
-
* \--iress-g-warning-color
|
|
102
|
-
|
|
103
|
-
4.7 AA
|
|
104
|
-
|
|
105
|
-
* \--iress-g-danger-color
|
|
106
|
-
|
|
107
|
-
4.5 AA
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
### Hover Background
|
|
111
|
-
|
|
112
|
-
\--iress-g-hover-background-color
|
|
113
|
-
|
|
114
|
-
Used for the hover and active state of elements such as tables, button groups, expanders, checkboxes and more.
|
|
115
|
-
|
|
116
|
-
#### Allowed foregrounds
|
|
117
|
-
|
|
118
|
-
* \--iress-g-text-color
|
|
119
|
-
|
|
120
|
-
9.3 AAA
|
|
121
|
-
|
|
122
|
-
* \--iress-g-muted-text-color
|
|
123
|
-
|
|
124
|
-
5.1 AA
|
|
125
|
-
|
|
126
|
-
* \--iress-g-info-color
|
|
127
|
-
|
|
128
|
-
5.2 AA
|
|
129
|
-
|
|
130
|
-
* \--iress-g-success-color
|
|
131
|
-
|
|
132
|
-
5.1 AA
|
|
133
|
-
|
|
134
|
-
* \--iress-g-warning-color
|
|
135
|
-
|
|
136
|
-
5.3 AA
|
|
137
|
-
|
|
138
|
-
* \--iress-g-danger-color
|
|
139
|
-
|
|
140
|
-
5.1 AA
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
[](#primary)Primary
|
|
144
|
-
-------------------
|
|
145
|
-
|
|
146
|
-
### Primary
|
|
147
|
-
|
|
148
|
-
\--iress-g-primary-color
|
|
149
|
-
|
|
150
|
-
Used for the background colour of primary buttons, and to highlight other interactive/featured elements.
|
|
151
|
-
|
|
152
|
-
#### Allowed foregrounds
|
|
153
|
-
|
|
154
|
-
* \--iress-g-primary-contrast-color
|
|
155
|
-
|
|
156
|
-
10.7 AAA
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
### Primary Hover
|
|
160
|
-
|
|
161
|
-
\--iress-g-primary-hover-color
|
|
162
|
-
|
|
163
|
-
Used for the hover state of primary buttons.
|
|
164
|
-
|
|
165
|
-
#### Allowed foregrounds
|
|
166
|
-
|
|
167
|
-
* \--iress-g-primary-contrast-color
|
|
168
|
-
|
|
169
|
-
15.5 AAA
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
[](#system)System
|
|
173
|
-
-----------------
|
|
174
|
-
|
|
175
|
-
### Info
|
|
176
|
-
|
|
177
|
-
\--iress-g-info-color
|
|
178
|
-
|
|
179
|
-
Used to indicate an element that provides information, usually an element without an action. Used in alerts and badges.
|
|
180
|
-
|
|
181
|
-
#### Allowed foregrounds
|
|
182
|
-
|
|
183
|
-
* \--iress-g-info-contrast-color
|
|
184
|
-
|
|
185
|
-
5.8 AA
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
### Danger
|
|
189
|
-
|
|
190
|
-
\--iress-g-danger-color
|
|
191
|
-
|
|
192
|
-
Used to indicate an error that requires the user's attention and action. Used in alerts and badges.
|
|
193
|
-
|
|
194
|
-
#### Allowed foregrounds
|
|
195
|
-
|
|
196
|
-
* \--iress-g-danger-contrast-color
|
|
197
|
-
|
|
198
|
-
5.8 AA
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
### Warning
|
|
202
|
-
|
|
203
|
-
\--iress-g-warning-color
|
|
204
|
-
|
|
205
|
-
Used to indicate an action/information that may have consequences. Used in alerts and badges.
|
|
206
|
-
|
|
207
|
-
#### Allowed foregrounds
|
|
208
|
-
|
|
209
|
-
* \--iress-g-warning-contrast-color
|
|
210
|
-
|
|
211
|
-
6.0 AA
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
### Success
|
|
215
|
-
|
|
216
|
-
\--iress-g-success-color
|
|
217
|
-
|
|
218
|
-
Used to indicate a successful action. Used in alerts and badges.
|
|
219
|
-
|
|
220
|
-
#### Allowed foregrounds
|
|
221
|
-
|
|
222
|
-
* \--iress-g-success-contrast-color
|
|
223
|
-
|
|
224
|
-
5.8 AA
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
### Negative
|
|
228
|
-
|
|
229
|
-
\--iress-g-negative-color
|
|
230
|
-
|
|
231
|
-
Used to indicate an element that is below a threshold or limit. Usually used for trading to indicate a loss.
|
|
232
|
-
|
|
233
|
-
#### Allowed foregrounds
|
|
234
|
-
|
|
235
|
-
* \--iress-g-negative-contrast-color
|
|
236
|
-
|
|
237
|
-
5.8 AA
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
### Positive
|
|
241
|
-
|
|
242
|
-
\--iress-g-positive-color
|
|
243
|
-
|
|
244
|
-
Used to indicate an element that is above a threshold or limit. Usually used for trading to indicate a gain.
|
|
245
|
-
|
|
246
|
-
#### Allowed foregrounds
|
|
247
|
-
|
|
248
|
-
* \--iress-g-positive-contrast-color
|
|
249
|
-
|
|
250
|
-
5.5 AA
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
On this page
|
|
254
|
-
|
|
255
|
-
* [Backgrounds](#backgrounds)
|
|
256
|
-
* [Primary](#primary)
|
|
257
|
-
* [System](#system)
|
|
@@ -1,191 +0,0 @@
|
|
|
1
|
-
[](#typography)Typography
|
|
2
|
-
=========================
|
|
3
|
-
|
|
4
|
-
Typography is set up as part of the theming. Typography is controlled by the `IressText` component and the `iress-u-text` utility class. They implement consistent line heights and font weights.
|
|
5
|
-
|
|
6
|
-
Typography styles are designed to be encapsulated. If you want text to pick up the Iress styling, you'll need to wrap it in an `IressText` component.
|
|
7
|
-
|
|
8
|
-
[](#body)Body
|
|
9
|
-
-------------
|
|
10
|
-
|
|
11
|
-
This is the default text variant, and is designed to be clear and easy to read.
|
|
12
|
-
|
|
13
|
-
Nobis odit nesciunt in, harum provident deleniti molestiae dolorum aliquid tempora optio accusamus dolore porro voluptatibus. Dolorum, repellat expedita.
|
|
14
|
-
|
|
15
|
-
* Voluptatem assumenda soluta!
|
|
16
|
-
* Illum et atque alias possimus maiores rem in corrupti consectetur!
|
|
17
|
-
* Dolorum, repellat expedita!
|
|
18
|
-
|
|
19
|
-
Hide code
|
|
20
|
-
|
|
21
|
-
\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
|
|
22
|
-
|
|
23
|
-
<IressText\>
|
|
24
|
-
<p\>
|
|
25
|
-
Nobis odit nesciunt in, harum provident deleniti molestiae dolorum aliquid tempora optio accusamus dolore porro voluptatibus. Dolorum, repellat expedita. </p\>
|
|
26
|
-
<ul\>
|
|
27
|
-
<li\>
|
|
28
|
-
Voluptatem assumenda soluta! </li\>
|
|
29
|
-
<li\>
|
|
30
|
-
Illum et atque alias possimus maiores rem in corrupti consectetur! </li\>
|
|
31
|
-
<li\>
|
|
32
|
-
Dolorum, repellat expedita! </li\>
|
|
33
|
-
</ul\>
|
|
34
|
-
</IressText\>
|
|
35
|
-
|
|
36
|
-
Copy
|
|
37
|
-
|
|
38
|
-
[](#headings)Headings
|
|
39
|
-
---------------------
|
|
40
|
-
|
|
41
|
-
Headings form the structure of a web page. They're designed to stand out visually, drawing a user's eye to distinct sections of the document. They can be set in a variety of sizes based on systematic font sizing with native heading scales (H1-H6).
|
|
42
|
-
|
|
43
|
-
Hello, we are a company that puts clients first.
|
|
44
|
-
================================================
|
|
45
|
-
|
|
46
|
-
Hello, we are a company that puts clients first.
|
|
47
|
-
------------------------------------------------
|
|
48
|
-
|
|
49
|
-
### Hello, we are a company that puts clients first.
|
|
50
|
-
|
|
51
|
-
#### Hello, we are a company that puts clients first.
|
|
52
|
-
|
|
53
|
-
##### Hello, we are a company that puts clients first.
|
|
54
|
-
|
|
55
|
-
An H2 styled as an H3.
|
|
56
|
-
----------------------
|
|
57
|
-
|
|
58
|
-
Hide code
|
|
59
|
-
|
|
60
|
-
\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
|
|
61
|
-
|
|
62
|
-
<IressStack gutter\="md"\>
|
|
63
|
-
<IressText element\="h1"\>
|
|
64
|
-
Hello, we are a company that puts clients first. </IressText\>
|
|
65
|
-
<IressText element\="h2"\>
|
|
66
|
-
Hello, we are a company that puts clients first. </IressText\>
|
|
67
|
-
<IressText element\="h3"\>
|
|
68
|
-
Hello, we are a company that puts clients first. </IressText\>
|
|
69
|
-
<IressText element\="h4"\>
|
|
70
|
-
Hello, we are a company that puts clients first. </IressText\>
|
|
71
|
-
<IressText element\="h5"\>
|
|
72
|
-
Hello, we are a company that puts clients first. </IressText\>
|
|
73
|
-
<IressText
|
|
74
|
-
element\="h2"
|
|
75
|
-
variant\="h3"
|
|
76
|
-
\>
|
|
77
|
-
An H2 styled as an H3. </IressText\>
|
|
78
|
-
</IressStack\>
|
|
79
|
-
|
|
80
|
-
Copy
|
|
81
|
-
|
|
82
|
-
[](#display)Display
|
|
83
|
-
-------------------
|
|
84
|
-
|
|
85
|
-
Display text is used to draw attention to specific pieces of content, like introductory text on a landing page. It has larger font sizes than the heading variants, and a lighter font weight.
|
|
86
|
-
|
|
87
|
-
Hello, we are a company that puts clients first.
|
|
88
|
-
|
|
89
|
-
Hello, we are a company that puts clients first.
|
|
90
|
-
|
|
91
|
-
Hello, we are a company that puts clients first.
|
|
92
|
-
|
|
93
|
-
Hello, we are a company that puts clients first.
|
|
94
|
-
|
|
95
|
-
Hide code
|
|
96
|
-
|
|
97
|
-
\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
|
|
98
|
-
|
|
99
|
-
<IressStack gutter\="md"\>
|
|
100
|
-
<IressText variant\="display1"\>
|
|
101
|
-
Hello, we are a company that puts clients first. </IressText\>
|
|
102
|
-
<IressText variant\="display2"\>
|
|
103
|
-
Hello, we are a company that puts clients first. </IressText\>
|
|
104
|
-
<IressText variant\="display3"\>
|
|
105
|
-
Hello, we are a company that puts clients first. </IressText\>
|
|
106
|
-
<IressText variant\="display4"\>
|
|
107
|
-
Hello, we are a company that puts clients first. </IressText\>
|
|
108
|
-
</IressStack\>
|
|
109
|
-
|
|
110
|
-
Copy
|
|
111
|
-
|
|
112
|
-
[](#lead)Lead
|
|
113
|
-
-------------
|
|
114
|
-
|
|
115
|
-
Lead text is used to introduce users to a new section, and often gives a brief summary of a section. It has a larger font size than body text, but a lighter font weight so that it doesn't clash with headings.
|
|
116
|
-
|
|
117
|
-
Nobis odit nesciunt in, harum provident deleniti molestiae dolorum aliquid tempora optio accusamus dolore porro voluptatibus. Dolorum, repellat expedita.
|
|
118
|
-
|
|
119
|
-
Hide code
|
|
120
|
-
|
|
121
|
-
\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
|
|
122
|
-
|
|
123
|
-
<IressText
|
|
124
|
-
element\="p"
|
|
125
|
-
variant\="lead"
|
|
126
|
-
\>
|
|
127
|
-
Nobis odit nesciunt in, harum provident deleniti molestiae dolorum aliquid tempora optio accusamus dolore porro voluptatibus. Dolorum, repellat expedita.
|
|
128
|
-
</IressText\>
|
|
129
|
-
|
|
130
|
-
Copy
|
|
131
|
-
|
|
132
|
-
[](#caption)Caption
|
|
133
|
-
-------------------
|
|
134
|
-
|
|
135
|
-
The caption variant is used for small text that provides additional information about a table or image. It has a smaller font size than body text, and a lighter font weight.
|
|
136
|
-
|
|
137
|
-
Example caption
|
|
138
|
-
|
|
139
|
-
Hide code
|
|
140
|
-
|
|
141
|
-
\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
|
|
142
|
-
|
|
143
|
-
<IressText element\="caption"\>
|
|
144
|
-
Example caption
|
|
145
|
-
</IressText\>
|
|
146
|
-
|
|
147
|
-
Copy
|
|
148
|
-
|
|
149
|
-
[](#other-variants)Other variants
|
|
150
|
-
---------------------------------
|
|
151
|
-
|
|
152
|
-
IDS also includes bold, italic and small text variants.
|
|
153
|
-
|
|
154
|
-
* Bold text should be used to **draw attention** to part of a sentence, or to provide a visual label for readonly text.
|
|
155
|
-
* Italic text should be used to add _emphasis_ to content, or to add stress to part of a sentence.
|
|
156
|
-
* Small text is used for side comments or for text that's secondary to the main content.
|
|
157
|
-
* Muted text is used to de-emphasise content, such as when displaying informative text that is not critical to the user experience.
|
|
158
|
-
|
|
159
|
-
Bold text
|
|
160
|
-
|
|
161
|
-
Italic text
|
|
162
|
-
|
|
163
|
-
Small text
|
|
164
|
-
|
|
165
|
-
Muted text
|
|
166
|
-
|
|
167
|
-
Hide code
|
|
168
|
-
|
|
169
|
-
\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
|
|
170
|
-
|
|
171
|
-
<IressStack gutter\="md"\>
|
|
172
|
-
<IressText variant\="bold"\>
|
|
173
|
-
Bold text </IressText\>
|
|
174
|
-
<IressText variant\="italic"\>
|
|
175
|
-
Italic text </IressText\>
|
|
176
|
-
<IressText variant\="small"\>
|
|
177
|
-
Small text </IressText\>
|
|
178
|
-
<IressText mode\="muted"\>
|
|
179
|
-
Muted text </IressText\>
|
|
180
|
-
</IressStack\>
|
|
181
|
-
|
|
182
|
-
Copy
|
|
183
|
-
|
|
184
|
-
On this page
|
|
185
|
-
|
|
186
|
-
* [Body](#body)
|
|
187
|
-
* [Headings](#headings)
|
|
188
|
-
* [Display](#display)
|
|
189
|
-
* [Lead](#lead)
|
|
190
|
-
* [Caption](#caption)
|
|
191
|
-
* [Other variants](#other-variants)
|