@iress-oss/ids-mcp-server 5.15.0 → 6.0.0-alpha.1

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.
Files changed (91) hide show
  1. package/package.json +28 -46
  2. package/generated/docs/components-alert-docs.md +0 -130
  3. package/generated/docs/components-autocomplete-docs.md +0 -754
  4. package/generated/docs/components-autocomplete-recipes-docs.md +0 -104
  5. package/generated/docs/components-badge-docs.md +0 -148
  6. package/generated/docs/components-button-docs.md +0 -362
  7. package/generated/docs/components-button-recipes-docs.md +0 -76
  8. package/generated/docs/components-buttongroup-docs.md +0 -310
  9. package/generated/docs/components-card-docs.md +0 -494
  10. package/generated/docs/components-card-recipes-docs.md +0 -89
  11. package/generated/docs/components-checkbox-docs.md +0 -193
  12. package/generated/docs/components-checkboxgroup-docs.md +0 -692
  13. package/generated/docs/components-checkboxgroup-recipes-docs.md +0 -119
  14. package/generated/docs/components-col-docs.md +0 -466
  15. package/generated/docs/components-combobox-docs.md +0 -1016
  16. package/generated/docs/components-container-docs.md +0 -91
  17. package/generated/docs/components-divider-docs.md +0 -176
  18. package/generated/docs/components-expander-docs.md +0 -215
  19. package/generated/docs/components-field-docs.md +0 -675
  20. package/generated/docs/components-filter-docs.md +0 -1109
  21. package/generated/docs/components-form-docs.md +0 -2410
  22. package/generated/docs/components-form-recipes-docs.md +0 -886
  23. package/generated/docs/components-hide-docs.md +0 -265
  24. package/generated/docs/components-icon-docs.md +0 -553
  25. package/generated/docs/components-inline-docs.md +0 -868
  26. package/generated/docs/components-input-docs.md +0 -335
  27. package/generated/docs/components-input-recipes-docs.md +0 -140
  28. package/generated/docs/components-inputcurrency-docs.md +0 -157
  29. package/generated/docs/components-inputcurrency-recipes-docs.md +0 -116
  30. package/generated/docs/components-label-docs.md +0 -135
  31. package/generated/docs/components-menu-docs.md +0 -704
  32. package/generated/docs/components-menu-menuitem-docs.md +0 -193
  33. package/generated/docs/components-modal-docs.md +0 -587
  34. package/generated/docs/components-navbar-docs.md +0 -291
  35. package/generated/docs/components-navbar-recipes-docs.md +0 -413
  36. package/generated/docs/components-panel-docs.md +0 -380
  37. package/generated/docs/components-placeholder-docs.md +0 -27
  38. package/generated/docs/components-popover-docs.md +0 -464
  39. package/generated/docs/components-popover-recipes-docs.md +0 -245
  40. package/generated/docs/components-progress-docs.md +0 -104
  41. package/generated/docs/components-provider-docs.md +0 -105
  42. package/generated/docs/components-radio-docs.md +0 -107
  43. package/generated/docs/components-radiogroup-docs.md +0 -683
  44. package/generated/docs/components-readonly-docs.md +0 -89
  45. package/generated/docs/components-richselect-docs.md +0 -2433
  46. package/generated/docs/components-row-docs.md +0 -877
  47. package/generated/docs/components-select-docs.md +0 -456
  48. package/generated/docs/components-skeleton-docs.md +0 -214
  49. package/generated/docs/components-skeleton-recipes-docs.md +0 -76
  50. package/generated/docs/components-skiplink-docs.md +0 -66
  51. package/generated/docs/components-slideout-docs.md +0 -538
  52. package/generated/docs/components-slider-docs.md +0 -346
  53. package/generated/docs/components-spinner-docs.md +0 -59
  54. package/generated/docs/components-stack-docs.md +0 -265
  55. package/generated/docs/components-table-ag-grid-docs.md +0 -1074
  56. package/generated/docs/components-table-docs.md +0 -1305
  57. package/generated/docs/components-tabset-docs.md +0 -341
  58. package/generated/docs/components-tabset-tab-docs.md +0 -86
  59. package/generated/docs/components-tag-docs.md +0 -115
  60. package/generated/docs/components-text-docs.md +0 -394
  61. package/generated/docs/components-toaster-docs.md +0 -345
  62. package/generated/docs/components-toaster-toast-docs.md +0 -157
  63. package/generated/docs/components-toggle-docs.md +0 -158
  64. package/generated/docs/components-tooltip-docs.md +0 -311
  65. package/generated/docs/components-validationmessage-docs.md +0 -241
  66. package/generated/docs/contact-us-docs.md +0 -27
  67. package/generated/docs/extensions-editor-docs.md +0 -288
  68. package/generated/docs/extensions-editor-recipes-docs.md +0 -39
  69. package/generated/docs/foundations-accessibility-docs.md +0 -62
  70. package/generated/docs/foundations-colours-docs.md +0 -257
  71. package/generated/docs/foundations-consistency-docs.md +0 -52
  72. package/generated/docs/foundations-content-docs.md +0 -23
  73. package/generated/docs/foundations-introduction-docs.md +0 -17
  74. package/generated/docs/foundations-principles-docs.md +0 -70
  75. package/generated/docs/foundations-typography-docs.md +0 -191
  76. package/generated/docs/foundations-user-experience-docs.md +0 -63
  77. package/generated/docs/foundations-visual-design-docs.md +0 -46
  78. package/generated/docs/frequently-asked-questions-docs.md +0 -53
  79. package/generated/docs/get-started-develop-docs.md +0 -209
  80. package/generated/docs/get-started-using-storybook-docs.md +0 -68
  81. package/generated/docs/guidelines.md +0 -812
  82. package/generated/docs/introduction-docs.md +0 -43
  83. package/generated/docs/patterns-loading-docs.md +0 -1304
  84. package/generated/docs/resources-changelog-docs.md +0 -6
  85. package/generated/docs/resources-code-katas-docs.md +0 -29
  86. package/generated/docs/resources-migration-guides-from-v4-to-v5-docs.md +0 -437
  87. package/generated/docs/themes-available-themes-docs.md +0 -66
  88. package/generated/docs/themes-introduction-docs.md +0 -121
  89. package/generated/docs/themes-tokens-docs.md +0 -1200
  90. package/generated/docs/versions-docs.md +0 -17
  91. /package/{LICENSE.txt → LICENSE} +0 -0
@@ -1,62 +0,0 @@
1
- [](#accessibility)Accessibility
2
- ===============================
3
-
4
- Accessibility is everyone's responsibility. It ensures that all users, regardless of their abilities or disabilities, can access and interact with our components effectively. This document outlines the key practices for building accessible components we follow within IDS.
5
-
6
- Please note: The default behaviour of our components is to be accessible, but it is the responsibility of the product to ensure that they are used correctly in accessibile context, or any modifications made to them do not compromise accessibility.
7
-
8
- [](#interaction-patterns)Interaction Patterns
9
- ---------------------------------------------
10
-
11
- ### [](#keyboard-navigation)Keyboard Navigation
12
-
13
- * Support standard keyboard shortcuts (Tab, Arrow keys, Enter, Space, Escape)
14
- * Implement proper focus order and visual focus indicators
15
- * Provide keyboard alternatives for mouse-only interactions
16
- * Follow established ARIA patterns for complex widgets
17
-
18
- ### [](#touch-interactions)Touch Interactions
19
-
20
- * Provide adequate touch target sizes (minimum 44px)
21
- * Implement touch-friendly spacing between interactive elements
22
- * Support gesture-based interactions where appropriate
23
- * Ensure consistent behaviour across device types
24
-
25
- ### [](#loading-and-feedback)Loading and Feedback
26
-
27
- * Use appropriate loading patterns based on context:
28
- * **Page**: Full page loading states
29
- * **Component**: Local loading within sections
30
- * **Button**: Inline loading for form submissions
31
- * **Validate**: Server-side validation feedback
32
- * Provide clear success and error feedback
33
- * Use progressive enhancement for better perceived performance
34
-
35
- * * *
36
-
37
- [](#responsive-design)Responsive Design
38
- ---------------------------------------
39
-
40
- ### [](#breakpoint-strategy)Breakpoint Strategy
41
-
42
- * Implement mobile-first responsive design
43
- * Use consistent breakpoint values across all components
44
- * Provide appropriate component variants for different screen sizes
45
- * Consider content priority and progressive disclosure on smaller screens
46
-
47
- ### [](#adaptive-behaviour)Adaptive Behaviour
48
-
49
- * Reduce option counts on mobile devices where appropriate
50
- * Implement responsive navigation patterns
51
- * Adjust spacing and sizing for different contexts
52
- * Maintain usability across all supported devices
53
-
54
- On this page
55
-
56
- * [Interaction Patterns](#interaction-patterns)
57
- * [Keyboard Navigation](#keyboard-navigation)
58
- * [Touch Interactions](#touch-interactions)
59
- * [Loading and Feedback](#loading-and-feedback)
60
- * [Responsive Design](#responsive-design)
61
- * [Breakpoint Strategy](#breakpoint-strategy)
62
- * [Adaptive Behaviour](#adaptive-behaviour)
@@ -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,52 +0,0 @@
1
- [](#using-components-consistently)Using components consistently
2
- ===============================================================
3
-
4
- [](#buttons)Buttons
5
- -------------------
6
-
7
- * **Primary**: Limit to one per view for main call-to-action
8
- * **Secondary**: Use for secondary actions
9
- * **Tertiary**: Extra affordance between secondary actions
10
- * **Link**: Button styled as link (avoid with icon-only content)
11
- * **Danger**: Destructive actions requiring extra confirmation
12
- * **Positive/Negative**: Financial transactions (buy/sell)
13
-
14
- [](#forms)Forms
15
- ---------------
16
-
17
- * Always use `IressField` wrapper for proper label, hint, and error placement
18
- * Provide clear validation feedback with appropriate error messages
19
- * Use consistent input sizing based on expected content length
20
- * Implement proper form state management and accessibility
21
-
22
- [](#navigation)Navigation
23
- -------------------------
24
-
25
- * Use semantic HTML5 navigation elements
26
- * Provide skip links for keyboard users
27
- * Implement proper ARIA labelling for navigation sections
28
- * Ensure consistent navigation patterns across applications
29
-
30
- [](#data-display)Data Display
31
- -----------------------------
32
-
33
- * Use semantic table structures with proper headers
34
- * Provide clear visual hierarchy in data presentations
35
- * Implement consistent sorting and filtering patterns
36
- * Use appropriate loading states for data-heavy components
37
-
38
- [](#modals-and-overlays)Modals and Overlays
39
- -------------------------------------------
40
-
41
- * Reserve modals for critical tasks requiring full attention
42
- * Provide multiple dismissal methods (backdrop, escape key, close button)
43
- * Implement proper focus management and restoration
44
- * Use slideouts for supplementary tasks where underlying content needs visibility
45
-
46
- On this page
47
-
48
- * [Buttons](#buttons)
49
- * [Forms](#forms)
50
- * [Navigation](#navigation)
51
- * [Data Display](#data-display)
52
- * [Modals and Overlays](#modals-and-overlays)
@@ -1,23 +0,0 @@
1
- [](#content)Content
2
- ===================
3
-
4
- [](#microcopy-guidelines)Microcopy Guidelines
5
- ---------------------------------------------
6
-
7
- * Use clear, concise language that matches user mental models
8
- * Provide helpful error messages with actionable guidance
9
- * Implement consistent tone of voice across all interface text
10
- * Use progressive disclosure for complex information
11
-
12
- [](#iconography)Iconography
13
- ---------------------------
14
-
15
- * Use icons consistently with established meanings
16
- * Provide screen reader text for meaningful icons
17
- * Avoid using icons as the sole means of communication
18
- * Maintain consistent icon sizing and alignment
19
-
20
- On this page
21
-
22
- * [Microcopy Guidelines](#microcopy-guidelines)
23
- * [Iconography](#iconography)
@@ -1,17 +0,0 @@
1
- [](#introduction)Introduction
2
- =============================
3
-
4
- The IDS and product design team use the foundations to create a consistent user experience across all Iress products. This includes design principles and guidelines that ensure a cohesive look and feel.
5
-
6
- 1. [Principles](./?path=/docs/foundations-principles--docs)
7
- 2. [Accessibility](./?path=/docs/foundations-accessibility--docs)
8
- 3. [Colours](./?path=/docs/foundations-colours--docs)
9
- 4. [Typography](./?path=/docs/foundations-typography--docs)
10
- 5. [Visual Design](./?path=/docs/foundations-visual-design--docs)
11
- 6. [Consistency](./?path=/docs/foundations-consistency--docs)
12
- 7. [Content](./?path=/docs/foundations-content--docs)
13
- 8. [User Experience](./?path=/docs/foundations-user-experience--docs)
14
-
15
- _This document is a living standard. Revisit and revise regularly to reflect evolving needs, technologies, and user expectations._
16
-
17
- On this page
@@ -1,70 +0,0 @@
1
- [](#core-design-principles)Core Design Principles
2
- =================================================
3
-
4
- [](#consistency)Consistency
5
- ---------------------------
6
-
7
- * Maintain brand consistency across all applications and experiences
8
- * Use standardised component naming conventions (all components start with `Iress` prefix)
9
- * Leverage shared design tokens for spacing, colours, typography, and interactive states
10
- * Ensure consistent behaviour patterns across similar components
11
-
12
- [](#accessibility-first)Accessibility First
13
- -------------------------------------------
14
-
15
- * Meet or exceed WCAG 2.1 Level AA Accessibility Guidelines
16
- * Provide proper colour contrast ratios (minimum 4.5:1 for AA, 7:1 for AAA)
17
- * Implement comprehensive keyboard navigation support
18
- * Include screen reader compatibility with appropriate ARIA attributes
19
- * Support focus management and skip navigation patterns
20
- * Document accessibility considerations and requirements
21
-
22
- [](#clarity-and-usability)Clarity and Usability
23
- -----------------------------------------------
24
-
25
- * Prioritise clear visual hierarchy through typography scales and spacing systems
26
- * Use progressive disclosure to manage complexity
27
- * Provide immediate feedback for user actions (loading states, validation, etc.)
28
- * Design for touch-friendly interfaces with adequate target sizes
29
-
30
- [](#developer-experience)Developer Experience
31
- ---------------------------------------------
32
-
33
- * Maintain clean component APIs with predictable prop patterns
34
- * Provide comprehensive documentation with usage examples
35
- * Include common patterns and anti-patterns
36
- * Support both controlled and uncontrolled component patterns
37
- * Enable efficient testing strategies with semantic roles and accessible queries
38
- * Maintain up-to-date prop documentation and type definitions
39
-
40
- [](#quality-assurance)Quality assurance
41
- ---------------------------------------
42
-
43
- * Test components across supported browsers and devices
44
- * Validate accessibility compliance with automated and manual testing
45
- * Ensure proper keyboard navigation functionality
46
- * Test with assistive technologies (screen readers, voice control)
47
-
48
- ### [](#code-standards)Code Standards
49
-
50
- * Follow consistent naming conventions for CSS classes and component props
51
- * Use semantic HTML elements where appropriate
52
- * Implement proper TypeScript typing for better developer experience
53
- * Maintain clean separation between presentation and logic
54
-
55
- ### [](#performance-considerations)Performance Considerations
56
-
57
- * Optimise component rendering and re-rendering
58
- * Implement appropriate code splitting strategies
59
- * Use efficient animation and transition patterns
60
- * Consider bundle size impact of component dependencies
61
-
62
- On this page
63
-
64
- * [Consistency](#consistency)
65
- * [Accessibility First](#accessibility-first)
66
- * [Clarity and Usability](#clarity-and-usability)
67
- * [Developer Experience](#developer-experience)
68
- * [Quality assurance](#quality-assurance)
69
- * [Code Standards](#code-standards)
70
- * [Performance Considerations](#performance-considerations)
@@ -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)