|
177 | 177 | "docs": {
|
178 | 178 | "hero": {
|
179 | 179 | "title": "Carousel",
|
180 |
| - "description": "The Carousel component allows users to navigate through a series of content in a linear way by swiping.\n\nUse the Carousel in these cases:\n* Focus on one item at a time: When you have a large set of items but want the user to focus on one at a time.\n* Indicate more content: When you want to subtly hint that additional items are available beyond what is currently visible.\n* Save space: When displaying all items at once isn't practical due to limited space.\n\nAim to prioritize carousel items, so that the ones of most interest to users are shown first. ", |
| 180 | + "description": "The Carousel component allows users to navigate through a series of content in a linear way by swiping.", |
181 | 181 | "type": "hero",
|
182 | 182 | "layout": "horizontal",
|
183 | 183 | "content": [
|
|
190 | 190 | {
|
191 | 191 | "title": "Overview",
|
192 | 192 | "sections": [
|
| 193 | + { |
| 194 | + "type": "section", |
| 195 | + "title": "Usage", |
| 196 | + "description": "Carousels are useful when you want users to focus on one item at a time, especially with large content sets. They can hint at more content and save space by showing items without cluttering the layout.\nIt's best to arrange items so the most important ones appear first, making them easy for users to find.", |
| 197 | + "content": [ |
| 198 | + { |
| 199 | + "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Carousel/carousel_overview_usage.png" |
| 200 | + } |
| 201 | + ] |
| 202 | + }, |
193 | 203 | {
|
194 | 204 | "type": "list",
|
195 | 205 | "items": [
|
196 | 206 | {
|
197 |
| - "title": "Cards (default)", |
198 |
| - "description": "Width can change according to the content- showing minimum S7 ‘hint’ of the next/previous item.\n\nWithin a single carousel, all cards should have the same width. However, card widths can vary between different carousels.", |
| 207 | + "title": "Cards", |
| 208 | + "description": "Card widths can adjust based on their content, keeping at least an S7-sized \"hint\" of the next or previous item visible.\nAll cards in a single carousel should have the same width, but widths can vary between carousels.", |
199 | 209 | "content": [
|
200 | 210 | {
|
201 |
| - "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Carousel/carousel_overview_cards.png" |
| 211 | + "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Carousel/carousel_overview_types_card.png" |
202 | 212 | }
|
203 | 213 | ]
|
204 | 214 | },
|
205 | 215 | {
|
206 | 216 | "title": "Gallery",
|
207 |
| - "description": "Item Width: Full width.\nItem Height: Adjusts dynamically based on the content. \nSpacing: No spacing between items.\n\nCounter: a counter can be displayed to indicate the current slide number and the total number of slides.\nUpon swiping, the counter remains in place.", |
| 217 | + "description": "Item Width: Full width.\nItem Height: Adjusts dynamically based on the content. \nSpacing: No spacing between items. \n\nCounter: a counter can be displayed to indicate the current slide number and the total number of slides. Upon swiping, the counter remains in place.", |
208 | 218 | "content": [
|
209 | 219 | {
|
210 | 220 | "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Carousel/carousel_overview_gallery.png"
|
|
213 | 223 | },
|
214 | 224 | {
|
215 | 225 | "title": "Custom Content",
|
216 |
| - "description": "You can use the Carousel with custom content. (e.g. picking a template for an email campaign)\n\nThe spacing between the items of the carousel can be customized.", |
| 226 | + "description": "You can use the Carousel with custom content.
The spacing between the items of the carousel can be customized.", |
217 | 227 | "content": [
|
218 | 228 | {
|
219 | 229 | "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Carousel/carousel_overview_customContent.png"
|
|
0 commit comments