@amsterdamdatalabs/enact-extensions 0.1.42 → 0.1.48

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/margin.mdx

@@ -0,0 +1,397 @@
+import dedent from "dedent";
+import { ApiTable } from "@/components/api-table.tsx";
+import { CustomizingYourSpacingScale, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { Stripes } from "@/components/stripes.tsx";
+
+export const title = "margin";
+export const description = "Utilities for controlling an element's margin.";
+
+<ApiTable
+  rows={[
+    ...[
+      ["m", "margin"],
+      ["mx", "margin-inline"],
+      ["my", "margin-block"],
+      ["ms", "margin-inline-start"],
+      ["me", "margin-inline-end"],
+      ["mbs", "margin-block-start"],
+      ["mbe", "margin-block-end"],
+      ["mt", "margin-top"],
+      ["mr", "margin-right"],
+      ["mb", "margin-bottom"],
+      ["ml", "margin-left"],
+    ].flatMap(([prefix, property]) => [
+      [`${prefix}-<number>`, `${property}: calc(var(--spacing) * <number>);`],
+      [`-${prefix}-<number>`, `${property}: calc(var(--spacing) * -<number>);`],
+      [`${prefix}-auto`, `${property}: auto;`],
+      [`${prefix}-px`, `${property}: 1px;`],
+      [`-${prefix}-px`, `${property}: -1px;`],
+      [`${prefix}-(<custom-property>)`, `${property}: var(<custom-property>);`],
+      [`${prefix}-[<value>]`, `${property}: <value>;`],
+    ]),
+    ...[
+      ["space-x", "margin-inline"],
+      ["space-y", "margin-block"],
+    ].flatMap(([prefix, property]) => [
+      [
+        `${prefix}-<number>`,
+        dedent`& > :not(:last-child) {
+          --tw-${prefix}-reverse: 0;
+          ${property}-start: calc(calc(var(--spacing) * <number>) * var(--tw-${prefix}-reverse));
+          ${property}-end: calc(calc(var(--spacing) * <number>) * calc(1 - var(--tw-${prefix}-reverse)));
+        };`,
+      ],
+      [
+        `-${prefix}-<number>`,
+        dedent`& > :not(:last-child) {
+          --tw-${prefix}-reverse: 0;
+          ${property}-start: calc(calc(var(--spacing) * -<number>) * var(--tw-${prefix}-reverse));
+          ${property}-end: calc(calc(var(--spacing) * -<number>) * calc(1 - var(--tw-${prefix}-reverse)));
+        };`,
+      ],
+      [
+        `${prefix}-px`,
+        dedent`& > :not(:last-child) {
+          --tw-${prefix}-reverse: 0;
+          ${property}-start: calc(1px * var(--tw-${prefix}-reverse));
+          ${property}-end: calc(1px * calc(1 - var(--tw-${prefix}-reverse)));
+        };`,
+      ],
+      [
+        `-${prefix}-px`,
+        dedent`& > :not(:last-child) {
+          --tw-${prefix}-reverse: 0;
+          ${property}-start: calc(-1px * var(--tw-${prefix}-reverse));
+          ${property}-end: calc(-1px * calc(1 - var(--tw-${prefix}-reverse)));
+        };`,
+      ],
+      [
+        `${prefix}-(<custom-property>)`,
+        dedent`& > :not(:last-child) {
+          --tw-${prefix}-reverse: 0;
+          ${property}-start: calc(var(<custom-property>) * var(--tw-${prefix}-reverse));
+          ${property}-end: calc(var(<custom-property>) * calc(1 - var(--tw-${prefix}-reverse)));
+        };`,
+      ],
+      [
+        `${prefix}-[<value>]`,
+        dedent`& > :not(:last-child) {
+          --tw-${prefix}-reverse: 0;
+          ${property}-start: calc(<value> * var(--tw-${prefix}-reverse));
+          ${property}-end: calc(<value> * calc(1 - var(--tw-${prefix}-reverse)));
+        };`,
+      ],
+    ]),
+    [
+      "space-x-reverse",
+      dedent`& > :not(:last-child)) {
+        --tw-space-x-reverse: 1;
+      }`,
+    ],
+    [
+      "space-y-reverse",
+      dedent`& > :not(:last-child)) {
+        --tw-space-y-reverse: 1;
+      }`,
+    ],
+
+]}
+/>
+
+## Examples
+
+### Basic example
+
+Use `m-<number>` utilities like `m-4` and `m-8` to control the margin on all sides of an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex justify-center font-mono text-sm leading-6 font-bold text-white">
+      <div className="relative flow-root rounded-lg">
+        <div className="absolute inset-0">
+          <Stripes border className="h-full rounded-lg" />
+        </div>
+        <div className="relative m-8 rounded-lg bg-blue-500 p-4">m-8</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:m-8] -->
+<div class="m-8 ...">m-8</div>
+```
+
+</Figure>
+
+### Adding margin to a single side
+
+Use `mt-<number>`, `mr-<number>`, `mb-<number>`, and `ml-<number>` utilities like `ml-2` and `mt-6` to control the margin on one side of an element:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="relative h-56 font-mono text-sm leading-6 font-bold text-white">
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 md:-ml-24">
+        <div className="relative pt-6">
+          <Stripes border="x" className="absolute inset-0 rounded-b-lg" />
+          <div className="relative rounded-lg bg-purple-500 p-4">mt-6</div>
+        </div>
+      </div>
+      <div className="absolute top-1/2 right-0 -translate-y-1/2">
+        <div className="relative pr-4">
+          <Stripes border="y" className="absolute inset-0 rounded-l-lg" />
+          <div className="relative rounded-lg bg-purple-500 p-4">mr-4</div>
+        </div>
+      </div>
+      <div className="absolute bottom-0 left-1/2 -translate-x-1/2 md:ml-24">
+        <div className="relative pb-8">
+          <Stripes border="x" className="absolute inset-0 rounded-t-lg" />
+          <div className="relative rounded-lg bg-purple-500 p-4">mb-8</div>
+        </div>
+      </div>
+      <div className="absolute top-1/2 left-0 -translate-y-1/2">
+        <div className="relative pl-2">
+          <Stripes border="y" className="absolute inset-0 rounded-r-lg" />
+          <div className="relative rounded-lg bg-purple-500 p-4">ml-2</div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:mt-6,mr-4,mb-8,ml-2] -->
+<div class="mt-6 ...">mt-6</div>
+<div class="mr-4 ...">mr-4</div>
+<div class="mb-8 ...">mb-8</div>
+<div class="ml-2 ...">ml-2</div>
+```
+
+</Figure>
+
+### Adding horizontal margin
+
+Use `mx-<number>` utilities like `mx-4` and `mx-8` to control the horizontal margin of an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex justify-center font-mono text-sm leading-6 font-bold text-white">
+      <div className="relative rounded-lg">
+        <div className="absolute inset-0">
+          <Stripes border className="h-full rounded-lg" />
+        </div>
+        <div className="relative mx-8 rounded-lg bg-indigo-500 p-4">mx-8</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:mx-8] -->
+<div class="mx-8 ...">mx-8</div>
+```
+
+</Figure>
+
+### Adding vertical margin
+
+Use `my-<number>` utilities like `my-4` and `my-8` to control the vertical margin of an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex justify-center font-mono text-sm leading-6 font-bold text-white">
+      <div className="relative flow-root rounded-lg">
+        <div className="absolute inset-0">
+          <Stripes border className="h-full rounded-lg" />
+        </div>
+        <div className="relative my-8 rounded-lg bg-pink-500 p-4">my-8</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:my-8] -->
+<div class="my-8 ...">my-8</div>
+```
+
+</Figure>
+
+### Using negative values
+
+To use a negative margin value, prefix the class name with a dash to convert it to a negative value:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex justify-center font-mono text-sm leading-6 font-bold text-white">
+      <div className="flex flex-col items-center">
+        <div className="relative h-16 w-36 overflow-hidden rounded-md border border-sky-700/10 bg-sky-400/20"></div>
+        <div className="relative -mt-8 flex items-center justify-center rounded-md bg-sky-500 p-4">-mt-8</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:-mt-8] -->
+<div class="h-16 w-36 bg-sky-400 opacity-20 ..."></div>
+<div class="-mt-8 bg-sky-300 ...">-mt-8</div>
+```
+
+</Figure>
+
+### Using logical properties
+
+Use `ms-<number>` or `me-<number>` utilities like `ms-4` and `me-8` to set the `margin-inline-start` and `margin-inline-end` logical properties:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-2 place-items-center gap-x-4">
+      <div className="flex flex-col items-start gap-y-4" dir="ltr">
+        <p className="text-sm font-medium">Left-to-right</p>
+        <div className="relative flex rounded-lg font-mono text-sm leading-6 font-bold text-white">
+          <Stripes border className="absolute min-h-full w-full rounded-lg" />
+          <div className="relative ms-8 rounded-lg bg-indigo-500 p-4">ms-8</div>
+        </div>
+        <div className="relative mt-4 flex rounded-lg font-mono text-sm leading-6 font-bold text-white">
+          <Stripes border className="absolute min-h-full w-full rounded-lg" />
+          <div className="relative me-8 rounded-lg bg-indigo-500 p-4">me-8</div>
+        </div>
+      </div>
+      <div className="flex flex-col items-start gap-y-4" dir="rtl">
+        <p className="text-sm font-medium">Right-to-left</p>
+        <div className="relative flex rounded-lg font-mono text-sm leading-6 font-bold text-white">
+          <Stripes border className="absolute min-h-full w-full rounded-lg" />
+          <div className="relative ms-8 rounded-lg bg-indigo-500 p-4">ms-8</div>
+        </div>
+        <div className="relative mt-4 flex rounded-lg font-mono text-sm leading-6 font-bold text-white">
+          <Stripes border className="absolute min-h-full w-full rounded-lg" />
+          <div className="relative me-8 rounded-lg bg-indigo-500 p-4">me-8</div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:ms-8,me-8] -->
+<!-- [!code word:dir="ltr"] -->
+<!-- [!code word:dir="rtl"] -->
+<div>
+  <div dir="ltr">
+    <div class="ms-8 ...">ms-8</div>
+    <div class="me-8 ...">me-8</div>
+  </div>
+  <div dir="rtl">
+    <div class="ms-8 ...">ms-8</div>
+    <div class="me-8 ...">me-8</div>
+  </div>
+</div>
+```
+
+</Figure>
+
+Use the `mbs-<number>` and `mbe-<number>` utilities to set the `margin-block-start` and `margin-block-end` logical properties, which map to either the top or bottom side based on the writing mode:
+
+```html
+<!-- [!code classes:mbs-8] -->
+<div class="mbs-8 ...">mbs-8</div>
+```
+
+### Adding space between children
+
+Use `space-x-<number>` or `space-y-<number>` utilities like `space-x-4` and `space-y-8` to control the space between elements:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex justify-start font-mono text-sm leading-6 font-bold text-white">
+      <div className="relative flex space-x-4 rounded-lg">
+        <div className="absolute inset-0">
+          <Stripes border="y" className="h-full rounded-lg" />
+        </div>
+        <div className="relative flex h-14 w-14 items-center justify-center rounded-lg bg-fuchsia-500">01</div>
+        <div className="relative flex h-14 w-14 items-center justify-center rounded-lg bg-fuchsia-500">02</div>
+        <div className="relative flex h-14 w-14 items-center justify-center rounded-lg bg-fuchsia-500">03</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:space-x-4] -->
+<div class="flex space-x-4 ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+</Figure>
+
+#### Reversing children order
+
+If your elements are in reverse order (using say `flex-row-reverse` or `flex-col-reverse`), use the `space-x-reverse` or `space-y-reverse` utilities to ensure the space is added to the correct side of each element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex justify-end font-mono text-sm leading-6 font-bold text-white">
+      <div className="relative flex flex-row-reverse space-x-4 space-x-reverse rounded-lg">
+        <div className="absolute inset-0">
+          <Stripes border="y" className="h-full rounded-lg" />
+        </div>
+        <div className="relative flex h-14 w-14 items-center justify-center rounded-lg bg-cyan-500">01</div>
+        <div className="relative flex h-14 w-14 items-center justify-center rounded-lg bg-cyan-500">02</div>
+        <div className="relative flex h-14 w-14 items-center justify-center rounded-lg bg-cyan-500">03</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:flex-row-reverse,space-x-4,space-x-reverse] -->
+<div class="flex flex-row-reverse space-x-4 space-x-reverse ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+</Figure>
+
+#### Limitations
+
+The space utilities are really just a shortcut for adding margin to all-but-the-last-item in a group, and aren't designed to handle complex cases like grids, layouts that wrap, or situations where the children are rendered in a complex custom order rather than their natural DOM order.
+
+For those situations, it's better to use the [gap utilities](/docs/gap) when possible, or add margin to every element with a matching negative margin on the parent.
+
+Additionally, the space utilities are not designed to work together with the [divide utilities](/docs/border-width#between-children). For those situations, consider adding margin/padding utilities to the children instead.
+
+### Using a custom value
+
+<UsingACustomValue utilities={["m", "mx", "mb"]} name="margin" variable="margin" value="5px" />
+
+### Responsive design
+
+<ResponsiveDesign property="margin" defaultClass="mt-4" featuredClass="mt-8" />
+
+## Customizing your theme
+
+<CustomizingYourSpacingScale utilities={["m", "mx", "my", "ms", "me", "mbs", "mbe", "mt", "mr", "mb", "ml"]} />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/mask-clip.mdx

@@ -0,0 +1,66 @@
+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 = "mask-clip";
+export const description = "Utilities for controlling the bounding box of an element's mask.";
+
+<ApiTable
+  rows={[
+    ["mask-clip-border", "mask-clip: border-box;"],
+    ["mask-clip-padding", "mask-clip: padding-box;"],
+    ["mask-clip-content", "mask-clip: content-box;"],
+    ["mask-clip-fill", "mask-clip: fill-box;"],
+    ["mask-clip-stroke", "mask-clip: stroke-box;"],
+    ["mask-clip-view", "mask-clip: view-box;"],
+    ["mask-no-clip", "mask-clip: no-clip;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `mask-clip-border`, `mask-clip-padding`, and `mask-clip-content` to control the bounding box of an element's mask:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col items-center justify-center gap-y-10 text-center font-mono text-xs font-medium text-gray-500 sm:flex-row sm:space-y-0 sm:space-x-10 dark:text-gray-400">
+      <div className="flex flex-col items-center">
+        <p className="mb-3">mask-clip-border</p>
+        <div className="relative size-24 rounded-lg border-3 border-dashed border-indigo-500/50 dark:border-indigo-400/75">
+          <div className="absolute -inset-[3px] bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-[50%_50%] mask-radial-from-100% bg-cover bg-center mask-clip-border p-1.5"></div>
+        </div>
+      </div>
+      <div className="flex flex-col items-center">
+        <p className="mb-3">mask-clip-padding</p>
+        <div className="relative size-24 rounded-lg border-3 border-dashed border-indigo-500/50 dark:border-indigo-400/75">
+          <div className="absolute -inset-[3px] rounded-lg border-3 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-[50%_50%] mask-radial-from-100% bg-cover bg-center mask-clip-padding p-1.5"></div>
+        </div>
+      </div>
+      <div className="flex flex-col items-center">
+        <p className="mb-3">mask-clip-content</p>
+        <div className="relative size-24 rounded-lg border-3 border-dashed border-indigo-500/50 dark:border-indigo-400/75">
+          <div className="absolute -inset-[3px] rounded-lg border-3 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-[50%_50%] mask-radial-from-100% bg-cover bg-center mask-clip-content p-1.5"></div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+{/* prettier-ignore */}
+```html
+<!-- [!code classes:mask-clip-border,mask-clip-padding,mask-clip-content] -->
+<div class="mask-clip-border border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div>
+<div class="mask-clip-padding border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div>
+<div class="mask-clip-content border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign property="mask-clip" defaultClass="mask-clip-border" featuredClass="mask-clip-padding" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/mask-composite.mdx

@@ -0,0 +1,70 @@
+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 = "mask-composite";
+export const description = "Utilities for controlling how multiple masks are combined together.";
+
+<ApiTable
+  rows={[
+    ["mask-add", "mask-composite: add;"],
+    ["mask-subtract", "mask-composite: subtract;"],
+    ["mask-intersect", "mask-composite: intersect;"],
+    ["mask-exclude", "mask-composite: exclude;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `mask-add` and `mask-intersect` to control how an element's masks are combined together:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-2 items-center justify-center justify-items-center gap-y-8 py-4 text-center font-mono text-xs font-medium text-gray-500 max-sm:grid-cols-1 dark:text-gray-400">
+      <div className="relative grid justify-center">
+        <div className="absolute right-[calc(5%-2px)] -bottom-[2px] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
+        <div className="absolute -bottom-[2px] left-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
+        <p className="mb-3">mask-add</p>
+        <div className="h-24 w-48 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center mask-add"></div>
+      </div>
+      <div className="relative grid justify-center">
+        <div className="absolute right-[calc(5%-2px)] -bottom-[2px] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
+        <div className="absolute -bottom-[2px] left-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
+        <p className="mb-3 text-center">mask-subtract</p>
+        <div className="h-24 w-48 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center mask-subtract"></div>
+      </div>
+      <div className="relative grid justify-center">
+        <div className="absolute right-[calc(5%-2px)] -bottom-[2px] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
+        <div className="absolute -bottom-[2px] left-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
+        <p className="mb-3 text-center">mask-intersect</p>
+        <div className="h-24 w-48 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center mask-intersect"></div>
+      </div>
+      <div className="relative grid justify-center">
+        <div className="absolute right-[calc(5%-2px)] -bottom-[2px] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
+        <div className="absolute -bottom-[2px] left-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
+        <p className="mb-3 text-center">mask-exclude</p>
+        <div className="h-24 w-48 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center mask-exclude"></div>
+      </div>
+    </div>
+  }
+</Example>
+
+{/* prettier-ignore */}
+```html
+<!-- [!code classes:mask-add,mask-subtract,mask-intersect,mask-exclude] -->
+<div class="mask-add mask-[url(/img/circle.png),url(/img/circle.png)] mask-[position:30%_50%,70%_50%] bg-[url(/img/mountains.jpg)]"></div>
+<div class="mask-subtract mask-[url(/img/circle.png),url(/img/circle.png)] mask-[position:30%_50%,70%_50%] bg-[url(/img/mountains.jpg)]"></div>
+<div class="mask-intersect mask-[url(/img/circle.png),url(/img/circle.png)] mask-[position:30%_50%,70%_50%] bg-[url(/img/mountains.jpg)]"></div>
+<div class="mask-exclude mask-[url(/img/circle.png),url(/img/circle.png)] mask-[position:30%_50%,70%_50%] bg-[url(/img/mountains.jpg)]"></div>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign property="mask-composite" defaultClass="mask-add" featuredClass="mask-subtract" />