@amsterdamdatalabs/enact-extensions 0.1.37 → 0.1.47

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/scroll-snap-align.mdx

@@ -0,0 +1,281 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+
+export const title = "scroll-snap-align";
+export const description = "Utilities for controlling the scroll snap alignment of an element.";
+
+<ApiTable
+  rows={[
+    ["snap-start", "scroll-snap-align: start;"],
+    ["snap-end", "scroll-snap-align: end;"],
+    ["snap-center", "scroll-snap-align: center;"],
+    ["snap-align-none", "scroll-snap-align: none;"],
+  ]}
+/>
+
+## Examples
+
+### Snapping to the center
+
+Use the `snap-center` utility to snap an element to its center when being scrolled inside a snap container:
+
+<Figure hint="Scroll in the grid of images to see the expected behavior">
+
+<Example padding={false}>
+  {
+    <div className="relative">
+      <div className="mb-6 ml-[50%] flex items-end justify-start pt-10">
+        <div className="dark:highlight-white/10 ml-2 rounded bg-indigo-50 px-1.5 font-mono text-[0.625rem] leading-6 text-indigo-600 ring-1 ring-indigo-600 ring-inset dark:bg-indigo-500 dark:text-white dark:ring-0">
+          snap point
+        </div>
+        <div className="absolute top-0 bottom-0 left-1/2 border-l border-indigo-500"></div>
+      </div>
+      <div className="relative flex w-full snap-x snap-mandatory gap-6 overflow-x-auto pb-14">
+        <div className="shrink-0 snap-center">
+          <div className="w-4 shrink-0 sm:w-37"></div>
+        </div>
+        <div className="shrink-0 snap-center">
+          <img
+            className="bg-whit h-40 w-80 shrink-0 rounded-lg"
+            src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center">
+          <img
+            className="bg-whit h-40 w-80 shrink-0 rounded-lg"
+            src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center">
+          <img
+            className="bg-whit h-40 w-80 shrink-0 rounded-lg"
+            src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center">
+          <img
+            className="bg-whit h-40 w-80 shrink-0 rounded-lg"
+            src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center">
+          <img
+            className="bg-whit h-40 w-80 shrink-0 rounded-lg"
+            src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center">
+          <img
+            className="bg-whit h-40 w-80 shrink-0 rounded-lg"
+            src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center">
+          <div className="w-4 shrink-0 sm:w-37"></div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:snap-x,snap-center] -->
+<div class="snap-x ...">
+  <div class="snap-center ...">
+    <img src="/img/vacation-01.jpg" />
+  </div>
+  <div class="snap-center ...">
+    <img src="/img/vacation-02.jpg" />
+  </div>
+  <div class="snap-center ...">
+    <img src="/img/vacation-03.jpg" />
+  </div>
+  <div class="snap-center ...">
+    <img src="/img/vacation-04.jpg" />
+  </div>
+  <div class="snap-center ...">
+    <img src="/img/vacation-05.jpg" />
+  </div>
+  <div class="snap-center ...">
+    <img src="/img/vacation-06.jpg" />
+  </div>
+</div>
+```
+
+</Figure>
+
+### Snapping to the start
+
+Use the `snap-start` utility to snap an element to its start when being scrolled inside a snap container:
+
+<Figure hint="Scroll in the grid of images to see the expected behavior">
+
+<Example padding={false}>
+  {
+    <div className="relative">
+      <div className="mb-6 ml-6 flex items-end justify-start pt-10">
+        <div className="dark:highlight-white/10 ml-2 rounded bg-indigo-50 px-1.5 font-mono text-[0.625rem] leading-6 text-indigo-600 ring-1 ring-indigo-600 ring-inset dark:bg-indigo-500 dark:text-white dark:ring-0">
+          snap point
+        </div>
+        <div className="absolute top-0 bottom-0 left-6 border-l border-indigo-500"></div>
+      </div>
+      <div className="relative flex w-full snap-x snap-mandatory gap-6 overflow-x-auto pb-14">
+        <div className="shrink-0 snap-start scroll-mx-6">
+          <div className="w-0 shrink-0"></div>
+        </div>
+        <div className="shrink-0 snap-start scroll-mx-6">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-start scroll-mx-6">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-start scroll-mx-6">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-start scroll-mx-6">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-start scroll-mx-6">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-start scroll-mx-6">
+          <div className="h-40 w-3 shrink-0 sm:-ml-[2px] sm:w-96"></div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:snap-x,snap-start] -->
+
+<div class="snap-x ...">
+  <div class="snap-start ...">
+    <img src="/img/vacation-01.jpg" />
+  </div>
+  <div class="snap-start ...">
+    <img src="/img/vacation-02.jpg" />
+  </div>
+  <div class="snap-start ...">
+    <img src="/img/vacation-03.jpg" />
+  </div>
+  <div class="snap-start ...">
+    <img src="/img/vacation-04.jpg" />
+  </div>
+  <div class="snap-start ...">
+    <img src="/img/vacation-05.jpg" />
+  </div>
+  <div class="snap-start ...">
+    <img src="/img/vacation-06.jpg" />
+  </div>
+</div>
+```
+
+</Figure>
+
+### Snapping to the end
+
+Use the `snap-end` utility to snap an element to its end when being scrolled inside a snap container:
+
+<Figure hint="Scroll in the grid of images to see the expected behavior">
+
+<Example padding={false}>
+  {
+    <div className="relative">
+      <div className="mr-6 mb-6 flex items-end justify-end pt-10">
+        <div className="dark:highlight-white/10 mr-2 rounded bg-indigo-50 px-1.5 font-mono text-[0.625rem] leading-6 text-indigo-600 ring-1 ring-indigo-600 ring-inset dark:bg-indigo-500 dark:text-white dark:ring-0">
+          snap point
+        </div>
+        <div className="absolute top-0 right-6 bottom-0 border-l border-indigo-500"></div>
+      </div>
+      <div className="relative flex w-full snap-x snap-mandatory gap-6 overflow-x-auto pb-14">
+        <div className="shrink-0 snap-end scroll-mx-6">
+          <div className="w-3 shrink-0 sm:-mr-[2px] sm:w-10"></div>
+        </div>
+        <div className="shrink-0 snap-end scroll-mx-6">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-end scroll-mx-6">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-end scroll-mx-6">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-end scroll-mx-6">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-end scroll-mx-6">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-end scroll-mx-6 pr-6">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white"
+            src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:snap-x,snap-end] -->
+<div class="snap-x ...">
+  <div class="snap-end ...">
+    <img src="/img/vacation-01.jpg" />
+  </div>
+  <div class="snap-end ...">
+    <img src="/img/vacation-02.jpg" />
+  </div>
+  <div class="snap-end ...">
+    <img src="/img/vacation-03.jpg" />
+  </div>
+  <div class="snap-end ...">
+    <img src="/img/vacation-04.jpg" />
+  </div>
+  <div class="snap-end ...">
+    <img src="/img/vacation-05.jpg" />
+  </div>
+  <div class="snap-end ...">
+    <img src="/img/vacation-06.jpg" />
+  </div>
+</div>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign property="scroll-snap-align" defaultClass="snap-center" featuredClass="snap-start" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/scroll-snap-stop.mdx

@@ -0,0 +1,198 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+
+export const title = "scroll-snap-stop";
+export const description = "Utilities for controlling whether you can skip past possible snap positions.";
+
+<ApiTable
+  rows={[
+    ["snap-normal", "scroll-snap-stop: normal;"],
+    ["snap-always", "scroll-snap-stop: always;"],
+  ]}
+/>
+
+## Examples
+
+### Forcing snap position stops
+
+Use the `snap-always` utility together with the [snap-mandatory](/docs/scroll-snap-type#mandatory-scroll-snapping) utility to force a snap container to always stop on an element before the user can continue scrolling to the next item:
+
+<Figure hint="Scroll in the grid of images to see the expected behavior">
+
+<Example padding={false}>
+  {
+    <div className="relative">
+      <div className="mb-6 ml-[50%] flex items-end justify-start pt-10">
+        <div className="dark:highlight-white/10 ml-2 rounded bg-indigo-50 px-1.5 font-mono text-[0.625rem] leading-6 text-indigo-600 ring-1 ring-indigo-600 ring-inset dark:bg-indigo-500 dark:text-white dark:ring-0">
+          snap point
+        </div>
+        <div className="absolute top-0 bottom-0 left-1/2 border-l border-indigo-500"></div>
+      </div>
+      <div className="relative flex w-full snap-x snap-mandatory gap-6 overflow-x-auto pb-14">
+        <div className="shrink-0 snap-center">
+          <div className="w-4 shrink-0 sm:w-37"></div>
+        </div>
+        <div className="shrink-0 snap-center snap-always first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white object-cover"
+            src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center snap-always first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white object-cover"
+            src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center snap-always first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white object-cover"
+            src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center snap-always first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white object-cover"
+            src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center snap-always first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white object-cover"
+            src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center snap-always first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white object-cover"
+            src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center">
+          <div className="w-4 shrink-0 sm:w-37"></div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:snap-x,snap-mandatory,snap-always] -->
+<div class="snap-x snap-mandatory ...">
+  <div class="snap-center snap-always ...">
+    <img src="/img/vacation-01.jpg" />
+  </div>
+  <div class="snap-center snap-always ...">
+    <img src="/img/vacation-02.jpg" />
+  </div>
+  <div class="snap-center snap-always ...">
+    <img src="/img/vacation-03.jpg" />
+  </div>
+  <div class="snap-center snap-always ...">
+    <img src="/img/vacation-04.jpg" />
+  </div>
+  <div class="snap-center snap-always ...">
+    <img src="/img/vacation-05.jpg" />
+  </div>
+  <div class="snap-center snap-always ...">
+    <img src="/img/vacation-06.jpg" />
+  </div>
+</div>
+```
+
+</Figure>
+
+### Skipping snap position stops
+
+Use the `snap-normal` utility to allow a snap container to skip past possible scroll snap positions:
+
+<Figure hint="Scroll in the grid of images to see the expected behavior">
+
+<Example padding={false}>
+  {
+    <div className="relative">
+      <div className="mb-6 ml-[50%] flex items-end justify-start pt-10">
+        <div className="dark:highlight-white/10 ml-2 rounded bg-indigo-50 px-1.5 font-mono text-[0.625rem] leading-6 text-indigo-600 ring-1 ring-indigo-600 ring-inset dark:bg-indigo-500 dark:text-white dark:ring-0">
+          snap point
+        </div>
+        <div className="absolute top-0 bottom-0 left-1/2 border-l border-indigo-500"></div>
+      </div>
+      <div className="relative flex w-full snap-x gap-6 overflow-x-auto pb-14">
+        <div className="shrink-0 snap-center">
+          <div className="w-4 shrink-0 sm:w-37"></div>
+        </div>
+        <div className="shrink-0 snap-center snap-normal first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white object-cover"
+            src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center snap-normal first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white object-cover"
+            src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center snap-normal first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white object-cover"
+            src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center snap-normal first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white object-cover"
+            src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center snap-normal first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white object-cover"
+            src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center snap-normal first:pl-8 last:pr-8">
+          <img
+            className="h-40 w-80 shrink-0 rounded-lg bg-white object-cover"
+            src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
+          />
+        </div>
+        <div className="shrink-0 snap-center">
+          <div className="w-4 shrink-0 sm:w-37"></div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:snap-x,snap-normal] -->
+<div class="snap-x ...">
+  <div class="snap-center snap-normal ...">
+    <img src="/img/vacation-01.jpg" />
+  </div>
+  <div class="snap-center snap-normal ...">
+    <img src="/img/vacation-02.jpg" />
+  </div>
+  <div class="snap-center snap-normal ...">
+    <img src="/img/vacation-03.jpg" />
+  </div>
+  <div class="snap-center snap-normal ...">
+    <img src="/img/vacation-04.jpg" />
+  </div>
+  <div class="snap-center snap-normal ...">
+    <img src="/img/vacation-05.jpg" />
+  </div>
+  <div class="snap-center snap-normal ...">
+    <img src="/img/vacation-06.jpg" />
+  </div>
+</div>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign property="scroll-snap-stop" defaultClass="snap-always" featuredClass="snap-normal" />