docs(PPDSC-2172): Patterns index and overview pages

site/components/content-structure/types.tsx

@@ -1,7 +1,7 @@
 import {MQ} from 'newskit';
 
 export interface ContentBaseProps {
-  headline?: string;
+  headline?: string | React.ReactElement;
   description?: string | React.ReactElement;
   toc?: string;
   id?: string;

site/components/feature-card/__tests__/__snapshots__/feature-card.test.tsx.snap

@@ -2734,11 +2734,11 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = `
               <section
                 class="emotion-8"
               >
-                <h1
+                <h3
                   class="nk-headline-heading emotion-9"
                 >
                   Interactive Horizontal Card
-                </h1>
+                </h3>
               </section>
             </div>
             <div
@@ -3059,11 +3059,11 @@ exports[`FeatureCard Renders interactive vertical card without button 1`] = `
               <section
                 class="emotion-8"
               >
-                <h1
+                <h3
                   class="nk-headline-heading emotion-9"
                 >
                   Interactive Horizontal Card
-                </h1>
+                </h3>
               </section>
             </div>
             <div
@@ -3893,11 +3893,11 @@ exports[`FeatureCard Renders non-interactive vertical card 1`] = `
           <section
             class="emotion-6"
           >
-            <h1
+            <h3
               class="nk-headline-heading emotion-7"
             >
               Interactive Horizontal Card
-            </h1>
+            </h3>
           </section>
         </div>
         <div
@@ -4777,11 +4777,11 @@ exports[`FeatureCard Renders vertical card with clickable button only 1`] = `
           <section
             class="emotion-6"
           >
-            <h1
+            <h3
               class="nk-headline-heading emotion-7"
             >
               Interactive Horizontal Card
-            </h1>
+            </h3>
           </section>
         </div>
         <div

site/components/feature-card/feature-card.tsx

@@ -281,6 +281,7 @@ const FeatureCardVertical = React.forwardRef<HTMLDivElement, FeatureCardProps>(
           {title && (
             <Block spaceStack={{xs: 'space045', lg: 'space050'}}>
               <Headline
+                headingAs="h3"
                 overrides={{
                   typographyPreset: titleTypographyPreset,
 

site/components/illustrations/patterns/forms/overview/why-use/best-practice.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import {getSSRId} from 'newskit';
+import {Svg} from '../../../../svg';
+import {Path} from '../../../../path';
+import {Rect} from '../../../../rect';
+
+export const BestPractice: React.FC = () => {
+  const mask0 = getSSRId();
+  const mask1 = getSSRId();
+  const clip0 = getSSRId();
+
+  return (
+    <Svg
+      width="1490"
+      height="838"
+      viewBox="0 0 1490 838"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath={`url(#${clip0})`}>
+        <Rect width="1490" height="838" fill="illustrationPalette050" />
+        <Path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1799.67 1502.22C2246.67 1232.93 2253.2 923.403 2254.08 915.99C2279.74 699.398 2303.7 238.692 2096.08 1.53646C1888.46 -235.619 1437.97 -485.965 1266.76 -85.7252C1257.08 431.049 749.767 472.051 629.082 752.465C508.397 1032.88 586.752 1263.66 805.776 1466.37C1024.8 1669.08 1352.67 1771.5 1799.67 1502.22Z"
+          fill="illustrationPalette030"
+        />
+        <Path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M-1023.05 147.076C-917.009 598.037 -655.352 687.984 -649.284 690.748C-472.001 771.502 -230.773 799.119 -18.272 746.126C194.229 693.134 385.719 470.522 404.557 281.293C423.395 92.0641 334.234 20.9049 265.47 -285.349C196.705 -591.603 340.721 -791.954 158.031 -880.637C-24.6586 -969.32 -510.829 -751.65 -718.692 -682.526C-921.359 -615.13 -1129.1 -303.885 -1023.05 147.076Z"
+          fill="illustrationPalette040"
+        />
+        <mask
+          id={mask0}
+          mask-type="alpha"
+          maskUnits="userSpaceOnUse"
+          x="440"
+          y="108"
+          width="611"
+          height="622"
+        >
+          <Path
+            d="M594.544 151.407C448.023 238.076 396.853 428.308 480.253 576.302C563.653 724.297 750.041 774.011 896.563 687.343C1043.08 600.675 1094.25 410.443 1010.85 262.448C927.454 114.454 741.066 64.7391 594.544 151.407Z"
+            fill="white"
+          />
+        </mask>
+        <g mask={`url(#${mask0})`} />
+        <mask
+          id={mask1}
+          mask-type="alpha"
+          maskUnits="userSpaceOnUse"
+          x="440"
+          y="108"
+          width="611"
+          height="622"
+        >
+          <Path
+            d="M594.544 151.407C448.023 238.076 396.853 428.308 480.253 576.302C563.653 724.297 750.041 774.011 896.563 687.343C1043.08 600.675 1094.25 410.443 1010.85 262.448C927.454 114.454 741.066 64.7391 594.544 151.407Z"
+            fill="white"
+          />
+        </mask>
+        <g mask={`url(#${mask1})`}>
+          <Path
+            d="M594.41 151.27C447.964 237.861 396.915 428.093 480.39 576.165C563.865 724.236 750.253 774.075 896.7 687.484C1043.15 600.893 1094.2 410.661 1010.72 262.589C927.246 114.518 740.857 64.6782 594.41 151.27Z"
+            fill="teal070"
+          />
+          <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M1023.48 289.415C955.819 139.064 859.952 126.435 857.682 125.905C791.351 110.407 649.168 87.1141 568.131 144.585C487.094 202.056 447.778 421.343 565.936 489.071C672.708 550.273 682.788 649.494 751.521 667.38C820.255 685.266 906.147 664.304 976.897 602.057C1047.65 539.81 1091.14 439.767 1023.48 289.415Z"
+            fill="teal060"
+          />
+          <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M972.715 150.116C1066.04 229.234 1056.21 302.744 1056.14 304.529C1054.13 356.692 1051.99 428.668 995.378 477.683C938.762 526.698 826.256 525.432 823.851 525.235C776.258 521.347 757.387 447.327 718.81 407.942C677.363 365.627 643.862 328.487 644.649 274.083C645.437 219.679 701.153 166.116 741.964 124.449C781.754 83.8226 879.39 70.9974 972.715 150.116Z"
+            fill="teal040"
+          />
+          <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M982.252 159.543C1035.81 204.946 1030.17 247.13 1030.13 248.155C1028.97 278.089 1027.75 319.394 995.258 347.522C962.768 375.649 898.205 374.923 896.825 374.81C869.513 372.579 858.683 330.101 836.545 307.5C812.76 283.217 793.536 261.904 793.987 230.683C794.439 199.462 826.413 168.725 849.833 144.813C872.667 121.499 928.697 114.139 982.252 159.543Z"
+            fill="illustrationPalette020"
+          />
+        </g>
+        <Path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M912.302 323.962L881.135 292.805L688.238 485.638L596.873 394.303L565.706 425.46L688.176 547.89L689.219 546.847L689.282 546.91L912.302 323.962Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <clipPath id={clip0}>
+          <Rect width="1490" height="838" fill="white" />
+        </clipPath>
+      </defs>
+    </Svg>
+  );
+};
+
+export default BestPractice;