@utilitywarehouse/hearth-react 0.28.6 → 0.29.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/README.md +34 -20
- package/SKILL.md +355 -0
- package/dist/{chunk-O7RBVBMN.cjs → chunk-LWHIBSW2.cjs} +2 -2
- package/dist/{chunk-O7RBVBMN.cjs.map → chunk-LWHIBSW2.cjs.map} +1 -1
- package/dist/{chunk-JRVYOIXR.js → chunk-MIVYZGEV.js} +2 -2
- package/dist/components/CardAccordion/CardAccordion.context.d.ts.map +1 -1
- package/dist/components/Combobox/Combobox.cjs +1 -1
- package/dist/components/Combobox/Combobox.js +1 -1
- package/dist/components/ExpandableCard/ExpandableCard.cjs +1 -1
- package/dist/components/ExpandableCard/ExpandableCard.js +1 -1
- package/dist/helpers/get-classname-styles.d.ts.map +1 -1
- package/dist/helpers/logger.d.ts.map +1 -1
- package/dist/helpers/merge-ids.d.ts.map +1 -1
- package/dist/hooks/use-ids.d.ts.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1 -1
- package/package.json +18 -12
- package/public/llms/components/accordion.md +321 -0
- package/public/llms/components/alert.md +217 -0
- package/public/llms/components/avatar.md +112 -0
- package/public/llms/components/badge.md +158 -0
- package/public/llms/components/body-text.md +200 -0
- package/public/llms/components/box.md +148 -0
- package/public/llms/components/breadcrumbs.md +97 -0
- package/public/llms/components/button.md +595 -0
- package/public/llms/components/card-accordion.md +277 -0
- package/public/llms/components/card.md +985 -0
- package/public/llms/components/checkbox-group.md +193 -0
- package/public/llms/components/checkbox-tile.md +116 -0
- package/public/llms/components/checkbox.md +108 -0
- package/public/llms/components/combobox.md +360 -0
- package/public/llms/components/container.md +162 -0
- package/public/llms/components/currency-input.md +85 -0
- package/public/llms/components/date-input.md +90 -0
- package/public/llms/components/date-picker.md +159 -0
- package/public/llms/components/description-list.md +149 -0
- package/public/llms/components/detail-text.md +89 -0
- package/public/llms/components/divider.md +88 -0
- package/public/llms/components/em.md +43 -0
- package/public/llms/components/expandable-card.md +231 -0
- package/public/llms/components/flex.md +197 -0
- package/public/llms/components/grid.md +244 -0
- package/public/llms/components/heading.md +65 -0
- package/public/llms/components/helper-text.md +27 -0
- package/public/llms/components/highlight-banner.md +94 -0
- package/public/llms/components/icon-button.md +516 -0
- package/public/llms/components/icon-container.md +247 -0
- package/public/llms/components/inline-link.md +190 -0
- package/public/llms/components/label.md +28 -0
- package/public/llms/components/link.md +236 -0
- package/public/llms/components/list.md +715 -0
- package/public/llms/components/menu.md +270 -0
- package/public/llms/components/modal.md +328 -0
- package/public/llms/components/pagination.md +138 -0
- package/public/llms/components/password-input.md +93 -0
- package/public/llms/components/progress-bar.md +139 -0
- package/public/llms/components/progress-stepper.md +147 -0
- package/public/llms/components/radio-group.md +487 -0
- package/public/llms/components/search-input.md +132 -0
- package/public/llms/components/section-header.md +82 -0
- package/public/llms/components/select.md +148 -0
- package/public/llms/components/skeleton.md +282 -0
- package/public/llms/components/spinner.md +59 -0
- package/public/llms/components/strong.md +49 -0
- package/public/llms/components/switch.md +106 -0
- package/public/llms/components/table.md +230 -0
- package/public/llms/components/tabs.md +320 -0
- package/public/llms/components/text-area.md +141 -0
- package/public/llms/components/text-input.md +228 -0
- package/public/llms/components/toast.md +323 -0
- package/public/llms/components/toggle-button-card.md +513 -0
- package/public/llms/components/tooltip.md +188 -0
- package/public/llms/components/unstyled-icon-button.md +175 -0
- package/public/llms/components/validation-text.md +29 -0
- package/public/llms/components/verification-input.md +96 -0
- package/public/llms/docs/changelog.md +1430 -0
- package/public/llms/docs/common-props/align-self.md +90 -0
- package/public/llms/docs/common-props/border.md +308 -0
- package/public/llms/docs/common-props/colour.md +221 -0
- package/public/llms/docs/common-props/flex-items.md +91 -0
- package/public/llms/docs/common-props/gap.md +111 -0
- package/public/llms/docs/common-props/grid-items.md +96 -0
- package/public/llms/docs/common-props/margin.md +105 -0
- package/public/llms/docs/common-props/opacity.md +100 -0
- package/public/llms/docs/common-props/order.md +90 -0
- package/public/llms/docs/common-props/overflow.md +89 -0
- package/public/llms/docs/common-props/padding.md +102 -0
- package/public/llms/docs/common-props/position.md +92 -0
- package/public/llms/docs/common-props/size.md +93 -0
- package/public/llms/docs/common-props/spacing.md +97 -0
- package/public/llms/docs/common-props/text.md +35 -0
- package/public/llms/docs/common-props/z-index.md +88 -0
- package/public/llms/docs/design-tokens.md +72 -0
- package/public/llms/docs/getting-started.md +117 -0
- package/public/llms/docs/layout.md +135 -0
- package/public/llms/docs/migrating.md +302 -0
- package/public/llms/docs/responsive-design/breakpoints.md +119 -0
- package/public/llms/docs/responsive-design/media-queries.md +89 -0
- package/public/llms/docs/responsive-design/responsive-props.md +37 -0
- package/public/llms.txt +97 -0
- package/scripts/init-ai.js +142 -0
- package/styles.css +2 -2
- /package/dist/{chunk-JRVYOIXR.js.map → chunk-MIVYZGEV.js.map} +0 -0
|
@@ -0,0 +1,985 @@
|
|
|
1
|
+
# Card
|
|
2
|
+
|
|
3
|
+
Use Cards as containers for concise information about a single subject. They can display featured information, related content, or navigational choices. In groups, cards present collections of similar content.
|
|
4
|
+
|
|
5
|
+
- [Components](#components)
|
|
6
|
+
- [Alternatives](#alternatives)
|
|
7
|
+
- [Variant](#variant)
|
|
8
|
+
- [Color Scheme](#color-scheme)
|
|
9
|
+
- [Grouping related cards](#grouping-related-cards)
|
|
10
|
+
- [Interactive Cards](#interactive-cards)
|
|
11
|
+
- [Shadow colours](#shadow-colours)
|
|
12
|
+
- [Card Actions](#card-actions)
|
|
13
|
+
- [Banners](#banners)
|
|
14
|
+
- [API](#api)
|
|
15
|
+
|
|
16
|
+
```tsx
|
|
17
|
+
<Card {...args} width="400px" marginX="auto">
|
|
18
|
+
<BodyText size="md">{children}</BodyText>
|
|
19
|
+
</Card>
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Components
|
|
23
|
+
|
|
24
|
+
- `Card` - The main card container.
|
|
25
|
+
- `CardActionLink` - A card action which renders a link.
|
|
26
|
+
- `CardActionButton` - A card action which renders a button.
|
|
27
|
+
- `CardActions` - A wrapper for multiple card actions.
|
|
28
|
+
- `CardContent` - Layout for card content.
|
|
29
|
+
- `CardInteraction` - A wrapper for additional card interactions.
|
|
30
|
+
- `CardBannerContent` - Layout for banner text content.
|
|
31
|
+
- `CardBannerImage` - A wrapper for a banner image.
|
|
32
|
+
|
|
33
|
+
## Alternatives
|
|
34
|
+
|
|
35
|
+
- HighlightBanner - For highlighting
|
|
36
|
+
key information or marketing messaging
|
|
37
|
+
|
|
38
|
+
## Variant
|
|
39
|
+
|
|
40
|
+
The `variant` prop controls the visual weight of the card. Use `subtle` for a low-emphasis container and `emphasis` for a more prominent, filled appearance.
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
<Flex gap="400" padding="400" wrap="wrap">
|
|
44
|
+
{variants.map(variant => (
|
|
45
|
+
<Card key={variant} variant={variant} colorScheme="neutralStrong" width="300px">
|
|
46
|
+
<BodyText size="md">
|
|
47
|
+
<strong>{variant}</strong>
|
|
48
|
+
</BodyText>
|
|
49
|
+
</Card>
|
|
50
|
+
))}
|
|
51
|
+
</Flex>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## Color Scheme
|
|
55
|
+
|
|
56
|
+
The `colorScheme` prop sets the colour family applied to the card surface. It works in combination with `variant` — `subtle` applies a light tint of the colour, while `emphasis` uses a stronger fill. All available colour schemes are shown below, each with both variants.
|
|
57
|
+
|
|
58
|
+
> **Note:** The `highlight` colour scheme is only available with the `subtle` variant.
|
|
59
|
+
|
|
60
|
+
```tsx
|
|
61
|
+
<Flex direction="column" gap="400" padding="400">
|
|
62
|
+
{colorSchemes.map(colorScheme => (
|
|
63
|
+
<Flex key={colorScheme} gap="400">
|
|
64
|
+
{variants.flatMap(variant => {
|
|
65
|
+
if (colorScheme === 'highlight' && variant === 'emphasis') return [];
|
|
66
|
+
return (
|
|
67
|
+
<Card key={variant} colorScheme={colorScheme} variant={variant} width="300px">
|
|
68
|
+
<BodyText size="md" inverted={colorScheme === 'brand' && variant === 'emphasis'}>
|
|
69
|
+
<strong>
|
|
70
|
+
{colorScheme} / {variant}
|
|
71
|
+
</strong>
|
|
72
|
+
</BodyText>
|
|
73
|
+
</Card>
|
|
74
|
+
);
|
|
75
|
+
})}
|
|
76
|
+
</Flex>
|
|
77
|
+
))}
|
|
78
|
+
</Flex>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
## Grouping related cards
|
|
82
|
+
|
|
83
|
+
When grouping related `Card` components, they should be rendered as list items, as part of a list.
|
|
84
|
+
|
|
85
|
+
```tsx
|
|
86
|
+
<Flex asChild>
|
|
87
|
+
<ul role="list">
|
|
88
|
+
<li>
|
|
89
|
+
<Card>{...}</Card>
|
|
90
|
+
</li>
|
|
91
|
+
<li>
|
|
92
|
+
<Card>{...}</Card>
|
|
93
|
+
</li>
|
|
94
|
+
<li>
|
|
95
|
+
<Card>{...}</Card>
|
|
96
|
+
</li>
|
|
97
|
+
</ul>
|
|
98
|
+
</Flex>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
## Interactive Cards
|
|
102
|
+
|
|
103
|
+
By default the `Card` is static. When adding interactive actions, such as
|
|
104
|
+
links, or buttons, you should use the `CardInteraction` component.
|
|
105
|
+
|
|
106
|
+
The `CardInteraction` component will make the child element's clickable area extend
|
|
107
|
+
to the bounds of the parent `Card`. You can choose to set the `asChild` prop on
|
|
108
|
+
the `CardInteraction` component, but it's not essential.
|
|
109
|
+
|
|
110
|
+
There should only ever be one main card action in each `Card`.
|
|
111
|
+
|
|
112
|
+
```tsx
|
|
113
|
+
<Card>
|
|
114
|
+
<Heading size="sm">{title}</Heading>
|
|
115
|
+
<BodyText size="md">{content}</BodyText>
|
|
116
|
+
<CardInteraction asChild>
|
|
117
|
+
<Link href="http://...">
|
|
118
|
+
Find out more
|
|
119
|
+
<ChevronRightSmallIcon />
|
|
120
|
+
</Link>
|
|
121
|
+
</CardInteraction>
|
|
122
|
+
</Card>
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
If you need to add secondary actions to the card, use the `secondary` prop on
|
|
126
|
+
the `CardInteraction` component. This will ensure any secondary actions are
|
|
127
|
+
clickable, but do not overlay the primary action.
|
|
128
|
+
|
|
129
|
+
```tsx
|
|
130
|
+
<Card variant="emphasis" colorScheme="neutralStrong" flex="1" direction="column" gap="150">
|
|
131
|
+
<Flex alignItems="start">
|
|
132
|
+
<Heading size="sm">This is a card with multiple interactions</Heading>
|
|
133
|
+
<CardInteraction secondary>
|
|
134
|
+
<IconButton variant="ghost" size="sm" label="close" onClick={() => console.log('close')}>
|
|
135
|
+
<CloseSmallIcon />
|
|
136
|
+
</IconButton>
|
|
137
|
+
</CardInteraction>
|
|
138
|
+
</Flex>
|
|
139
|
+
<BodyText size="md">The components within the card are interactive component</BodyText>
|
|
140
|
+
<CardInteraction>
|
|
141
|
+
<Button variant="solid" colorScheme="yellow" onClick={() => console.log('action')}>
|
|
142
|
+
Button
|
|
143
|
+
</Button>
|
|
144
|
+
</CardInteraction>
|
|
145
|
+
</Card>
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
```tsx
|
|
149
|
+
<Flex padding="600" gap="400" direction="column" alignItems="start" width="700px">
|
|
150
|
+
<Flex asChild gap="300" wrap="wrap">
|
|
151
|
+
<ul role="list">
|
|
152
|
+
<li>
|
|
153
|
+
<Card {...args} variant="emphasis" colorScheme="neutralStrong" direction="column" gap="150">
|
|
154
|
+
<Heading size="sm">Neutral Card</Heading>
|
|
155
|
+
<BodyText size="md">neutralStrong & emphasis</BodyText>
|
|
156
|
+
<CardInteraction asChild>
|
|
157
|
+
<Link href="#">
|
|
158
|
+
Link
|
|
159
|
+
<ChevronRightSmallIcon />
|
|
160
|
+
</Link>
|
|
161
|
+
</CardInteraction>
|
|
162
|
+
</Card>
|
|
163
|
+
</li>
|
|
164
|
+
|
|
165
|
+
<li>
|
|
166
|
+
<Card {...args} variant="subtle" colorScheme="neutralStrong">
|
|
167
|
+
<Flex direction="column" gap="150">
|
|
168
|
+
<Heading size="sm">Neutral Card</Heading>
|
|
169
|
+
<BodyText size="md">neutralStrong & subtle</BodyText>
|
|
170
|
+
<CardInteraction asChild>
|
|
171
|
+
<Link href="#">
|
|
172
|
+
Link
|
|
173
|
+
<ChevronRightSmallIcon />
|
|
174
|
+
</Link>
|
|
175
|
+
</CardInteraction>
|
|
176
|
+
</Flex>
|
|
177
|
+
</Card>
|
|
178
|
+
</li>
|
|
179
|
+
|
|
180
|
+
<li>
|
|
181
|
+
<Card {...args} variant="emphasis" colorScheme="neutralSubtle">
|
|
182
|
+
<Flex direction="column" gap="150">
|
|
183
|
+
<Heading size="sm">Neutral Card</Heading>
|
|
184
|
+
<BodyText size="md">neutralSubtle & emphasis</BodyText>
|
|
185
|
+
<CardInteraction asChild>
|
|
186
|
+
<Link href="#">
|
|
187
|
+
Link
|
|
188
|
+
<ChevronRightSmallIcon />
|
|
189
|
+
</Link>
|
|
190
|
+
</CardInteraction>
|
|
191
|
+
</Flex>
|
|
192
|
+
</Card>
|
|
193
|
+
</li>
|
|
194
|
+
|
|
195
|
+
<li>
|
|
196
|
+
<Card {...args} variant="subtle" colorScheme="neutralSubtle">
|
|
197
|
+
<Flex direction="column" gap="150">
|
|
198
|
+
<Heading size="sm">Neutral Card</Heading>
|
|
199
|
+
<BodyText size="md">neutralSubtle & subtle</BodyText>
|
|
200
|
+
<CardInteraction asChild>
|
|
201
|
+
<Link href="#">
|
|
202
|
+
Link
|
|
203
|
+
<ChevronRightSmallIcon />
|
|
204
|
+
</Link>
|
|
205
|
+
</CardInteraction>
|
|
206
|
+
</Flex>
|
|
207
|
+
</Card>
|
|
208
|
+
</li>
|
|
209
|
+
</ul>
|
|
210
|
+
</Flex>
|
|
211
|
+
|
|
212
|
+
<Flex asChild gap="300" wrap="wrap">
|
|
213
|
+
<ul role="list">
|
|
214
|
+
<li>
|
|
215
|
+
<Card {...args} variant="subtle" colorScheme="brand">
|
|
216
|
+
<Flex direction="column" gap="150" justifyContent="between">
|
|
217
|
+
<Heading size="sm">Brand Card</Heading>
|
|
218
|
+
<BodyText size="md">Content</BodyText>
|
|
219
|
+
<CardInteraction asChild>
|
|
220
|
+
<Link href="#">
|
|
221
|
+
Link
|
|
222
|
+
<ChevronRightSmallIcon />
|
|
223
|
+
</Link>
|
|
224
|
+
</CardInteraction>
|
|
225
|
+
</Flex>
|
|
226
|
+
</Card>
|
|
227
|
+
</li>
|
|
228
|
+
|
|
229
|
+
<li>
|
|
230
|
+
<Card {...args} variant="subtle" colorScheme="pig">
|
|
231
|
+
<Flex direction="column" gap="150" justifyContent="between">
|
|
232
|
+
<Heading size="sm">Pig Card</Heading>
|
|
233
|
+
<BodyText size="md">Content</BodyText>
|
|
234
|
+
<CardInteraction asChild>
|
|
235
|
+
<Link href="#">
|
|
236
|
+
Link
|
|
237
|
+
<ChevronRightSmallIcon />
|
|
238
|
+
</Link>
|
|
239
|
+
</CardInteraction>
|
|
240
|
+
</Flex>
|
|
241
|
+
</Card>
|
|
242
|
+
</li>
|
|
243
|
+
|
|
244
|
+
<li>
|
|
245
|
+
<Card {...args} variant="subtle" colorScheme="highlight">
|
|
246
|
+
<Flex direction="column" gap="150" justifyContent="between">
|
|
247
|
+
<Heading size="sm">Highlight Card</Heading>
|
|
248
|
+
<BodyText size="md">Content</BodyText>
|
|
249
|
+
<CardInteraction asChild>
|
|
250
|
+
<Link href="#">
|
|
251
|
+
Link
|
|
252
|
+
<ChevronRightSmallIcon />
|
|
253
|
+
</Link>
|
|
254
|
+
</CardInteraction>
|
|
255
|
+
</Flex>
|
|
256
|
+
</Card>
|
|
257
|
+
</li>
|
|
258
|
+
</ul>
|
|
259
|
+
</Flex>
|
|
260
|
+
|
|
261
|
+
<Flex asChild gap="300" wrap="wrap">
|
|
262
|
+
<ul role="list">
|
|
263
|
+
<li>
|
|
264
|
+
<Card {...args} variant="subtle" colorScheme="energy">
|
|
265
|
+
<Flex direction="column" gap="150" justifyContent="between">
|
|
266
|
+
<Heading size="sm">Energy Card</Heading>
|
|
267
|
+
<BodyText size="md">Content</BodyText>
|
|
268
|
+
<CardInteraction asChild>
|
|
269
|
+
<Link href="#">
|
|
270
|
+
Link
|
|
271
|
+
<ChevronRightSmallIcon />
|
|
272
|
+
</Link>
|
|
273
|
+
</CardInteraction>
|
|
274
|
+
</Flex>
|
|
275
|
+
</Card>
|
|
276
|
+
</li>
|
|
277
|
+
|
|
278
|
+
<li>
|
|
279
|
+
<Card {...args} variant="subtle" colorScheme="mobile">
|
|
280
|
+
<Flex direction="column" gap="150" justifyContent="between">
|
|
281
|
+
<Heading size="sm">Mobile Card</Heading>
|
|
282
|
+
<BodyText size="md">Content</BodyText>
|
|
283
|
+
<CardInteraction asChild>
|
|
284
|
+
<Link href="#">
|
|
285
|
+
Link
|
|
286
|
+
<ChevronRightSmallIcon />
|
|
287
|
+
</Link>
|
|
288
|
+
</CardInteraction>
|
|
289
|
+
</Flex>
|
|
290
|
+
</Card>
|
|
291
|
+
</li>
|
|
292
|
+
|
|
293
|
+
<li>
|
|
294
|
+
<Card {...args} variant="subtle" colorScheme="broadband">
|
|
295
|
+
<Flex direction="column" gap="150" justifyContent="between">
|
|
296
|
+
<Heading size="sm">Broadband Card</Heading>
|
|
297
|
+
<BodyText size="md">Content</BodyText>
|
|
298
|
+
<CardInteraction asChild>
|
|
299
|
+
<Link href="#">
|
|
300
|
+
Link
|
|
301
|
+
<ChevronRightSmallIcon />
|
|
302
|
+
</Link>
|
|
303
|
+
</CardInteraction>
|
|
304
|
+
</Flex>
|
|
305
|
+
</Card>
|
|
306
|
+
</li>
|
|
307
|
+
|
|
308
|
+
<li>
|
|
309
|
+
<Card {...args} variant="subtle" colorScheme="insurance">
|
|
310
|
+
<Flex direction="column" gap="150" justifyContent="between">
|
|
311
|
+
<Heading size="sm">Insurance Card</Heading>
|
|
312
|
+
<BodyText size="md">Content</BodyText>
|
|
313
|
+
<CardInteraction asChild>
|
|
314
|
+
<Link href="#">
|
|
315
|
+
Link
|
|
316
|
+
<ChevronRightSmallIcon />
|
|
317
|
+
</Link>
|
|
318
|
+
</CardInteraction>
|
|
319
|
+
</Flex>
|
|
320
|
+
</Card>
|
|
321
|
+
</li>
|
|
322
|
+
|
|
323
|
+
<li>
|
|
324
|
+
<Card {...args} variant="subtle" colorScheme="cashback">
|
|
325
|
+
<Flex direction="column" gap="150" justifyContent="between">
|
|
326
|
+
<Heading size="sm">Cashback Card</Heading>
|
|
327
|
+
<BodyText size="md">Content</BodyText>
|
|
328
|
+
<CardInteraction asChild>
|
|
329
|
+
<Link href="#">
|
|
330
|
+
Link
|
|
331
|
+
<ChevronRightSmallIcon />
|
|
332
|
+
</Link>
|
|
333
|
+
</CardInteraction>
|
|
334
|
+
</Flex>
|
|
335
|
+
</Card>
|
|
336
|
+
</li>
|
|
337
|
+
</ul>
|
|
338
|
+
</Flex>
|
|
339
|
+
|
|
340
|
+
<Flex asChild direction="row" gap="200" wrap="wrap">
|
|
341
|
+
<ul role="list">
|
|
342
|
+
<li>
|
|
343
|
+
<Card
|
|
344
|
+
{...args}
|
|
345
|
+
variant="emphasis"
|
|
346
|
+
colorScheme="neutralStrong"
|
|
347
|
+
direction="column"
|
|
348
|
+
gap="150"
|
|
349
|
+
alignItems="start"
|
|
350
|
+
>
|
|
351
|
+
<Heading size="sm">This is a card with a single interaction</Heading>
|
|
352
|
+
<BodyText size="md">
|
|
353
|
+
The card itself doesn’t need to be clickable and the only interaction is with the
|
|
354
|
+
interactive component nested within the card
|
|
355
|
+
</BodyText>
|
|
356
|
+
<Button variant="solid" colorScheme="highlight" onClick={() => console.log('hello')}>
|
|
357
|
+
Button
|
|
358
|
+
</Button>
|
|
359
|
+
</Card>
|
|
360
|
+
</li>
|
|
361
|
+
|
|
362
|
+
<li>
|
|
363
|
+
<Card {...args} variant="emphasis" colorScheme="neutralStrong" direction="column" gap="150">
|
|
364
|
+
<Heading size="sm">This whole card is clickable</Heading>
|
|
365
|
+
<BodyText size="md">
|
|
366
|
+
This whole card is tappable/clickable but the state is applied to the interactive
|
|
367
|
+
component
|
|
368
|
+
</BodyText>
|
|
369
|
+
<CardInteraction>
|
|
370
|
+
<Button variant="solid" colorScheme="highlight" onClick={() => console.log('hello')}>
|
|
371
|
+
Button
|
|
372
|
+
</Button>
|
|
373
|
+
</CardInteraction>
|
|
374
|
+
</Card>
|
|
375
|
+
</li>
|
|
376
|
+
|
|
377
|
+
<li>
|
|
378
|
+
<Card {...args} variant="emphasis" colorScheme="neutralStrong" direction="column" gap="150">
|
|
379
|
+
<Flex alignItems="start" justifyContent="between">
|
|
380
|
+
<Heading size="sm">This is a card with multiple interactions</Heading>
|
|
381
|
+
<CardInteraction secondary>
|
|
382
|
+
<IconButton
|
|
383
|
+
variant="ghost"
|
|
384
|
+
size="sm"
|
|
385
|
+
label="close"
|
|
386
|
+
onClick={() => console.log('close')}
|
|
387
|
+
>
|
|
388
|
+
<CloseSmallIcon />
|
|
389
|
+
</IconButton>
|
|
390
|
+
</CardInteraction>
|
|
391
|
+
</Flex>
|
|
392
|
+
<BodyText size="md">The components within the card are interactive component</BodyText>
|
|
393
|
+
<CardInteraction>
|
|
394
|
+
<Button variant="solid" colorScheme="highlight" onClick={() => console.log('action')}>
|
|
395
|
+
Button
|
|
396
|
+
</Button>
|
|
397
|
+
</CardInteraction>
|
|
398
|
+
</Card>
|
|
399
|
+
</li>
|
|
400
|
+
</ul>
|
|
401
|
+
</Flex>
|
|
402
|
+
</Flex>
|
|
403
|
+
```
|
|
404
|
+
|
|
405
|
+
### Shadow colours
|
|
406
|
+
|
|
407
|
+
You can set a shadow on the `Card` component using the `shadowColor` prop.
|
|
408
|
+
|
|
409
|
+
Shadows serve as a visual cue for interactivity. While interactive cards do not
|
|
410
|
+
require a shadow, shadows should only be applied to cards that contain an
|
|
411
|
+
action. Don't apply a shadow to a static card.
|
|
412
|
+
|
|
413
|
+
> **Note:** Shadow colours should only be used with the `neutralStrong` or `neutralSubtle` colour schemes.
|
|
414
|
+
|
|
415
|
+
```tsx
|
|
416
|
+
<Flex gap="400" padding="400" wrap="wrap">
|
|
417
|
+
{shadowColors.map(c => (
|
|
418
|
+
<Card {...args} key={c} shadowColor={c}>
|
|
419
|
+
<BodyText size="md">{children}</BodyText>
|
|
420
|
+
<CardInteraction asChild>
|
|
421
|
+
<Link href="https://en.wikipedia.org/wiki/Maya_Angelou" target="_blank">
|
|
422
|
+
Learn more
|
|
423
|
+
</Link>
|
|
424
|
+
</CardInteraction>
|
|
425
|
+
</Card>
|
|
426
|
+
))}
|
|
427
|
+
</Flex>
|
|
428
|
+
```
|
|
429
|
+
|
|
430
|
+
## Card Actions
|
|
431
|
+
|
|
432
|
+
Separate to `CardInteraction` you can include `CardActions` within a `Card`
|
|
433
|
+
component. These are visually different UI elements that are used in various
|
|
434
|
+
different lock ups to call actions to content within a card. You do not need to
|
|
435
|
+
wrap them in a `CardInteraction` component.
|
|
436
|
+
|
|
437
|
+
`CardActionLink` and `CardActionButton` can be used standalone within a `Card`
|
|
438
|
+
component. If you set the `leadingIconContainerColorScheme` then the
|
|
439
|
+
`leadingIcon` will be rendered within an `IconContainer`.
|
|
440
|
+
|
|
441
|
+
You can also include a `Badge` and `trailingIcon`.
|
|
442
|
+
|
|
443
|
+
```tsx
|
|
444
|
+
<Flex padding="500" direction="row" gap="500" backgroundColor="secondary" wrap="wrap">
|
|
445
|
+
<Card {...args}>
|
|
446
|
+
<CardActionButton
|
|
447
|
+
heading="Electricity"
|
|
448
|
+
helperText="Last reading: 30th Oct"
|
|
449
|
+
leadingIcon={<ElectricityMediumIcon />}
|
|
450
|
+
leadingIconContainerColorScheme="energy"
|
|
451
|
+
badge={
|
|
452
|
+
<Badge colorScheme="info" size="sm">
|
|
453
|
+
Smart meter
|
|
454
|
+
</Badge>
|
|
455
|
+
}
|
|
456
|
+
badgePlacement="middle"
|
|
457
|
+
/>
|
|
458
|
+
</Card>
|
|
459
|
+
<Card {...args}>
|
|
460
|
+
<CardActionButton
|
|
461
|
+
heading="Home Insurance"
|
|
462
|
+
helperText="B12ABCD38"
|
|
463
|
+
leadingIcon={<HomeInsuranceMediumIcon />}
|
|
464
|
+
badge={
|
|
465
|
+
<Badge variant="outline" colorScheme="functional" size="sm">
|
|
466
|
+
Disconnected
|
|
467
|
+
</Badge>
|
|
468
|
+
}
|
|
469
|
+
badgePlacement="bottom"
|
|
470
|
+
/>
|
|
471
|
+
</Card>
|
|
472
|
+
<Card {...args}>
|
|
473
|
+
<CardActionButton
|
|
474
|
+
heading="Card Action"
|
|
475
|
+
helperText="With badge to the right"
|
|
476
|
+
badge={
|
|
477
|
+
<Badge variant="subtle" colorScheme="positive" size="sm">
|
|
478
|
+
Live
|
|
479
|
+
</Badge>
|
|
480
|
+
}
|
|
481
|
+
badgePlacement="right"
|
|
482
|
+
/>
|
|
483
|
+
</Card>
|
|
484
|
+
</Flex>
|
|
485
|
+
```
|
|
486
|
+
|
|
487
|
+
When including multiple `CardActionLink` or `CardActionButton` components you
|
|
488
|
+
must wrap them in the `CardActions` component.
|
|
489
|
+
|
|
490
|
+
```tsx
|
|
491
|
+
<Card {...args} width="500px">
|
|
492
|
+
<CardActions direction="column">
|
|
493
|
+
<CardActionButton
|
|
494
|
+
leadingIcon={<HomeInsuranceMediumIcon />}
|
|
495
|
+
leadingIconContainerColorScheme="insurance"
|
|
496
|
+
heading="Home insurance"
|
|
497
|
+
helperText="B12ABCD34"
|
|
498
|
+
badge={
|
|
499
|
+
<Badge size="sm" colorScheme="positive">
|
|
500
|
+
Live
|
|
501
|
+
</Badge>
|
|
502
|
+
}
|
|
503
|
+
badgePlacement="right"
|
|
504
|
+
/>
|
|
505
|
+
<CardActionButton
|
|
506
|
+
disabled
|
|
507
|
+
leadingIcon={<HomeAndBoilerMediumIcon />}
|
|
508
|
+
leadingIconContainerColorScheme="insurance"
|
|
509
|
+
heading="Boiler & home cover"
|
|
510
|
+
helperText="B12ABCD37"
|
|
511
|
+
badge={
|
|
512
|
+
<Badge size="sm" colorScheme="positive">
|
|
513
|
+
Live
|
|
514
|
+
</Badge>
|
|
515
|
+
}
|
|
516
|
+
badgePlacement="right"
|
|
517
|
+
/>
|
|
518
|
+
</CardActions>
|
|
519
|
+
</Card>
|
|
520
|
+
```
|
|
521
|
+
|
|
522
|
+
When using `CardActions` alongside other additional content, you must wrap the
|
|
523
|
+
additional content in a `CardContent` component. If necessary, you can set the
|
|
524
|
+
`paddingBottomNone` prop to remove the bottom padding.
|
|
525
|
+
|
|
526
|
+
```tsx
|
|
527
|
+
<Flex padding="500" direction="column" gap="500" backgroundColor="secondary" wrap="wrap">
|
|
528
|
+
<Card {...args} width="fit-content">
|
|
529
|
+
<CardContent direction="column" spacing="lg">
|
|
530
|
+
<Heading size="md" as="h2">
|
|
531
|
+
Your December bill
|
|
532
|
+
</Heading>
|
|
533
|
+
|
|
534
|
+
<Flex direction="column" spacing="sm">
|
|
535
|
+
<DetailText size="4xl">£110.00</DetailText>
|
|
536
|
+
<Flex gap="50" alignItems="center">
|
|
537
|
+
<TickCircleSmallIcon />
|
|
538
|
+
<BodyText size="md">Your Direct Debit is ready to go</BodyText>
|
|
539
|
+
</Flex>
|
|
540
|
+
</Flex>
|
|
541
|
+
</CardContent>
|
|
542
|
+
<CardActions direction="column">
|
|
543
|
+
<CardActionButton heading="Download PDF" trailingIcon={<DownloadSmallIcon />} />
|
|
544
|
+
<CardActionButton heading="Open PDF" trailingIcon={<OpenSmallIcon />} />
|
|
545
|
+
<CardActionButton heading="Email PDF" trailingIcon={<EmailSmallIcon />} disabled />
|
|
546
|
+
</CardActions>
|
|
547
|
+
</Card>
|
|
548
|
+
<Card {...args}>
|
|
549
|
+
<CardContent direction="column" spacing="lg">
|
|
550
|
+
<Heading size="md" as="h2">
|
|
551
|
+
Your December bill
|
|
552
|
+
</Heading>
|
|
553
|
+
|
|
554
|
+
<Flex direction="column" spacing="sm">
|
|
555
|
+
<DetailText size="4xl">£110.00</DetailText>
|
|
556
|
+
<Flex gap="50" alignItems="center">
|
|
557
|
+
<TickCircleSmallIcon />
|
|
558
|
+
<BodyText size="md">Your Direct Debit is ready to go</BodyText>
|
|
559
|
+
</Flex>
|
|
560
|
+
</Flex>
|
|
561
|
+
</CardContent>
|
|
562
|
+
<CardActions direction={{ mobile: 'column', tablet: 'row' }}>
|
|
563
|
+
<CardActionButton heading="Download PDF" trailingIcon={<DownloadSmallIcon />} />
|
|
564
|
+
<CardActionButton heading="Open PDF" trailingIcon={<OpenSmallIcon />} />
|
|
565
|
+
<CardActionButton heading="Email PDF" trailingIcon={<EmailSmallIcon />} disabled />
|
|
566
|
+
</CardActions>
|
|
567
|
+
</Card>
|
|
568
|
+
</Flex>
|
|
569
|
+
```
|
|
570
|
+
|
|
571
|
+
## Banners
|
|
572
|
+
|
|
573
|
+
Banners can be created using a `Card` along with the `CardBannerContent` & `CardBannerImage` helper components.
|
|
574
|
+
|
|
575
|
+
### Text only
|
|
576
|
+
|
|
577
|
+
```tsx
|
|
578
|
+
<Card spacing="lg" justifyContent="between">
|
|
579
|
+
<CardBannerContent heading="This is a banner heading" description="Put your description here">
|
|
580
|
+
<Link href="#">
|
|
581
|
+
Link
|
|
582
|
+
<ChevronRightSmallIcon />
|
|
583
|
+
</Link>
|
|
584
|
+
</CardBannerContent>
|
|
585
|
+
|
|
586
|
+
<UnstyledIconButton label="close">
|
|
587
|
+
<CloseSmallIcon />
|
|
588
|
+
</UnstyledIconButton>
|
|
589
|
+
</Card>
|
|
590
|
+
```
|
|
591
|
+
|
|
592
|
+
### With an icon container
|
|
593
|
+
|
|
594
|
+
```tsx
|
|
595
|
+
<Flex gap="400">
|
|
596
|
+
<Card spacing="md">
|
|
597
|
+
<IconContainer colorScheme="pig">
|
|
598
|
+
<PlaceholderSmallIcon />
|
|
599
|
+
</IconContainer>
|
|
600
|
+
<CardBannerContent heading="This is a banner heading" description="Put your description here">
|
|
601
|
+
<Link href="#">
|
|
602
|
+
Link
|
|
603
|
+
<ChevronRightSmallIcon />
|
|
604
|
+
</Link>
|
|
605
|
+
</CardBannerContent>
|
|
606
|
+
<UnstyledIconButton label="close">
|
|
607
|
+
<CloseSmallIcon />
|
|
608
|
+
</UnstyledIconButton>
|
|
609
|
+
</Card>
|
|
610
|
+
<Card spacing="lg">
|
|
611
|
+
<Flex spacing="lg" direction="column" alignItems="start">
|
|
612
|
+
<IconContainer colorScheme="pig">
|
|
613
|
+
<PlaceholderSmallIcon />
|
|
614
|
+
</IconContainer>
|
|
615
|
+
<CardBannerContent heading="This is a banner heading" description="Put your description here">
|
|
616
|
+
<Link href="#">
|
|
617
|
+
Link
|
|
618
|
+
<ChevronRightSmallIcon />
|
|
619
|
+
</Link>
|
|
620
|
+
</CardBannerContent>
|
|
621
|
+
</Flex>
|
|
622
|
+
<UnstyledIconButton label="close">
|
|
623
|
+
<CloseSmallIcon />
|
|
624
|
+
</UnstyledIconButton>
|
|
625
|
+
</Card>
|
|
626
|
+
</Flex>
|
|
627
|
+
```
|
|
628
|
+
|
|
629
|
+
### With an illustration
|
|
630
|
+
|
|
631
|
+
```tsx
|
|
632
|
+
<Flex gap="400">
|
|
633
|
+
<Card spacing="lg" colorScheme="pig" variant="subtle" alignItems="center" width="450px">
|
|
634
|
+
<img src={SpotSavings} alt="Savings Pig" width={80} />
|
|
635
|
+
|
|
636
|
+
<CardBannerContent
|
|
637
|
+
heading="Save money on your household bills when you get it together"
|
|
638
|
+
description="Our network of friendly, local Partners can help you find ways to save."
|
|
639
|
+
>
|
|
640
|
+
<Link href="#">
|
|
641
|
+
Find a UW Partner
|
|
642
|
+
<ChevronRightSmallIcon />
|
|
643
|
+
</Link>
|
|
644
|
+
</CardBannerContent>
|
|
645
|
+
</Card>
|
|
646
|
+
<Card
|
|
647
|
+
spacing="lg"
|
|
648
|
+
direction="column"
|
|
649
|
+
alignItems="center"
|
|
650
|
+
maxWidth="300px"
|
|
651
|
+
colorScheme="energy"
|
|
652
|
+
variant="subtle"
|
|
653
|
+
>
|
|
654
|
+
<Flex width="100%" position="relative" justifyContent="center">
|
|
655
|
+
<img src={SpotSmartMeter} alt="Billing Pig" width={80} />
|
|
656
|
+
<Box position="absolute" top="0" right="0">
|
|
657
|
+
<UnstyledIconButton label="close">
|
|
658
|
+
<CloseSmallIcon />
|
|
659
|
+
</UnstyledIconButton>
|
|
660
|
+
</Box>
|
|
661
|
+
</Flex>
|
|
662
|
+
<CardBannerContent
|
|
663
|
+
heading="Save a bundle"
|
|
664
|
+
description="Our network of friendly, local Partners can help you find ways to save."
|
|
665
|
+
textAlign="center"
|
|
666
|
+
alignItems="center"
|
|
667
|
+
>
|
|
668
|
+
<Link href="#">
|
|
669
|
+
Find a UW Partner
|
|
670
|
+
<ChevronRightSmallIcon />
|
|
671
|
+
</Link>
|
|
672
|
+
</CardBannerContent>
|
|
673
|
+
</Card>
|
|
674
|
+
</Flex>
|
|
675
|
+
```
|
|
676
|
+
|
|
677
|
+
### With an image
|
|
678
|
+
|
|
679
|
+
```tsx
|
|
680
|
+
<Flex gap="400">
|
|
681
|
+
<Card spacing="md" maxWidth="420px">
|
|
682
|
+
<CardBannerImage width="160px" height="174px">
|
|
683
|
+
<img src={piggies} style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt="" />
|
|
684
|
+
</CardBannerImage>
|
|
685
|
+
<CardBannerContent
|
|
686
|
+
heading="Save a bundle"
|
|
687
|
+
description="Homeowners who bundle two or more services with UW and activate the Cashback Card trial will receive up to £150 in credit."
|
|
688
|
+
/>
|
|
689
|
+
</Card>
|
|
690
|
+
<Card spacing="lg" direction="column" alignItems="start" maxWidth="300px">
|
|
691
|
+
<CardBannerImage height="160px">
|
|
692
|
+
<img src={piggies} style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt="" />
|
|
693
|
+
</CardBannerImage>
|
|
694
|
+
<CardBannerContent
|
|
695
|
+
heading="Save a bundle"
|
|
696
|
+
description="Our network of friendly, local Partners can help you find ways to save."
|
|
697
|
+
>
|
|
698
|
+
<Link href="#">
|
|
699
|
+
Find a UW Partner
|
|
700
|
+
<ChevronRightSmallIcon />
|
|
701
|
+
</Link>
|
|
702
|
+
</CardBannerContent>
|
|
703
|
+
</Card>
|
|
704
|
+
</Flex>
|
|
705
|
+
```
|
|
706
|
+
|
|
707
|
+
### Accessibility
|
|
708
|
+
|
|
709
|
+
By default `CardActions` renders a `ul` element. If the order of the actions
|
|
710
|
+
matters then use the `as` prop to render a `ol` instead.
|
|
711
|
+
|
|
712
|
+
## API
|
|
713
|
+
|
|
714
|
+
This component is based on the `Flex` component and supports the following common props:
|
|
715
|
+
|
|
716
|
+
- AlignSelf
|
|
717
|
+
- Margin
|
|
718
|
+
- Size
|
|
719
|
+
- Position
|
|
720
|
+
- Flex item
|
|
721
|
+
- Grid item
|
|
722
|
+
- Text align
|
|
723
|
+
- Overflow
|
|
724
|
+
- Opacity
|
|
725
|
+
- Order
|
|
726
|
+
- Overflow
|
|
727
|
+
|
|
728
|
+
| Prop | Type | Default | Description |
|
|
729
|
+
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
730
|
+
| `spacing` | `"none" \| "2xs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"` | — | Set responsive spacing between child elements. |
|
|
731
|
+
| `display` | `Responsive<"flex" \| "none" \| "inline-flex">` | — | |
|
|
732
|
+
| `direction` | `Responsive<"row" \| "column" \| "row-reverse" \| "column-reverse">` | — | |
|
|
733
|
+
| `wrap` | `Responsive<"wrap" \| "nowrap" \| "wrap-reverse">` | — | |
|
|
734
|
+
| `alignContent` | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">` | — | |
|
|
735
|
+
| `alignItems` | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "baseline">` | — | |
|
|
736
|
+
| `alignSelf` | `Responsive<"center" \| "start" \| "end" \| "stretch">` | — | |
|
|
737
|
+
| `flex` | `Responsive<string>` | — | |
|
|
738
|
+
| `flexBasis` | `Responsive<string>` | — | |
|
|
739
|
+
| `flexShrink` | `Responsive<string>` | — | |
|
|
740
|
+
| `flexGrow` | `Responsive<string>` | — | |
|
|
741
|
+
| `gap` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
742
|
+
| `rowGap` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
743
|
+
| `columnGap` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
744
|
+
| `gridColumnSpan` | `Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12">>` | — | |
|
|
745
|
+
| `gridArea` | `Responsive<string>` | — | |
|
|
746
|
+
| `gridColumn` | `Responsive<string>` | — | |
|
|
747
|
+
| `gridColumnStart` | `Responsive<string>` | — | |
|
|
748
|
+
| `gridColumnEnd` | `Responsive<string>` | — | |
|
|
749
|
+
| `gridRow` | `Responsive<string>` | — | |
|
|
750
|
+
| `gridRowStart` | `Responsive<string>` | — | |
|
|
751
|
+
| `gridRowEnd` | `Responsive<string>` | — | |
|
|
752
|
+
| `justifyContent` | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">` | — | For flexboxes, the stretch value behaves as flex-start or start. This is because, in flexboxes, stretching is controlled using the flex-grow property. |
|
|
753
|
+
| `margin` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
754
|
+
| `marginTop` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
755
|
+
| `marginRight` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
756
|
+
| `marginBottom` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
757
|
+
| `marginLeft` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
758
|
+
| `marginX` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
759
|
+
| `marginY` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
760
|
+
| `opacity` | `Responsive<string>` | — | |
|
|
761
|
+
| `order` | `Responsive<string>` | — | |
|
|
762
|
+
| `overflow` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
|
|
763
|
+
| `overflowX` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
|
|
764
|
+
| `overflowY` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
|
|
765
|
+
| `position` | `Responsive<"fixed" \| "static" \| "relative" \| "absolute" \| "sticky">` | — | |
|
|
766
|
+
| `inset` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
767
|
+
| `top` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
768
|
+
| `right` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
769
|
+
| `bottom` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
770
|
+
| `left` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
771
|
+
| `width` | `Responsive<string>` | — | |
|
|
772
|
+
| `maxWidth` | `Responsive<string>` | — | |
|
|
773
|
+
| `minWidth` | `Responsive<string>` | — | |
|
|
774
|
+
| `height` | `Responsive<string>` | — | |
|
|
775
|
+
| `maxHeight` | `Responsive<string>` | — | |
|
|
776
|
+
| `minHeight` | `Responsive<string>` | — | |
|
|
777
|
+
| `textAlign` | `Responsive<"center" \| "right" \| "left">` | — | |
|
|
778
|
+
| `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
|
|
779
|
+
| `zIndex` | `Responsive<string>` | — | |
|
|
780
|
+
| `variant` | `"emphasis" \| "subtle"` | — | Sets the card's visual variant |
|
|
781
|
+
| `colorScheme` | `"brand" \| "mobile" \| "neutralStrong" \| "neutralSubtle" \| "energy" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "highlight"` | — | Sets the card's colour scheme |
|
|
782
|
+
| `paddingNone` | `boolean` | — | Remove padding |
|
|
783
|
+
| `shadowColor` | `"brand" \| "mobile" \| "energy" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "functional"` | — | Sets the card shadow colour |
|
|
784
|
+
|
|
785
|
+
### CardInteraction API
|
|
786
|
+
|
|
787
|
+
This component is based on the `Flex` component.
|
|
788
|
+
|
|
789
|
+
### CardActions API
|
|
790
|
+
|
|
791
|
+
This component is based on the `ul` element and supports the following common props:
|
|
792
|
+
|
|
793
|
+
- Margin
|
|
794
|
+
|
|
795
|
+
| Prop | Type | Default | Description |
|
|
796
|
+
| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
|
|
797
|
+
| `as` | `"ul" \| "ol"` | `ul` | Shorthand for changing the default rendered element into a semantically appropriate alternative. |
|
|
798
|
+
| `direction` | `Responsive<"column" \| "row">` | — | |
|
|
799
|
+
| `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
800
|
+
| `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
801
|
+
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
802
|
+
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
803
|
+
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
804
|
+
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
805
|
+
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
806
|
+
|
|
807
|
+
### CardActionLink API
|
|
808
|
+
|
|
809
|
+
This component is based on the `a` element.
|
|
810
|
+
|
|
811
|
+
| Prop | Type | Default | Description |
|
|
812
|
+
| --------------------------------- | ------------------------------------------------------------------------------------------ | ---------- | ------------------------------------------------------------------- |
|
|
813
|
+
| `heading` | `string` | — | |
|
|
814
|
+
| `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
|
|
815
|
+
| `leadingIcon` | `ReactNode` | — | |
|
|
816
|
+
| `leadingIconContainerColorScheme` | `"energy" \| "mobile" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "highlight"` | — | |
|
|
817
|
+
| `trailingIcon` | `ReactNode` | — | |
|
|
818
|
+
| `badge` | `ReactNode` | — | |
|
|
819
|
+
| `badgePlacement` | `"middle" \| "bottom" \| "right"` | `'bottom'` | Placement of the badge element |
|
|
820
|
+
| `asChild` | `boolean` | — | |
|
|
821
|
+
|
|
822
|
+
### CardActionButton API
|
|
823
|
+
|
|
824
|
+
This component is based on the `button` element.
|
|
825
|
+
|
|
826
|
+
| Prop | Type | Default | Description |
|
|
827
|
+
| --------------------------------- | ------------------------------------------------------------------------------------------ | ---------- | ------------------------------------------------------------------- |
|
|
828
|
+
| `heading` | `string` | — | |
|
|
829
|
+
| `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
|
|
830
|
+
| `leadingIcon` | `ReactNode` | — | |
|
|
831
|
+
| `leadingIconContainerColorScheme` | `"energy" \| "mobile" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "highlight"` | — | |
|
|
832
|
+
| `trailingIcon` | `ReactNode` | — | |
|
|
833
|
+
| `badge` | `ReactNode` | — | |
|
|
834
|
+
| `badgePlacement` | `"middle" \| "bottom" \| "right"` | `'bottom'` | Placement of the badge element |
|
|
835
|
+
|
|
836
|
+
### CardContent API
|
|
837
|
+
|
|
838
|
+
This component is based on the `Card` component, supporting the same props except for those related to appearance and polymorphism.
|
|
839
|
+
|
|
840
|
+
| Prop | Type | Default | Description |
|
|
841
|
+
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
842
|
+
| `spacing` | `"none" \| "2xs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"` | — | Set responsive spacing between child elements. |
|
|
843
|
+
| `display` | `Responsive<"flex" \| "none" \| "inline-flex">` | — | |
|
|
844
|
+
| `direction` | `Responsive<"row" \| "column" \| "row-reverse" \| "column-reverse">` | — | |
|
|
845
|
+
| `wrap` | `Responsive<"wrap" \| "nowrap" \| "wrap-reverse">` | — | |
|
|
846
|
+
| `alignContent` | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">` | — | |
|
|
847
|
+
| `alignItems` | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "baseline">` | — | |
|
|
848
|
+
| `alignSelf` | `Responsive<"center" \| "start" \| "end" \| "stretch">` | — | |
|
|
849
|
+
| `flex` | `Responsive<string>` | — | |
|
|
850
|
+
| `flexBasis` | `Responsive<string>` | — | |
|
|
851
|
+
| `flexShrink` | `Responsive<string>` | — | |
|
|
852
|
+
| `flexGrow` | `Responsive<string>` | — | |
|
|
853
|
+
| `gap` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
854
|
+
| `rowGap` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
855
|
+
| `columnGap` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
856
|
+
| `gridColumnSpan` | `Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12">>` | — | |
|
|
857
|
+
| `gridArea` | `Responsive<string>` | — | |
|
|
858
|
+
| `gridColumn` | `Responsive<string>` | — | |
|
|
859
|
+
| `gridColumnStart` | `Responsive<string>` | — | |
|
|
860
|
+
| `gridColumnEnd` | `Responsive<string>` | — | |
|
|
861
|
+
| `gridRow` | `Responsive<string>` | — | |
|
|
862
|
+
| `gridRowStart` | `Responsive<string>` | — | |
|
|
863
|
+
| `gridRowEnd` | `Responsive<string>` | — | |
|
|
864
|
+
| `justifyContent` | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">` | — | For flexboxes, the stretch value behaves as flex-start or start. This is because, in flexboxes, stretching is controlled using the flex-grow property. |
|
|
865
|
+
| `margin` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
866
|
+
| `marginTop` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
867
|
+
| `marginRight` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
868
|
+
| `marginBottom` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
869
|
+
| `marginLeft` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
870
|
+
| `marginX` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
871
|
+
| `marginY` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
872
|
+
| `opacity` | `Responsive<string>` | — | |
|
|
873
|
+
| `order` | `Responsive<string>` | — | |
|
|
874
|
+
| `overflow` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
|
|
875
|
+
| `overflowX` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
|
|
876
|
+
| `overflowY` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
|
|
877
|
+
| `position` | `Responsive<"fixed" \| "static" \| "relative" \| "absolute" \| "sticky">` | — | |
|
|
878
|
+
| `inset` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
879
|
+
| `top` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
880
|
+
| `right` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
881
|
+
| `bottom` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
882
|
+
| `left` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
883
|
+
| `width` | `Responsive<string>` | — | |
|
|
884
|
+
| `maxWidth` | `Responsive<string>` | — | |
|
|
885
|
+
| `minWidth` | `Responsive<string>` | — | |
|
|
886
|
+
| `height` | `Responsive<string>` | — | |
|
|
887
|
+
| `maxHeight` | `Responsive<string>` | — | |
|
|
888
|
+
| `minHeight` | `Responsive<string>` | — | |
|
|
889
|
+
| `textAlign` | `Responsive<"center" \| "right" \| "left">` | — | |
|
|
890
|
+
| `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
|
|
891
|
+
| `zIndex` | `Responsive<string>` | — | |
|
|
892
|
+
| `paddingNone` | `boolean` | — | Remove padding |
|
|
893
|
+
| `shadowColor` | `"brand" \| "mobile" \| "energy" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "functional"` | — | Sets the card shadow colour |
|
|
894
|
+
| `paddingBottomNone` | `boolean` | — | |
|
|
895
|
+
|
|
896
|
+
### CardBannerContent API
|
|
897
|
+
|
|
898
|
+
This component is based on the `Flex` component.
|
|
899
|
+
|
|
900
|
+
| Prop | Type | Default | Description |
|
|
901
|
+
| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
902
|
+
| `asChild` | `boolean` | — | |
|
|
903
|
+
| `display` | `Responsive<"flex" \| "none" \| "inline-flex">` | — | |
|
|
904
|
+
| `wrap` | `Responsive<"wrap" \| "nowrap" \| "wrap-reverse">` | — | |
|
|
905
|
+
| `alignContent` | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">` | — | |
|
|
906
|
+
| `alignItems` | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "baseline">` | — | |
|
|
907
|
+
| `alignSelf` | `Responsive<"center" \| "start" \| "end" \| "stretch">` | — | |
|
|
908
|
+
| `backgroundColor` | `"primary" \| "secondary" \| "brand" \| `var(--h-${string})`` | — | |
|
|
909
|
+
| `borderColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
910
|
+
| `borderTopColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
911
|
+
| `borderRightColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
912
|
+
| `borderBottomColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
913
|
+
| `borderLeftColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
914
|
+
| `borderRadius` | `Responsive<"none" \| "inherit" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "full">` | — | |
|
|
915
|
+
| `borderRadiusTopLeftNone` | `boolean` | — | |
|
|
916
|
+
| `borderRadiusTopRightNone` | `boolean` | — | |
|
|
917
|
+
| `borderRadiusBottomLeftNone` | `boolean` | — | |
|
|
918
|
+
| `borderRadiusBottomRightNone` | `boolean` | — | |
|
|
919
|
+
| `borderRadiusTopNone` | `boolean` | — | |
|
|
920
|
+
| `borderRadiusRightNone` | `boolean` | — | |
|
|
921
|
+
| `borderRadiusBottomNone` | `boolean` | — | |
|
|
922
|
+
| `borderRadiusLeftNone` | `boolean` | — | |
|
|
923
|
+
| `borderStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
924
|
+
| `borderTopStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
925
|
+
| `borderRightStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
926
|
+
| `borderBottomStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
927
|
+
| `borderLeftStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
928
|
+
| `borderWidth` | `Responsive<"0" \| "1" \| "2">` | — | |
|
|
929
|
+
| `borderTopWidth` | `Responsive<"0" \| "1" \| "2">` | — | |
|
|
930
|
+
| `borderRightWidth` | `Responsive<"0" \| "1" \| "2">` | — | |
|
|
931
|
+
| `borderBottomWidth` | `Responsive<"0" \| "1" \| "2">` | — | |
|
|
932
|
+
| `borderLeftWidth` | `Responsive<"0" \| "1" \| "2">` | — | |
|
|
933
|
+
| `color` | `"primary" \| "secondary" \| "brand" \| "affirmative" \| "inverted" \| `var(--h-${string})`` | — | |
|
|
934
|
+
| `flex` | `Responsive<string>` | — | |
|
|
935
|
+
| `flexBasis` | `Responsive<string>` | — | |
|
|
936
|
+
| `flexShrink` | `Responsive<string>` | — | |
|
|
937
|
+
| `flexGrow` | `Responsive<string>` | — | |
|
|
938
|
+
| `gap` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
939
|
+
| `rowGap` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
940
|
+
| `columnGap` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
941
|
+
| `gridColumnSpan` | `Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12">>` | — | |
|
|
942
|
+
| `gridArea` | `Responsive<string>` | — | |
|
|
943
|
+
| `gridColumn` | `Responsive<string>` | — | |
|
|
944
|
+
| `gridColumnStart` | `Responsive<string>` | — | |
|
|
945
|
+
| `gridColumnEnd` | `Responsive<string>` | — | |
|
|
946
|
+
| `gridRow` | `Responsive<string>` | — | |
|
|
947
|
+
| `gridRowStart` | `Responsive<string>` | — | |
|
|
948
|
+
| `gridRowEnd` | `Responsive<string>` | — | |
|
|
949
|
+
| `justifyContent` | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">` | — | For flexboxes, the stretch value behaves as flex-start or start. This is because, in flexboxes, stretching is controlled using the flex-grow property. |
|
|
950
|
+
| `margin` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
951
|
+
| `marginTop` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
952
|
+
| `marginRight` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
953
|
+
| `marginBottom` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
954
|
+
| `marginLeft` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
955
|
+
| `marginX` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
956
|
+
| `marginY` | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
957
|
+
| `opacity` | `Responsive<string>` | — | |
|
|
958
|
+
| `order` | `Responsive<string>` | — | |
|
|
959
|
+
| `overflow` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
|
|
960
|
+
| `overflowX` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
|
|
961
|
+
| `overflowY` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
|
|
962
|
+
| `padding` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
963
|
+
| `paddingTop` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
964
|
+
| `paddingRight` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
965
|
+
| `paddingBottom` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
966
|
+
| `paddingLeft` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
967
|
+
| `paddingX` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
968
|
+
| `paddingY` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
969
|
+
| `position` | `Responsive<"fixed" \| "static" \| "relative" \| "absolute" \| "sticky">` | — | |
|
|
970
|
+
| `inset` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
971
|
+
| `top` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
972
|
+
| `right` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
973
|
+
| `bottom` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
974
|
+
| `left` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
975
|
+
| `width` | `Responsive<string>` | — | |
|
|
976
|
+
| `maxWidth` | `Responsive<string>` | — | |
|
|
977
|
+
| `minWidth` | `Responsive<string>` | — | |
|
|
978
|
+
| `height` | `Responsive<string>` | — | |
|
|
979
|
+
| `maxHeight` | `Responsive<string>` | — | |
|
|
980
|
+
| `minHeight` | `Responsive<string>` | — | |
|
|
981
|
+
| `textAlign` | `Responsive<"center" \| "right" \| "left">` | — | |
|
|
982
|
+
| `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
|
|
983
|
+
| `zIndex` | `Responsive<string>` | — | |
|
|
984
|
+
| `heading` | `string` | — | |
|
|
985
|
+
| `description` | `string` | — | |
|