From 335b02cd7d618cd06aeb54301509474df115958c Mon Sep 17 00:00:00 2001
From: jannuk59 <janani.ravindren@news.co.uk>
Date: Fri, 19 May 2023 14:39:35 +0530
Subject: [PATCH] Docs(822) Card Composable doc site (#876)

* docs(822): card composable doc site

* docs(822): added illustrations

* docs(822): doc corrections

* docs(822): accessibility fixes

* docs(822): components api fixes

* docs(822): unordered list fixes

* docs(822): added the title to leftside menubar

* docs(822): storybook changes

* docs(822): design feedback fix

* docs(822): expand prop

* docs(822): unordered list inline alignment fix

* docs(822): added link for the grid layour

* docs(822): added grid layout component in related component

* docs(822): snapshot update

* docs(822): removed padding and margin props row

* docs(822): content change for props row

* docs(822): remomed props row

* docs(822): added props and overrides for cardLink

* docs(822): added props and overrides for all the components

* docs(822): grouping the props into const

* docs(822): grouped the props into consts

* docs(822): refinement

* docs(822): props and overrides

* docs(822): removed stylepreset and transitionPreset

---------

Co-authored-by: Ravindren <jravindren@NTS251819MC.local>
---
 .../__snapshots__/sidebar.test.tsx.snap       | 421 +++++----
 site/pages/components/card-composable.tsx     | 808 ++++++++++++++++++
 .../components/card-composable/anatomy.svg    |  48 ++
 .../behaviours/grid-layout.svg                |  21 +
 .../card-composable/behaviours/static.svg     |  19 +
 .../components/card-composable/hero.svg       |  11 +
 .../card-composable/options/expand.svg        |  21 +
 .../card-composable/options/inset.svg         |  22 +
 .../card-composable/options/order.svg         |  28 +
 .../card-composable/options/span.svg          |  21 +
 .../components/card-composable/usage/do-1.svg |  29 +
 .../components/card-composable/usage/do-2.svg |  82 ++
 .../components/card-composable/usage/do-3.svg |  51 ++
 .../card-composable/usage/dont-1.svg          |  52 ++
 .../card-composable/usage/dont-2.svg          |  35 +
 site/routes.ts                                |   8 +
 16 files changed, 1499 insertions(+), 178 deletions(-)
 create mode 100644 site/pages/components/card-composable.tsx
 create mode 100644 site/public/static/illustrations/components/card-composable/anatomy.svg
 create mode 100644 site/public/static/illustrations/components/card-composable/behaviours/grid-layout.svg
 create mode 100644 site/public/static/illustrations/components/card-composable/behaviours/static.svg
 create mode 100644 site/public/static/illustrations/components/card-composable/hero.svg
 create mode 100644 site/public/static/illustrations/components/card-composable/options/expand.svg
 create mode 100644 site/public/static/illustrations/components/card-composable/options/inset.svg
 create mode 100644 site/public/static/illustrations/components/card-composable/options/order.svg
 create mode 100644 site/public/static/illustrations/components/card-composable/options/span.svg
 create mode 100644 site/public/static/illustrations/components/card-composable/usage/do-1.svg
 create mode 100644 site/public/static/illustrations/components/card-composable/usage/do-2.svg
 create mode 100644 site/public/static/illustrations/components/card-composable/usage/do-3.svg
 create mode 100644 site/public/static/illustrations/components/card-composable/usage/dont-1.svg
 create mode 100644 site/public/static/illustrations/components/card-composable/usage/dont-2.svg

diff --git a/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
index 4c4dbef362..315a2ef601 100644
--- a/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
+++ b/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
@@ -562,7 +562,7 @@ exports[`Sidebar renders correctly when closed 1`] = `
   display: block;
 }
 
-.emotion-468 {
+.emotion-471 {
   width: 100%;
   position: relative;
   left: calc(-50vw + 50%);
@@ -570,7 +570,7 @@ exports[`Sidebar renders correctly when closed 1`] = `
   margin-bottom: 8px;
 }
 
-.emotion-469 {
+.emotion-472 {
   border-style: solid;
   border-color: #dee2e5;
   border-width: 1px;
@@ -580,7 +580,7 @@ exports[`Sidebar renders correctly when closed 1`] = `
   width: 100%;
 }
 
-.emotion-472 {
+.emotion-475 {
   margin-bottom: 32px;
 }
 
@@ -1901,6 +1901,22 @@ exports[`Sidebar renders correctly when closed 1`] = `
                           </span>
                         </a>
                       </li>
+                      <li
+                        class="nk-menu-item emotion-12"
+                      >
+                        <a
+                          aria-current="false"
+                          class="emotion-13"
+                          data-testid="buttonLink"
+                          href="/components/card-composable"
+                        >
+                          <span
+                            class="emotion-14"
+                          >
+                            Card Composable
+                          </span>
+                        </a>
+                      </li>
                       <li
                         class="nk-menu-item emotion-12"
                       >
@@ -3169,11 +3185,11 @@ exports[`Sidebar renders correctly when closed 1`] = `
                 </div>
               </ul>
               <div
-                class="emotion-468"
+                class="emotion-471"
               >
                 <hr
                   aria-hidden="true"
-                  class="emotion-469"
+                  class="emotion-472"
                   data-testid="divider"
                 />
               </div>
@@ -3194,7 +3210,7 @@ exports[`Sidebar renders correctly when closed 1`] = `
             />
           </nav>
           <div
-            class="emotion-472"
+            class="emotion-475"
           />
         </div>
       </div>
@@ -3883,7 +3899,7 @@ exports[`Sidebar renders correctly when closed 1`] = `
   display: block;
 }
 
-.emotion-466 {
+.emotion-469 {
   width: 100%;
   position: relative;
   left: calc(-50vw + 50%);
@@ -3891,7 +3907,7 @@ exports[`Sidebar renders correctly when closed 1`] = `
   margin-bottom: 8px;
 }
 
-.emotion-467 {
+.emotion-470 {
   border-style: solid;
   border-color: #dee2e5;
   border-width: 1px;
@@ -3902,57 +3918,57 @@ exports[`Sidebar renders correctly when closed 1`] = `
 }
 
 @media screen {
-  .emotion-468 {
+  .emotion-471 {
     display: none;
   }
 }
 
 @media screen and (min-width: 480px) {
-  .emotion-468 {
+  .emotion-471 {
     display: none;
   }
 }
 
 @media screen and (min-width: 768px) {
-  .emotion-468 {
+  .emotion-471 {
     display: none;
   }
 }
 
 @media screen and (min-width: 1024px) {
-  .emotion-468 {
+  .emotion-471 {
     display: block;
   }
 }
 
 @media screen and (min-width: 1440px) {
-  .emotion-468 {
+  .emotion-471 {
     display: block;
   }
 }
 
-.emotion-470 {
+.emotion-473 {
   margin-bottom: 32px;
 }
 
-.emotion-471 {
+.emotion-474 {
   margin-inline: 32px;
   margin-block: 24px;
 }
 
-.emotion-472 {
+.emotion-475 {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-473 {
+.emotion-476 {
   margin: 0;
   padding: 0;
   display: grid;
   grid-template-columns: 1fr 24px;
 }
 
-.emotion-474 {
+.emotion-477 {
   margin: 0;
   color: #2e3f54;
   font-family: Poppins,sans-serif;
@@ -3962,11 +3978,11 @@ exports[`Sidebar renders correctly when closed 1`] = `
   letter-spacing: 0em;
 }
 
-.emotion-474 svg {
+.emotion-477 svg {
   fill: #2e3f54;
 }
 
-.emotion-475 {
+.emotion-478 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
@@ -3976,7 +3992,7 @@ exports[`Sidebar renders correctly when closed 1`] = `
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
-  .emotion-475 {
+  .emotion-478 {
     transition-property: fill;
     transition-duration: 200ms;
     transition-timing-function: cubic-bezier(0, 0, .5, 1);
@@ -3984,26 +4000,26 @@ exports[`Sidebar renders correctly when closed 1`] = `
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
-  .emotion-475 {
+  .emotion-478 {
     transition-property: fill;
     transition-duration: 0ms;
     transition-timing-function: cubic-bezier(0, 0, .5, 1);
   }
 }
 
-.emotion-475.emotion-475 {
+.emotion-478.emotion-478 {
   width: 24px;
   height: 24px;
 }
 
-.emotion-478 {
+.emotion-481 {
   margin: 0;
   padding: 0;
   display: grid;
   grid-template-columns: 1fr 44px;
 }
 
-.emotion-479 {
+.emotion-482 {
   display: block;
   color: #2e3f54;
   font-family: Poppins,sans-serif;
@@ -4017,23 +4033,23 @@ exports[`Sidebar renders correctly when closed 1`] = `
   padding-block-start: 8px;
 }
 
-.emotion-479 svg {
+.emotion-482 svg {
   fill: #2e3f54;
 }
 
-.emotion-479::before {
+.emotion-482::before {
   content: '';
   margin-bottom: -0.391em;
   display: block;
 }
 
-.emotion-479::after {
+.emotion-482::after {
   content: '';
   margin-top: -0.409em;
   display: block;
 }
 
-.emotion-480 {
+.emotion-483 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4045,7 +4061,7 @@ exports[`Sidebar renders correctly when closed 1`] = `
   cursor: pointer;
 }
 
-.emotion-481 {
+.emotion-484 {
   position: relative;
   display: inline-block;
   -webkit-align-self: start;
@@ -4059,11 +4075,11 @@ exports[`Sidebar renders correctly when closed 1`] = `
   margin-right: 12px;
 }
 
-.emotion-481 * {
+.emotion-484 * {
   box-sizing: border-box;
 }
 
-.emotion-482 {
+.emotion-485 {
   position: absolute;
   top: 50%;
   left: calc((16px / 2) + 4px);
@@ -4078,36 +4094,36 @@ exports[`Sidebar renders correctly when closed 1`] = `
   transform: translate3d(calc(40px / -2), calc(40px / -2), 0);
 }
 
-.emotion-482:disabled {
+.emotion-485:disabled {
   opacity: 0;
 }
 
-.emotion-482:hover:active:not(:disabled) {
+.emotion-485:hover:active:not(:disabled) {
   opacity: 0.4;
 }
 
-.emotion-482:valid:hover:not(:disabled) {
+.emotion-485:valid:hover:not(:disabled) {
   background-color: #00601a;
   opacity: 0.2;
 }
 
-.emotion-482:valid:hover:active:not(:disabled) {
+.emotion-485:valid:hover:active:not(:disabled) {
   background-color: #00601a;
   opacity: 0.4;
 }
 
-.emotion-482:invalid:hover:not(:disabled) {
+.emotion-485:invalid:hover:not(:disabled) {
   background-color: #a90000;
   opacity: 0.2;
 }
 
-.emotion-482:invalid:hover:active:not(:disabled) {
+.emotion-485:invalid:hover:active:not(:disabled) {
   background-color: #a90000;
   opacity: 0.4;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
-  .emotion-482 {
+  .emotion-485 {
     transition-property: inset,opacity;
     transition-duration: 200ms,200ms;
     transition-timing-function: cubic-bezier(.5, 0, 1, 1),cubic-bezier(0, 0, .5, 1);
@@ -4115,14 +4131,14 @@ exports[`Sidebar renders correctly when closed 1`] = `
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
-  .emotion-482 {
+  .emotion-485 {
     transition-property: inset,opacity;
     transition-duration: 0ms;
     transition-timing-function: cubic-bezier(.5, 0, 1, 1),cubic-bezier(0, 0, .5, 1);
   }
 }
 
-.emotion-483 {
+.emotion-486 {
   position: absolute;
   top: 0;
   left: 0;
@@ -4145,15 +4161,15 @@ exports[`Sidebar renders correctly when closed 1`] = `
   padding-inline: 4px;
 }
 
-.emotion-483:checked:not(:disabled) {
+.emotion-486:checked:not(:disabled) {
   background-color: #3358cc;
 }
 
-.emotion-483:disabled {
+.emotion-486:disabled {
   background-color: #dee2e5;
 }
 
-.emotion-483:focus-visible:not(:disabled) {
+.emotion-486:focus-visible:not(:disabled) {
   outline-color: #3768fb;
   outline-style: solid;
   outline-width: 2px;
@@ -4162,13 +4178,13 @@ exports[`Sidebar renders correctly when closed 1`] = `
 
 @media not all and (min-resolution: 0.001dpcm) {
   @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-    .emotion-483:focus-visible:not(:disabled) {
+    .emotion-486:focus-visible:not(:disabled) {
       outline-style: auto;
     }
   }
 }
 
-.emotion-483:checked:focus-visible:not(:disabled) {
+.emotion-486:checked:focus-visible:not(:disabled) {
   outline-color: #3768fb;
   outline-style: solid;
   outline-width: 2px;
@@ -4178,13 +4194,13 @@ exports[`Sidebar renders correctly when closed 1`] = `
 
 @media not all and (min-resolution: 0.001dpcm) {
   @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-    .emotion-483:checked:focus-visible:not(:disabled) {
+    .emotion-486:checked:focus-visible:not(:disabled) {
       outline-style: auto;
     }
   }
 }
 
-.emotion-483:checked:focus-visible:hover:not(:disabled) {
+.emotion-486:checked:focus-visible:hover:not(:disabled) {
   outline-color: #3768fb;
   outline-style: solid;
   outline-width: 2px;
@@ -4194,13 +4210,13 @@ exports[`Sidebar renders correctly when closed 1`] = `
 
 @media not all and (min-resolution: 0.001dpcm) {
   @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-    .emotion-483:checked:focus-visible:hover:not(:disabled) {
+    .emotion-486:checked:focus-visible:hover:not(:disabled) {
       outline-style: auto;
     }
   }
 }
 
-.emotion-484 {
+.emotion-487 {
   position: relative;
   width: 100%;
   height: 100%;
@@ -4209,7 +4225,7 @@ exports[`Sidebar renders correctly when closed 1`] = `
   place-items: center;
 }
 
-.emotion-485 {
+.emotion-488 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4221,22 +4237,22 @@ exports[`Sidebar renders correctly when closed 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-485 svg {
+.emotion-488 svg {
   fill: #ffffff;
 }
 
-.emotion-485:disabled svg {
+.emotion-488:disabled svg {
   fill: #a1acb4;
 }
 
-.emotion-485 svg {
+.emotion-488 svg {
   height: 100%;
   width: 100%;
   max-width: 16px;
   max-height: 24px;
 }
 
-.emotion-486 {
+.emotion-489 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4248,22 +4264,22 @@ exports[`Sidebar renders correctly when closed 1`] = `
   justify-content: flex-end;
 }
 
-.emotion-486 svg {
+.emotion-489 svg {
   fill: #ffffff;
 }
 
-.emotion-486:disabled svg {
+.emotion-489:disabled svg {
   fill: #a1acb4;
 }
 
-.emotion-486 svg {
+.emotion-489 svg {
   height: 100%;
   width: 100%;
   max-width: 16px;
   max-height: 24px;
 }
 
-.emotion-487 {
+.emotion-490 {
   background-color: #ffffff;
   border-radius: 50%;
   width: 16px;
@@ -4277,12 +4293,12 @@ exports[`Sidebar renders correctly when closed 1`] = `
   place-items: center;
 }
 
-.emotion-487 svg {
+.emotion-490 svg {
   fill: #09111c;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
-  .emotion-487 {
+  .emotion-490 {
     transition-property: inset;
     transition-duration: 200ms;
     transition-timing-function: cubic-bezier(.5, 0, 1, 1);
@@ -4290,14 +4306,14 @@ exports[`Sidebar renders correctly when closed 1`] = `
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
-  .emotion-487 {
+  .emotion-490 {
     transition-property: inset;
     transition-duration: 0ms;
     transition-timing-function: cubic-bezier(.5, 0, 1, 1);
   }
 }
 
-.emotion-488 {
+.emotion-491 {
   position: absolute;
   top: 0;
   left: 0;
@@ -4307,7 +4323,7 @@ exports[`Sidebar renders correctly when closed 1`] = `
   cursor: inherit;
 }
 
-.emotion-489 {
+.emotion-492 {
   color: #2e3f54;
   font-family: DM Sans,sans-serif;
   font-size: 14px;
@@ -4317,17 +4333,17 @@ exports[`Sidebar renders correctly when closed 1`] = `
   padding: 0.5px 0px;
 }
 
-.emotion-489:disabled {
+.emotion-492:disabled {
   color: #a1acb4;
 }
 
-.emotion-489::before {
+.emotion-492::before {
   content: '';
   margin-bottom: -0.391em;
   display: block;
 }
 
-.emotion-489::after {
+.emotion-492::after {
   content: '';
   margin-top: -0.409em;
   display: block;
@@ -5731,6 +5747,23 @@ exports[`Sidebar renders correctly when closed 1`] = `
                                 </span>
                               </a>
                             </li>
+                            <li
+                              class="nk-menu-item emotion-10"
+                            >
+                              <a
+                                aria-current="false"
+                                class="emotion-11"
+                                data-testid="buttonLink"
+                                href="/components/card-composable"
+                                tabindex="-1"
+                              >
+                                <span
+                                  class="emotion-12"
+                                >
+                                  Card Composable
+                                </span>
+                              </a>
+                            </li>
                             <li
                               class="nk-menu-item emotion-10"
                             >
@@ -7065,11 +7098,11 @@ exports[`Sidebar renders correctly when closed 1`] = `
                       </div>
                     </ul>
                     <div
-                      class="emotion-466"
+                      class="emotion-469"
                     >
                       <hr
                         aria-hidden="true"
-                        class="emotion-467"
+                        class="emotion-470"
                         data-testid="divider"
                       />
                     </div>
@@ -7077,7 +7110,7 @@ exports[`Sidebar renders correctly when closed 1`] = `
                 </nav>
               </div>
               <div
-                class="emotion-468"
+                class="emotion-471"
               >
                 <nav
                   aria-label="menu-sidebar"
@@ -7090,28 +7123,28 @@ exports[`Sidebar renders correctly when closed 1`] = `
                   />
                 </nav>
                 <div
-                  class="emotion-470"
+                  class="emotion-473"
                 />
               </div>
               <div
-                class="emotion-471"
+                class="emotion-474"
               >
                 <a
-                  class="emotion-472"
+                  class="emotion-475"
                   href="/newscorp-ghfb/newskit"
                   tabindex="-1"
                 >
                   <div
-                    class="emotion-473"
+                    class="emotion-476"
                   >
                     <p
-                      class="emotion-474"
+                      class="emotion-477"
                     >
                       Github
                     </p>
                     <svg
                       aria-hidden="true"
-                      class="emotion-475 emotion-476"
+                      class="emotion-478 emotion-479"
                       fill="currentColor"
                       focusable="false"
                       viewBox="0 0 24 24"
@@ -7129,46 +7162,46 @@ exports[`Sidebar renders correctly when closed 1`] = `
                 </a>
               </div>
               <div
-                class="emotion-471"
+                class="emotion-474"
               >
                 <div
-                  class="emotion-478"
+                  class="emotion-481"
                 >
                   <label
-                    class="emotion-479"
+                    class="emotion-482"
                     for="dark-theme-switch"
                   >
                     Dark theme
                   </label>
                   <label
-                    class="emotion-480"
+                    class="emotion-483"
                   >
                     <div
-                      class="emotion-481"
+                      class="emotion-484"
                       role="presentation"
                     >
                       <div
-                        class="emotion-482"
+                        class="emotion-485"
                         data-testid="checkbox-feedback"
                       />
                       <div
-                        class="emotion-483"
+                        class="emotion-486"
                       >
                         <div
-                          class="emotion-484"
+                          class="emotion-487"
                         >
                           <div
-                            class="emotion-485"
+                            class="emotion-488"
                           />
                           <div
-                            class="emotion-486"
+                            class="emotion-489"
                           />
                           <div
-                            class="emotion-487"
+                            class="emotion-490"
                           />
                         </div>
                         <input
-                          class="emotion-488"
+                          class="emotion-491"
                           data-testid="checkbox-input"
                           id="dark-theme-switch"
                           role="switch"
@@ -7178,7 +7211,7 @@ exports[`Sidebar renders correctly when closed 1`] = `
                       </div>
                     </div>
                     <span
-                      class="emotion-489"
+                      class="emotion-492"
                     >
                        
                     </span>
@@ -7761,7 +7794,7 @@ exports[`Sidebar renders correctly when open 1`] = `
   display: block;
 }
 
-.emotion-468 {
+.emotion-471 {
   width: 100%;
   position: relative;
   left: calc(-50vw + 50%);
@@ -7769,7 +7802,7 @@ exports[`Sidebar renders correctly when open 1`] = `
   margin-bottom: 8px;
 }
 
-.emotion-469 {
+.emotion-472 {
   border-style: solid;
   border-color: #dee2e5;
   border-width: 1px;
@@ -7779,7 +7812,7 @@ exports[`Sidebar renders correctly when open 1`] = `
   width: 100%;
 }
 
-.emotion-472 {
+.emotion-475 {
   margin-bottom: 32px;
 }
 
@@ -9104,6 +9137,22 @@ exports[`Sidebar renders correctly when open 1`] = `
                           </span>
                         </a>
                       </li>
+                      <li
+                        class="nk-menu-item emotion-12"
+                      >
+                        <a
+                          aria-current="false"
+                          class="emotion-13"
+                          data-testid="buttonLink"
+                          href="/components/card-composable"
+                        >
+                          <span
+                            class="emotion-14"
+                          >
+                            Card Composable
+                          </span>
+                        </a>
+                      </li>
                       <li
                         class="nk-menu-item emotion-12"
                       >
@@ -10372,11 +10421,11 @@ exports[`Sidebar renders correctly when open 1`] = `
                 </div>
               </ul>
               <div
-                class="emotion-468"
+                class="emotion-471"
               >
                 <hr
                   aria-hidden="true"
-                  class="emotion-469"
+                  class="emotion-472"
                   data-testid="divider"
                 />
               </div>
@@ -10397,7 +10446,7 @@ exports[`Sidebar renders correctly when open 1`] = `
             />
           </nav>
           <div
-            class="emotion-472"
+            class="emotion-475"
           />
         </div>
       </div>
@@ -11085,7 +11134,7 @@ exports[`Sidebar renders correctly when open 1`] = `
   display: block;
 }
 
-.emotion-466 {
+.emotion-469 {
   width: 100%;
   position: relative;
   left: calc(-50vw + 50%);
@@ -11093,7 +11142,7 @@ exports[`Sidebar renders correctly when open 1`] = `
   margin-bottom: 8px;
 }
 
-.emotion-467 {
+.emotion-470 {
   border-style: solid;
   border-color: #dee2e5;
   border-width: 1px;
@@ -11104,57 +11153,57 @@ exports[`Sidebar renders correctly when open 1`] = `
 }
 
 @media screen {
-  .emotion-468 {
+  .emotion-471 {
     display: none;
   }
 }
 
 @media screen and (min-width: 480px) {
-  .emotion-468 {
+  .emotion-471 {
     display: none;
   }
 }
 
 @media screen and (min-width: 768px) {
-  .emotion-468 {
+  .emotion-471 {
     display: none;
   }
 }
 
 @media screen and (min-width: 1024px) {
-  .emotion-468 {
+  .emotion-471 {
     display: block;
   }
 }
 
 @media screen and (min-width: 1440px) {
-  .emotion-468 {
+  .emotion-471 {
     display: block;
   }
 }
 
-.emotion-470 {
+.emotion-473 {
   margin-bottom: 32px;
 }
 
-.emotion-471 {
+.emotion-474 {
   margin-inline: 32px;
   margin-block: 24px;
 }
 
-.emotion-472 {
+.emotion-475 {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-473 {
+.emotion-476 {
   margin: 0;
   padding: 0;
   display: grid;
   grid-template-columns: 1fr 24px;
 }
 
-.emotion-474 {
+.emotion-477 {
   margin: 0;
   color: #2e3f54;
   font-family: Poppins,sans-serif;
@@ -11164,11 +11213,11 @@ exports[`Sidebar renders correctly when open 1`] = `
   letter-spacing: 0em;
 }
 
-.emotion-474 svg {
+.emotion-477 svg {
   fill: #2e3f54;
 }
 
-.emotion-475 {
+.emotion-478 {
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
@@ -11178,7 +11227,7 @@ exports[`Sidebar renders correctly when open 1`] = `
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
-  .emotion-475 {
+  .emotion-478 {
     transition-property: fill;
     transition-duration: 200ms;
     transition-timing-function: cubic-bezier(0, 0, .5, 1);
@@ -11186,26 +11235,26 @@ exports[`Sidebar renders correctly when open 1`] = `
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
-  .emotion-475 {
+  .emotion-478 {
     transition-property: fill;
     transition-duration: 0ms;
     transition-timing-function: cubic-bezier(0, 0, .5, 1);
   }
 }
 
-.emotion-475.emotion-475 {
+.emotion-478.emotion-478 {
   width: 24px;
   height: 24px;
 }
 
-.emotion-478 {
+.emotion-481 {
   margin: 0;
   padding: 0;
   display: grid;
   grid-template-columns: 1fr 44px;
 }
 
-.emotion-479 {
+.emotion-482 {
   display: block;
   color: #2e3f54;
   font-family: Poppins,sans-serif;
@@ -11219,23 +11268,23 @@ exports[`Sidebar renders correctly when open 1`] = `
   padding-block-start: 8px;
 }
 
-.emotion-479 svg {
+.emotion-482 svg {
   fill: #2e3f54;
 }
 
-.emotion-479::before {
+.emotion-482::before {
   content: '';
   margin-bottom: -0.391em;
   display: block;
 }
 
-.emotion-479::after {
+.emotion-482::after {
   content: '';
   margin-top: -0.409em;
   display: block;
 }
 
-.emotion-480 {
+.emotion-483 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11247,7 +11296,7 @@ exports[`Sidebar renders correctly when open 1`] = `
   cursor: pointer;
 }
 
-.emotion-481 {
+.emotion-484 {
   position: relative;
   display: inline-block;
   -webkit-align-self: start;
@@ -11261,11 +11310,11 @@ exports[`Sidebar renders correctly when open 1`] = `
   margin-right: 12px;
 }
 
-.emotion-481 * {
+.emotion-484 * {
   box-sizing: border-box;
 }
 
-.emotion-482 {
+.emotion-485 {
   position: absolute;
   top: 50%;
   left: calc((16px / 2) + 4px);
@@ -11280,36 +11329,36 @@ exports[`Sidebar renders correctly when open 1`] = `
   transform: translate3d(calc(40px / -2), calc(40px / -2), 0);
 }
 
-.emotion-482:disabled {
+.emotion-485:disabled {
   opacity: 0;
 }
 
-.emotion-482:hover:active:not(:disabled) {
+.emotion-485:hover:active:not(:disabled) {
   opacity: 0.4;
 }
 
-.emotion-482:valid:hover:not(:disabled) {
+.emotion-485:valid:hover:not(:disabled) {
   background-color: #00601a;
   opacity: 0.2;
 }
 
-.emotion-482:valid:hover:active:not(:disabled) {
+.emotion-485:valid:hover:active:not(:disabled) {
   background-color: #00601a;
   opacity: 0.4;
 }
 
-.emotion-482:invalid:hover:not(:disabled) {
+.emotion-485:invalid:hover:not(:disabled) {
   background-color: #a90000;
   opacity: 0.2;
 }
 
-.emotion-482:invalid:hover:active:not(:disabled) {
+.emotion-485:invalid:hover:active:not(:disabled) {
   background-color: #a90000;
   opacity: 0.4;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
-  .emotion-482 {
+  .emotion-485 {
     transition-property: inset,opacity;
     transition-duration: 200ms,200ms;
     transition-timing-function: cubic-bezier(.5, 0, 1, 1),cubic-bezier(0, 0, .5, 1);
@@ -11317,14 +11366,14 @@ exports[`Sidebar renders correctly when open 1`] = `
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
-  .emotion-482 {
+  .emotion-485 {
     transition-property: inset,opacity;
     transition-duration: 0ms;
     transition-timing-function: cubic-bezier(.5, 0, 1, 1),cubic-bezier(0, 0, .5, 1);
   }
 }
 
-.emotion-483 {
+.emotion-486 {
   position: absolute;
   top: 0;
   left: 0;
@@ -11347,15 +11396,15 @@ exports[`Sidebar renders correctly when open 1`] = `
   padding-inline: 4px;
 }
 
-.emotion-483:checked:not(:disabled) {
+.emotion-486:checked:not(:disabled) {
   background-color: #3358cc;
 }
 
-.emotion-483:disabled {
+.emotion-486:disabled {
   background-color: #dee2e5;
 }
 
-.emotion-483:focus-visible:not(:disabled) {
+.emotion-486:focus-visible:not(:disabled) {
   outline-color: #3768fb;
   outline-style: solid;
   outline-width: 2px;
@@ -11364,13 +11413,13 @@ exports[`Sidebar renders correctly when open 1`] = `
 
 @media not all and (min-resolution: 0.001dpcm) {
   @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-    .emotion-483:focus-visible:not(:disabled) {
+    .emotion-486:focus-visible:not(:disabled) {
       outline-style: auto;
     }
   }
 }
 
-.emotion-483:checked:focus-visible:not(:disabled) {
+.emotion-486:checked:focus-visible:not(:disabled) {
   outline-color: #3768fb;
   outline-style: solid;
   outline-width: 2px;
@@ -11380,13 +11429,13 @@ exports[`Sidebar renders correctly when open 1`] = `
 
 @media not all and (min-resolution: 0.001dpcm) {
   @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-    .emotion-483:checked:focus-visible:not(:disabled) {
+    .emotion-486:checked:focus-visible:not(:disabled) {
       outline-style: auto;
     }
   }
 }
 
-.emotion-483:checked:focus-visible:hover:not(:disabled) {
+.emotion-486:checked:focus-visible:hover:not(:disabled) {
   outline-color: #3768fb;
   outline-style: solid;
   outline-width: 2px;
@@ -11396,13 +11445,13 @@ exports[`Sidebar renders correctly when open 1`] = `
 
 @media not all and (min-resolution: 0.001dpcm) {
   @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-    .emotion-483:checked:focus-visible:hover:not(:disabled) {
+    .emotion-486:checked:focus-visible:hover:not(:disabled) {
       outline-style: auto;
     }
   }
 }
 
-.emotion-484 {
+.emotion-487 {
   position: relative;
   width: 100%;
   height: 100%;
@@ -11411,7 +11460,7 @@ exports[`Sidebar renders correctly when open 1`] = `
   place-items: center;
 }
 
-.emotion-485 {
+.emotion-488 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11423,22 +11472,22 @@ exports[`Sidebar renders correctly when open 1`] = `
   justify-content: flex-start;
 }
 
-.emotion-485 svg {
+.emotion-488 svg {
   fill: #ffffff;
 }
 
-.emotion-485:disabled svg {
+.emotion-488:disabled svg {
   fill: #a1acb4;
 }
 
-.emotion-485 svg {
+.emotion-488 svg {
   height: 100%;
   width: 100%;
   max-width: 16px;
   max-height: 24px;
 }
 
-.emotion-486 {
+.emotion-489 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11450,22 +11499,22 @@ exports[`Sidebar renders correctly when open 1`] = `
   justify-content: flex-end;
 }
 
-.emotion-486 svg {
+.emotion-489 svg {
   fill: #ffffff;
 }
 
-.emotion-486:disabled svg {
+.emotion-489:disabled svg {
   fill: #a1acb4;
 }
 
-.emotion-486 svg {
+.emotion-489 svg {
   height: 100%;
   width: 100%;
   max-width: 16px;
   max-height: 24px;
 }
 
-.emotion-487 {
+.emotion-490 {
   background-color: #ffffff;
   border-radius: 50%;
   width: 16px;
@@ -11479,12 +11528,12 @@ exports[`Sidebar renders correctly when open 1`] = `
   place-items: center;
 }
 
-.emotion-487 svg {
+.emotion-490 svg {
   fill: #09111c;
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
-  .emotion-487 {
+  .emotion-490 {
     transition-property: inset;
     transition-duration: 200ms;
     transition-timing-function: cubic-bezier(.5, 0, 1, 1);
@@ -11492,14 +11541,14 @@ exports[`Sidebar renders correctly when open 1`] = `
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
-  .emotion-487 {
+  .emotion-490 {
     transition-property: inset;
     transition-duration: 0ms;
     transition-timing-function: cubic-bezier(.5, 0, 1, 1);
   }
 }
 
-.emotion-488 {
+.emotion-491 {
   position: absolute;
   top: 0;
   left: 0;
@@ -11509,7 +11558,7 @@ exports[`Sidebar renders correctly when open 1`] = `
   cursor: inherit;
 }
 
-.emotion-489 {
+.emotion-492 {
   color: #2e3f54;
   font-family: DM Sans,sans-serif;
   font-size: 14px;
@@ -11519,17 +11568,17 @@ exports[`Sidebar renders correctly when open 1`] = `
   padding: 0.5px 0px;
 }
 
-.emotion-489:disabled {
+.emotion-492:disabled {
   color: #a1acb4;
 }
 
-.emotion-489::before {
+.emotion-492::before {
   content: '';
   margin-bottom: -0.391em;
   display: block;
 }
 
-.emotion-489::after {
+.emotion-492::after {
   content: '';
   margin-top: -0.409em;
   display: block;
@@ -12871,6 +12920,22 @@ exports[`Sidebar renders correctly when open 1`] = `
                                 </span>
                               </a>
                             </li>
+                            <li
+                              class="nk-menu-item emotion-10"
+                            >
+                              <a
+                                aria-current="false"
+                                class="emotion-11"
+                                data-testid="buttonLink"
+                                href="/components/card-composable"
+                              >
+                                <span
+                                  class="emotion-12"
+                                >
+                                  Card Composable
+                                </span>
+                              </a>
+                            </li>
                             <li
                               class="nk-menu-item emotion-10"
                             >
@@ -14139,11 +14204,11 @@ exports[`Sidebar renders correctly when open 1`] = `
                       </div>
                     </ul>
                     <div
-                      class="emotion-466"
+                      class="emotion-469"
                     >
                       <hr
                         aria-hidden="true"
-                        class="emotion-467"
+                        class="emotion-470"
                         data-testid="divider"
                       />
                     </div>
@@ -14151,7 +14216,7 @@ exports[`Sidebar renders correctly when open 1`] = `
                 </nav>
               </div>
               <div
-                class="emotion-468"
+                class="emotion-471"
               >
                 <nav
                   aria-label="menu-sidebar"
@@ -14164,27 +14229,27 @@ exports[`Sidebar renders correctly when open 1`] = `
                   />
                 </nav>
                 <div
-                  class="emotion-470"
+                  class="emotion-473"
                 />
               </div>
               <div
-                class="emotion-471"
+                class="emotion-474"
               >
                 <a
-                  class="emotion-472"
+                  class="emotion-475"
                   href="/newscorp-ghfb/newskit"
                 >
                   <div
-                    class="emotion-473"
+                    class="emotion-476"
                   >
                     <p
-                      class="emotion-474"
+                      class="emotion-477"
                     >
                       Github
                     </p>
                     <svg
                       aria-hidden="true"
-                      class="emotion-475 emotion-476"
+                      class="emotion-478 emotion-479"
                       fill="currentColor"
                       focusable="false"
                       viewBox="0 0 24 24"
@@ -14202,46 +14267,46 @@ exports[`Sidebar renders correctly when open 1`] = `
                 </a>
               </div>
               <div
-                class="emotion-471"
+                class="emotion-474"
               >
                 <div
-                  class="emotion-478"
+                  class="emotion-481"
                 >
                   <label
-                    class="emotion-479"
+                    class="emotion-482"
                     for="dark-theme-switch"
                   >
                     Dark theme
                   </label>
                   <label
-                    class="emotion-480"
+                    class="emotion-483"
                   >
                     <div
-                      class="emotion-481"
+                      class="emotion-484"
                       role="presentation"
                     >
                       <div
-                        class="emotion-482"
+                        class="emotion-485"
                         data-testid="checkbox-feedback"
                       />
                       <div
-                        class="emotion-483"
+                        class="emotion-486"
                       >
                         <div
-                          class="emotion-484"
+                          class="emotion-487"
                         >
                           <div
-                            class="emotion-485"
+                            class="emotion-488"
                           />
                           <div
-                            class="emotion-486"
+                            class="emotion-489"
                           />
                           <div
-                            class="emotion-487"
+                            class="emotion-490"
                           />
                         </div>
                         <input
-                          class="emotion-488"
+                          class="emotion-491"
                           data-testid="checkbox-input"
                           id="dark-theme-switch"
                           role="switch"
@@ -14250,7 +14315,7 @@ exports[`Sidebar renders correctly when open 1`] = `
                       </div>
                     </div>
                     <span
-                      class="emotion-489"
+                      class="emotion-492"
                     >
                        
                     </span>
diff --git a/site/pages/components/card-composable.tsx b/site/pages/components/card-composable.tsx
new file mode 100644
index 0000000000..9691f76569
--- /dev/null
+++ b/site/pages/components/card-composable.tsx
@@ -0,0 +1,808 @@
+import React from 'react';
+import {UsageKind} from '../../components/usage-card';
+import {MetaStatus} from '../../components/meta/types';
+import {LayoutProps} from '../../components/layout';
+import {ComponentPageTemplate} from '../../templates/component-page-template/component-page-template';
+import {getIllustrationComponent} from '../../components/illustrations/illustration-loader';
+import {OverridesRowsProps} from '../../components/component-api';
+import {commonLogicalProps} from '../../components/component-api/common-logical-props';
+import {UnorderedList, InlineMessage, LinkInline} from 'newskit';
+import {Link} from '../../components/link';
+import {InlineCode} from '../../components/markdown-elements';
+
+const commonPropsRows = [
+  {
+    name: 'rowGap',
+    type: 'MQ<string>',
+    description: 'If provided, applies rowGap to the grid',
+    required: null,
+  },
+  {
+    name: 'columnGap',
+    type: 'MQ<string>',
+    description: 'If provided, applies columnGap to the grid',
+    required: null,
+  },
+  {
+    name: 'rows',
+    type: 'MQ<string>',
+    description: (
+      <>
+        Defines the line names and track sizing functions of the grid rows,
+        using the <InlineCode>grid-template-rows</InlineCode>{' '}
+        <Link
+          href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows"
+          target="_blank"
+        >
+          css property.
+        </Link>
+      </>
+    ),
+    required: null,
+  },
+  {
+    name: 'columns',
+    type: 'MQ<string>',
+    description: (
+      <>
+        Defines the line names and track sizing functions of the grid columns,
+        using the <InlineCode>grid-template-columns</InlineCode>{' '}
+        <Link
+          href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns"
+          target="_blank"
+        >
+          css property.
+        </Link>
+      </>
+    ),
+    required: null,
+  },
+  {
+    name: 'autoFlow',
+    type: 'MQ<string>',
+    description: (
+      <>
+        Controls how the auto-placement algorithm works, specifying exactly how
+        auto-placed items get flowed into the grid, using the{' '}
+        <InlineCode>grid-auto-flow</InlineCode>{' '}
+        <Link
+          href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow"
+          target="_blank"
+        >
+          css property.
+        </Link>
+      </>
+    ),
+    required: null,
+  },
+  {
+    name: 'autoRows',
+    type: 'MQ<string>',
+    description: (
+      <>
+        Specifies the size of an implicitly-created grid row track or pattern of
+        tracks, using the <InlineCode>grid-auto-rows</InlineCode>{' '}
+        <Link
+          href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows"
+          target="_blank"
+        >
+          css property.
+        </Link>
+      </>
+    ),
+    required: null,
+  },
+  {
+    name: 'autoColumns',
+    type: 'MQ<string>',
+    description: (
+      <>
+        Specifies the size of an implicitly-created grid column track or pattern
+        of tracks, using the <InlineCode>grid-auto-columns</InlineCode>{' '}
+        <Link
+          href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns"
+          target="_blank"
+        >
+          css property.
+        </Link>
+      </>
+    ),
+    required: null,
+  },
+  {
+    name: 'justifyContent',
+    type: 'MQ<string>',
+    description:
+      'If parent container has remaining space, aligns the grid along the inline axis',
+    required: null,
+  },
+  {
+    name: 'alignContent',
+    type: 'MQ<string>',
+    description:
+      'If parent container has remaining space, aligns the grid along the block axis',
+    required: null,
+  },
+  {
+    name: 'justifyItems',
+    type: 'MQ<string>',
+    description: 'Aligns the grid items along the inline axis',
+    required: null,
+  },
+  {
+    name: 'alignItems',
+    type: 'MQ<string>',
+    description: 'Aligns the grid items along the block axis',
+    required: null,
+  },
+  {
+    name: 'areas',
+    type: 'MQ<string>',
+    description:
+      'Specifies named grid areas, establishing the cells in the grid and assigning them names. Visually represents the layout of the grid',
+    required: null,
+  },
+  {
+    name: 'inline',
+    type: 'MQ<boolean>',
+    default: 'false',
+    description: 'Specifies whether the grid should be displayed inline',
+    required: null,
+  },
+];
+
+const commonOverridesRows = [
+  {
+    attribute: 'width',
+    type: 'MQ<string>',
+    default: '',
+    description: 'If provided, overrides the width of the grid',
+  },
+  {
+    attribute: 'minWidth',
+    type: 'MQ<string>',
+    default: '',
+    description: 'If provided, overrides the minWidth of the grid',
+  },
+  {
+    attribute: 'maxWidth',
+    type: 'MQ<string>',
+    default: '',
+    description: 'If provided, overrides the maxWidth of the grid',
+  },
+  {
+    attribute: 'height',
+    type: 'MQ<string>',
+    default: '',
+    description: 'If provided, overrides the height of the grid',
+  },
+  {
+    attribute: 'minHeight',
+    type: 'MQ<string>',
+    default: '',
+    description: 'If provided, overrides the minHeight of the grid',
+  },
+  {
+    attribute: 'maxHeight',
+    type: 'MQ<string>',
+    default: '',
+    description: 'If provided, overrides the maxHeight of the grid',
+  },
+  ...(commonLogicalProps() as OverridesRowsProps[]),
+];
+
+const CardComposableComponent = (layoutProps: LayoutProps) => (
+  <ComponentPageTemplate
+    headTags={{
+      title: 'Card Composable',
+      description:
+        'Cards contain preview content and actions relating to a specific subject.',
+    }}
+    layoutProps={layoutProps}
+    pageIntroduction={{
+      type: 'Layout',
+      name: 'Card Composable',
+      hero: {
+        illustration: 'components/card-composable/hero',
+      },
+      introduction: `Cards contain preview content and actions relating to a specific subject.`,
+    }}
+    componentDefaultsKey="card-composable"
+    meta={{
+      status: MetaStatus.Supported,
+      introduced: 'v7.2.0',
+      codeUrl:
+        'https://github.com/newscorp-ghfb/NewsKit/tree/main/src/card-composable',
+      storybookId: 'components-cardcomposable--story-default',
+      figmaUrl:
+        'https://www.figma.com/file/MkU4xtY2yPcCpfhzQCuSnK/v5.3-%F0%9F%9F%A2-NewsKit-component-library?node-id=15173-225586&t=jmEqNiut63zVBEtL-0',
+    }}
+    anatomy={{
+      introduction:
+        'The card is a composable component. It is responsible for maintaining the card state, and containing and receiving interactions from the areas of the card. It is the wrapper for the areas listed below:',
+      rows: [
+        {
+          name: 'CardComposable',
+          description: 'Wrapper for the areas of the card',
+          component: 'Grid Layout',
+          optional: undefined,
+        },
+        {
+          name: 'CardLink',
+          description:
+            'Wrapper for links passed to the card, such as a headline. This can be used multiple times to create multiple links inside the card.',
+          component: 'Link',
+          optional: true,
+        },
+        {
+          name: 'CardContent',
+          description:
+            'Area for content, such as a headline, paragraph text, or flags',
+          component: 'Grid Layout',
+          optional: true,
+        },
+        {
+          name: 'CardMedia',
+          description: 'Area for media, such as image',
+          component: ['Image', 'Grid Layout'],
+          optional: true,
+        },
+        {
+          name: 'CardActions',
+          description:
+            'Area for additional interactive components, such as links or tags',
+          component: 'Grid Layout',
+          optional: true,
+        },
+      ],
+      media: getIllustrationComponent('components/card-composable/anatomy'),
+    }}
+    options={{
+      introduction: 'The card has options for different use cases:',
+      cards: [
+        {
+          title: 'Card as a link',
+          description: (
+            <>
+              A part or the whole card can be a link by using the{' '}
+              <InlineCode>expand</InlineCode> prop.
+            </>
+          ),
+          media: getIllustrationComponent(
+            'components/card-composable/options/expand',
+          ),
+        },
+        {
+          title: 'Order',
+          description:
+            'The order in which the card areas appear can be changed at different breakpoints.',
+          media: getIllustrationComponent(
+            'components/card-composable/options/order',
+          ),
+        },
+        {
+          title: 'Span',
+          description:
+            'Card areas can be set to span any number of columns in the grid, or set to a percentage, allowing for custom layout ratios.',
+          media: getIllustrationComponent(
+            'components/card-composable/options/span',
+          ),
+        },
+        {
+          title: 'Inset',
+          description: (
+            <>
+              Card areas can have inset space applied by using{' '}
+              <Link href="/theme/foundation/spacing/">logical props</Link> to
+              set the desired spacing.
+            </>
+          ),
+          media: getIllustrationComponent(
+            'components/card-composable/options/inset',
+          ),
+        },
+      ],
+    }}
+    behaviors={{
+      introduction: 'Here’s how the card behaves:',
+      cards: [
+        {
+          title: 'Grid layout',
+          description:
+            'The card uses the grid layout component to give layout control across breakpoints and any elements passed to the areas of the card.',
+          media: getIllustrationComponent(
+            'components/card-composable/behaviours/grid-layout',
+          ),
+        },
+        {
+          title: 'Static card',
+          description:
+            'If CardLink is not provided, the card will omit all interactive states from the style presets applied to the card, appearing static.',
+          media: getIllustrationComponent(
+            'components/card-composable/behaviours/static',
+          ),
+        },
+      ],
+    }}
+    usage={{
+      introduction: 'Here’s how and when to use the card:',
+      cards: [
+        {
+          title: 'Do have clear and succinct card headings',
+          description: (
+            <>Headings should be concise and briefly explain the content.</>
+          ),
+          kind: UsageKind.DO,
+          media: getIllustrationComponent(
+            'components/card-composable/usage/do-3',
+          ),
+        },
+        {
+          title: 'Don’t use excessive content',
+          description: (
+            <>
+              Avoid including lots of information in a card, so users are not
+              overwhelmed with excessive content. Include essential, summarised
+              information that acts as a preview for the main content it
+              represents.
+            </>
+          ),
+          kind: UsageKind.DONT,
+          media: getIllustrationComponent(
+            'components/card-composable/usage/dont-1',
+          ),
+        },
+        {
+          title: 'Do use consistent elements when arranged in groups.',
+          description: (
+            <>Aim for consistency in cards that are part of a related group.</>
+          ),
+          kind: UsageKind.DO,
+          media: getIllustrationComponent(
+            'components/card-composable/usage/do-2',
+          ),
+        },
+        {
+          title: 'Don’t use varying heights in a group of cards',
+          description: (
+            <>
+              Avoid varying heights of cards when placed next to each other in a
+              rail. Cards should all match the height of the largest card,
+              taking up the available space i.e. not having different height
+              cards.{' '}
+              <Link href="https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Card">
+                Reference: Card - CSS: Cascading Style Sheets | MDN
+              </Link>
+            </>
+          ),
+          kind: UsageKind.DONT,
+          media: getIllustrationComponent(
+            'components/card-composable/usage/dont-2',
+          ),
+        },
+        {
+          title: 'Do ensure the content in the card represents its destination',
+          description: (
+            <>
+              The information contained within a card should always be related
+              to the content it represents.
+            </>
+          ),
+          kind: UsageKind.DO,
+          media: getIllustrationComponent(
+            'components/card-composable/usage/do-1',
+          ),
+        },
+      ],
+    }}
+    accessibility={{
+      introduction: (
+        <>
+          The card has the following accessibility considerations:
+          <UnorderedList
+            markerAlign="start"
+            overrides={{
+              content: {
+                typographyPreset: 'editorialParagraph030',
+              },
+              marginBlockStart: 'space050',
+            }}
+          >
+            <>Use list markup to group your cards</>
+            <>
+              Each Card has a Heading level of the same level because they
+              belong to a flat list hierarchy
+            </>
+            <>
+              When grouping the cards in a List, add an appropriate heading for
+              the Group or aria-label that describes the group
+            </>
+            <>
+              Update the heading level based on the content of the page to make
+              sure card headings are in the correct, logical order
+            </>
+            <>
+              Avoid having 2 links to the same URL (in the same Card) like one
+              for the Title and another for the Read More link (in that way we
+              reduce the tab stops)
+            </>
+            <>
+              When creating a tab order for the different parts of the card,
+              remember to put the headline before the image or media so that
+              screen-reader users get the context before the image alt tag
+            </>
+            <>A video: If a video is provided, ensure the following</>
+          </UnorderedList>
+          <UnorderedList
+            markerAlign="start"
+            overrides={{
+              content: {
+                typographyPreset: 'editorialParagraph030',
+              },
+              marginInlineStart: 'space050',
+            }}
+          >
+            <>
+              The video{' '}
+              <Link href="https://bbc.github.io/gel/components/cards/#fn3">
+                does not auto-play
+              </Link>
+            </>
+            <>
+              The video player&apos;s controls are accessible by a screen reader
+              and keyboard
+            </>
+            <>Dialogue in the video is accompanied by closed captions</>
+          </UnorderedList>
+          <UnorderedList
+            markerAlign="start"
+            overrides={{
+              content: {
+                typographyPreset: 'editorialParagraph030',
+              },
+            }}
+          >
+            <>
+              It&apos;s not recommended to nest interactive elements like a
+              button inside a link, or a link inside a button and so on
+            </>
+            <>
+              Don&apos;t wrap the whole card in a Link, use the{' '}
+              <InlineCode>expand</InlineCode> prop to make it interactive
+            </>
+          </UnorderedList>
+        </>
+      ),
+      focusOrder: {
+        title: 'Focus order',
+      },
+      infoNoticeFocus: [
+        'Focus order depends on how the card areas are assembled and ordered in the DOM. The first interactive element of the card will be the first focusable item.',
+      ],
+
+      interaction: {
+        title: 'Keyboard Interactions',
+        tableRows: [
+          {
+            command: ['Tab'],
+            description: 'Change focus on the card and subsequent actions',
+          },
+          {
+            command: ['Return'],
+            description:
+              'Select the card and actions, if any are actions passed to the CardActions area',
+          },
+        ],
+      },
+      aria: {
+        title: 'WAI-ARIA',
+        tableRows: [
+          {
+            element: 'CardMedia',
+            attribute: 'alt',
+            value: 'string',
+            description:
+              'Image alt text, if the image is not decorative. Alt text needs to be different from the card title',
+            userSupplied: true,
+          },
+        ],
+      },
+    }}
+    seo={{
+      title: 'SEO considerations',
+      introduction: (
+        <>
+          <UnorderedList
+            markerAlign="start"
+            overrides={{
+              marginBlockStart: 'space030',
+              spaceStack: 'space050',
+              content: {
+                typographyPreset: 'editorialParagraph030',
+              },
+              marker: {
+                spaceInline: 'space030',
+              },
+            }}
+          >
+            <>
+              Ensure all text, icons, and images are visible in the card so
+              information can be crawled and indexed by search engines
+            </>
+
+            <>Allow all text to use schema markup (h tag or span).</>
+            <>Ensure any media used has alt text applied</>
+            <>
+              When nesting other components in the card actions area make sure
+              to follow those components SEO guidelines
+            </>
+            <>
+              The content shown on-load should be optimised and labeled
+              accordingly as standard. Should conform to best practice SEO
+              techniques
+            </>
+          </UnorderedList>
+        </>
+      ),
+    }}
+    componentAPI={{
+      introduction: (
+        <>
+          The card has a range of props to define the experience in different
+          use cases, and a range of predefined elements and attributes that you
+          can override to define their appearance.
+        </>
+      ),
+      components: [
+        {
+          title: 'CardComposable',
+          propsRows: [
+            {
+              name: 'children',
+              type: 'React.ReactNode',
+              required: true,
+              description:
+                'The card requires to have at least a heading provided.',
+            },
+            ...commonPropsRows,
+          ],
+          overridesRows: [
+            {
+              attribute: 'stylePreset',
+              type: 'MQ<String>',
+              default: 'cardContainer',
+              description:
+                'If provided, overrides the stylePreset of the card.',
+            },
+            {
+              attribute: 'transitionPreset',
+              type: 'String | String[]',
+              default: 'backgroundColorChange',
+              description: '',
+            },
+            ...commonOverridesRows,
+          ],
+          propsFooter: (
+            <>
+              <InlineMessage
+                role="region"
+                aria-label="LinkStandalone info"
+                overrides={{
+                  marginBlockStart: 'space030',
+                }}
+              >
+                Please refer to the component,{' '}
+                <Link href="grid-layout/">grid layout</Link> and any elements
+                passed to the zones of the card.
+              </InlineMessage>
+            </>
+          ),
+        },
+        {
+          title: 'CardContent',
+          propsRows: [
+            {
+              name: 'children',
+              type: 'React.ReactNode',
+              required: true,
+              description: 'The card content….',
+            },
+            ...commonPropsRows,
+          ],
+          overridesRows: [...commonOverridesRows],
+        },
+        {
+          title: 'CardMedia',
+          propsRows: [
+            {
+              name: 'children',
+              type: 'React.ReactNode',
+              required: undefined,
+              description:
+                'The card media can have children in that case it will replace the default Image component.',
+            },
+            {
+              name: 'media',
+              type: 'ImageProps',
+              required: undefined,
+              description: (
+                <>
+                  If this parameter is provided as{' '}
+                  <InlineCode>ImageProps</InlineCode> object (see Image
+                  documentation), it will render the media as an image.
+                </>
+              ),
+            },
+            ...commonPropsRows,
+          ],
+          overridesRows: [...commonOverridesRows],
+        },
+        {
+          title: 'CardActions',
+          propsRows: [
+            {
+              name: 'children',
+              type: 'React.ReactNode',
+              required: true,
+              description: 'The card actions children…',
+            },
+            ...commonPropsRows,
+          ],
+          overridesRows: [...commonOverridesRows],
+        },
+        {
+          title: 'CardLink',
+          summary: 'Props & Overrides same as StandaloneLink',
+          propsRows: [
+            {
+              name: 'expand',
+              type: 'boolean',
+              default: 'false',
+              description: (
+                <>
+                  Makes part of the card, or the whole card a link (CardLink).
+                  <br />
+                  <br />
+                  It can be used multiple times, e.g. one for the headline and
+                  another for the image, text, any actions etc.
+                </>
+              ),
+              required: undefined,
+            },
+            {
+              name: 'children',
+              type: 'string',
+              description: 'The card content…',
+              required: true,
+            },
+            {
+              name: 'href',
+              type: 'string',
+              description: (
+                <>
+                  If provided, the undefined link component turns into an anchor
+                  element. The provided URL or fragment identifier will be
+                  loaded when the link is clicked.
+                  <br />
+                  <br />
+                  Note - a link requires a href property to be passed in.
+                </>
+              ),
+              required: true,
+            },
+            {
+              name: 'noCrop',
+              type: 'boolean',
+              description:
+                'If true, the cropping applied to the LinkStandalone is removed.',
+              default: 'false',
+            },
+            {
+              name: 'eventContext',
+              type: 'object',
+              description: (
+                <>
+                  Allows users to add extra event data to a LinkStandalone&#39;s
+                  click events.
+                </>
+              ),
+            },
+            {
+              name: 'eventOriginator',
+              type: 'string',
+              description: (
+                <>
+                  Allows users to add event originator custom name e.g.
+                  &#39;newskit-standalone-link&#39;.
+                </>
+              ),
+              default: 'link',
+            },
+            {
+              name: 'external',
+              type: 'boolean',
+              description: (
+                <>
+                  If true, renders the &apos;external&apos; icon next to the
+                  LinkStandalone body content.
+                  <br />
+                  <br />
+                  Note - when a LinkStandalone renders, it automatically checks
+                  if the passed href is external or internal to the website
+                  where the link is used. If the href is external, an icon
+                  indicating this will be rendered after (trailing) the label.
+                </>
+              ),
+            },
+            {
+              name: 'textOnly',
+              type: 'boolean',
+              description: (
+                <>
+                  Allows the link to break into multiple lines.
+                  <br />
+                  <br />
+                  Note - when this is true custom icons can&apos;t be passed as
+                  children to the LinkStandalone component. Custom icons can
+                  still be added before or after the LinkStandalone component.
+                </>
+              ),
+            },
+          ],
+          overridesRows: [
+            {
+              attribute: 'stylePreset',
+              type: 'MQ<string>',
+              default: 'linkInline',
+              description:
+                'If provided, overrides the stylePresets of the LinkStandalone.',
+            },
+            {
+              attribute: 'typographyPreset',
+              type: 'MQ<string>',
+              default: 'utilityLabel020',
+              description:
+                'If provided, overrides the typographyPreset of the LinkStandalone.',
+            },
+            {
+              attribute: 'transitionPreset',
+              type: 'MQ<string>',
+              default: ['fontColorChange', 'iconColorChange'],
+              description:
+                'If provided, overrides the transitionPresets of the LinkStandalone.',
+            },
+            {
+              attribute: 'spaceInline',
+              type: 'MQ<string>',
+              default: 'space010',
+              description:
+                'If provided overrides the gap between each element in the LinkStandalone. e.g. icon and text.',
+            },
+            {
+              attribute: 'externalIcon.size',
+              type: 'MQ<string>',
+              default: 'iconSize010',
+              description: (
+                <>
+                  If provided, overrides the size of the external icon, that
+                  appears after (trailing) the label of the LinkStandalone.
+                  <br />
+                  <br />
+                  Note - it is also possible to set the icon size by passing it
+                  directly as a size prop to the icon. However, by doing this
+                  you will override the <InlineCode>iconSize</InlineCode> passed
+                  from overrides.
+                </>
+              ),
+            },
+          ],
+        },
+      ],
+    }}
+    related={{
+      related: ['Grid Layout'],
+    }}
+  />
+);
+
+export default CardComposableComponent;
diff --git a/site/public/static/illustrations/components/card-composable/anatomy.svg b/site/public/static/illustrations/components/card-composable/anatomy.svg
new file mode 100644
index 0000000000..6d1b24d80f
--- /dev/null
+++ b/site/public/static/illustrations/components/card-composable/anatomy.svg
@@ -0,0 +1,48 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1490" height="838" fill="var(--color-illustrationBackground010)"/>
+<path d="M548 119.891C548 114.476 552.389 110.087 557.804 110.087H932.811C938.225 110.087 942.615 114.476 942.615 119.891V730.196C942.615 735.611 938.225 740 932.811 740H557.804C552.389 740 548 735.611 548 730.196V119.891Z" fill="var(--color-illustrationInterface020)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M932.811 111.087H557.804C552.942 111.087 549 115.029 549 119.891V730.196C549 735.058 552.942 739 557.804 739H932.811C937.673 739 941.615 735.058 941.615 730.196V119.891C941.615 115.029 937.673 111.087 932.811 111.087ZM557.804 110.087C552.389 110.087 548 114.476 548 119.891V730.196C548 735.611 552.389 740 557.804 740H932.811C938.225 740 942.615 735.611 942.615 730.196V119.891C942.615 114.476 938.225 110.087 932.811 110.087H557.804Z" fill="var(--color-illustrationAnatomyBorder020)"/>
+<path opacity="0.5" d="M548 626H943V730.196C943 735.611 938.611 740 933.196 740H557.804C552.389 740 548 735.611 548 730.196V626Z" fill="var(--color-illustrationInterface040)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M943 626H942V730.196C942 735.058 938.058 739 933.196 739H557.804C552.942 739 549 735.058 549 730.196V626H548V730.196C548 735.611 552.389 740 557.804 740H933.196C938.611 740 943 735.611 943 730.196V626Z" fill="var(--color-illustrationAnatomyBorder020)"/>
+<path opacity="0.5" d="M549.226 120.887C549.226 115.475 553.613 111.087 559.026 111.087H931.589C937.002 111.087 941.389 115.475 941.389 120.887V373.346H549.226V120.887Z" fill="var(--color-illustrationAnatomySubtle)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M723.8 221H766.999C769.399 221 771.799 223.4 771.799 225.8V259.399C771.799 261.799 769.399 264.199 766.999 264.199H723.8C721.16 264.199 719 262.039 719 259.399V225.8C719 223.4 721.4 221 723.8 221ZM737 243.8L728.6 254.599H762.199L751.399 240.2L742.999 251.024L737 243.8Z" fill="var(--color-illustrationInterface020)"/>
+<path d="M579 506C579 502.134 582.163 499 586.064 499H903.936C907.837 499 911 502.134 911 506C911 509.866 907.837 513 903.936 513H586.064C582.163 513 579 509.866 579 506Z" fill="var(--color-illustrationAnatomySubtle)"/>
+<path d="M579 536C579 532.134 582.163 529 586.064 529H903.936C907.837 529 911 532.134 911 536C911 539.866 907.837 543 903.936 543H586.064C582.163 543 579 539.866 579 536Z" fill="var(--color-illustrationAnatomySubtle)"/>
+<path d="M579 566C579 562.134 582.163 559 586.064 559H903.936C907.837 559 911 562.134 911 566C911 569.866 907.837 573 903.936 573H586.064C582.163 573 579 569.866 579 566Z" fill="var(--color-illustrationAnatomySubtle)"/>
+<path d="M579 596C579 592.134 581.172 589 583.851 589H802.149C804.828 589 807 592.134 807 596C807 599.866 804.828 603 802.149 603H583.851C581.172 603 579 599.866 579 596Z" fill="var(--color-illustrationAnatomySubtle)"/>
+<rect x="578.638" y="395.436" width="98.041" height="29.6594" fill="var(--color-illustrationAnatomySubtle)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M667.112 650.526H580.526V702.474H667.112V650.526ZM579 649V704H668.638V649H579Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M614.668 668.267V670.259H610.401V683.557H607.91V670.259H603.665V668.267H614.668Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M621.296 671.472C622.379 671.472 623.303 671.739 624.069 672.273C624.834 672.808 625.375 673.515 625.693 674.396V671.624H628.162V683.557H625.693V680.785C625.375 681.666 624.834 682.373 624.069 682.908C623.303 683.442 622.379 683.709 621.296 683.709C620.257 683.709 619.326 683.463 618.503 682.973C617.694 682.482 617.059 681.774 616.597 680.85C616.135 679.926 615.904 678.836 615.904 677.58C615.904 676.338 616.135 675.255 616.597 674.331C617.059 673.407 617.694 672.699 618.503 672.208C619.326 671.717 620.257 671.472 621.296 671.472ZM622.055 673.638C620.957 673.638 620.076 673.992 619.412 674.699C618.762 675.392 618.438 676.352 618.438 677.58C618.438 678.807 618.762 679.774 619.412 680.482C620.076 681.175 620.957 681.521 622.055 681.521C622.748 681.521 623.368 681.363 623.917 681.045C624.466 680.713 624.899 680.251 625.217 679.659C625.534 679.067 625.693 678.374 625.693 677.58C625.693 676.8 625.534 676.114 625.217 675.522C624.899 674.916 624.466 674.454 623.917 674.136C623.368 673.804 622.748 673.638 622.055 673.638Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M635.912 671.472C636.995 671.472 637.919 671.739 638.684 672.273C639.449 672.808 639.991 673.515 640.308 674.396V671.624H642.777V683.687C642.777 684.799 642.546 685.781 642.084 686.633C641.637 687.499 640.987 688.178 640.135 688.669C639.283 689.16 638.272 689.405 637.103 689.405C635.428 689.405 634.071 689.008 633.031 688.214C632.006 687.42 631.363 686.344 631.103 684.987H633.551C633.753 685.694 634.143 686.243 634.72 686.633C635.298 687.037 636.034 687.239 636.93 687.239C637.911 687.239 638.72 686.936 639.355 686.33C639.991 685.723 640.308 684.842 640.308 683.687V680.785C639.991 681.666 639.449 682.373 638.684 682.908C637.919 683.442 636.995 683.709 635.912 683.709C634.872 683.709 633.941 683.463 633.118 682.973C632.309 682.482 631.674 681.774 631.212 680.85C630.75 679.926 630.519 678.836 630.519 677.58C630.519 676.338 630.75 675.255 631.212 674.331C631.674 673.407 632.309 672.699 633.118 672.208C633.941 671.717 634.872 671.472 635.912 671.472ZM636.67 673.638C635.572 673.638 634.692 673.992 634.027 674.699C633.378 675.392 633.053 676.352 633.053 677.58C633.053 678.807 633.378 679.774 634.027 680.482C634.692 681.175 635.572 681.521 636.67 681.521C637.363 681.521 637.984 681.363 638.532 681.045C639.081 680.713 639.514 680.251 639.832 679.659C640.149 679.067 640.308 678.374 640.308 677.58C640.308 676.8 640.149 676.114 639.832 675.522C639.514 674.916 639.081 674.454 638.532 674.136C637.984 673.804 637.363 673.638 636.67 673.638Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M602.741 448.642V474.605H597.533V463.558H586.412V474.605H581.204V448.642H586.412V459.318H597.533V448.642H602.741Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M627.022 463.855C627.022 464.599 626.973 465.269 626.873 465.864H611.809C611.933 467.352 612.454 468.517 613.371 469.36C614.289 470.204 615.417 470.625 616.756 470.625C618.69 470.625 620.066 469.794 620.885 468.133H626.501C625.906 470.117 624.766 471.753 623.079 473.043C621.393 474.308 619.323 474.94 616.868 474.94C614.884 474.94 613.098 474.506 611.511 473.638C609.949 472.745 608.722 471.493 607.829 469.881C606.961 468.269 606.527 466.41 606.527 464.302C606.527 462.169 606.961 460.297 607.829 458.685C608.697 457.073 609.912 455.833 611.474 454.966C613.036 454.098 614.834 453.664 616.868 453.664C618.827 453.664 620.575 454.085 622.112 454.928C623.675 455.771 624.877 456.974 625.72 458.536C626.588 460.074 627.022 461.847 627.022 463.855ZM621.629 462.368C621.604 461.029 621.12 459.962 620.178 459.169C619.236 458.35 618.083 457.941 616.719 457.941C615.429 457.941 614.338 458.338 613.446 459.132C612.578 459.9 612.045 460.979 611.846 462.368H621.629Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M629.484 464.227C629.484 462.144 629.893 460.297 630.712 458.685C631.555 457.073 632.683 455.833 634.096 454.966C635.535 454.098 637.134 453.664 638.895 453.664C640.432 453.664 641.771 453.974 642.912 454.594C644.077 455.214 645.007 455.995 645.702 456.937V453.998H650.946V474.605H645.702V471.592C645.032 472.559 644.102 473.365 642.912 474.01C641.746 474.63 640.395 474.94 638.858 474.94C637.122 474.94 635.535 474.494 634.096 473.601C632.683 472.708 631.555 471.456 630.712 469.844C629.893 468.207 629.484 466.335 629.484 464.227ZM645.702 464.302C645.702 463.037 645.454 461.958 644.958 461.066C644.462 460.148 643.792 459.454 642.949 458.983C642.106 458.487 641.201 458.239 640.234 458.239C639.267 458.239 638.374 458.474 637.556 458.946C636.737 459.417 636.068 460.111 635.547 461.029C635.051 461.921 634.803 462.988 634.803 464.227C634.803 465.467 635.051 466.558 635.547 467.501C636.068 468.418 636.737 469.125 637.556 469.621C638.399 470.117 639.291 470.365 640.234 470.365C641.201 470.365 642.106 470.129 642.949 469.658C643.792 469.162 644.462 468.468 644.958 467.575C645.454 466.658 645.702 465.566 645.702 464.302Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M654.693 464.227C654.693 462.144 655.102 460.297 655.921 458.685C656.764 457.073 657.904 455.833 659.343 454.966C660.781 454.098 662.38 453.664 664.141 453.664C665.48 453.664 666.757 453.961 667.972 454.556C669.187 455.127 670.154 455.895 670.873 456.863V447.08H676.155V474.605H670.873V471.555C670.229 472.572 669.324 473.39 668.158 474.01C666.993 474.63 665.641 474.94 664.104 474.94C662.368 474.94 660.781 474.494 659.343 473.601C657.904 472.708 656.764 471.456 655.921 469.844C655.102 468.207 654.693 466.335 654.693 464.227ZM670.911 464.302C670.911 463.037 670.663 461.958 670.167 461.066C669.671 460.148 669.001 459.454 668.158 458.983C667.315 458.487 666.41 458.239 665.443 458.239C664.476 458.239 663.583 458.474 662.765 458.946C661.946 459.417 661.277 460.111 660.756 461.029C660.26 461.921 660.012 462.988 660.012 464.227C660.012 465.467 660.26 466.558 660.756 467.501C661.277 468.418 661.946 469.125 662.765 469.621C663.608 470.117 664.501 470.365 665.443 470.365C666.41 470.365 667.315 470.129 668.158 469.658C669.001 469.162 669.671 468.468 670.167 467.575C670.663 466.658 670.911 465.566 670.911 464.302Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M686.449 447.08V474.605H681.241V447.08H686.449Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M694.235 451.544C693.317 451.544 692.548 451.258 691.929 450.688C691.333 450.093 691.036 449.361 691.036 448.493C691.036 447.626 691.333 446.906 691.929 446.336C692.548 445.741 693.317 445.443 694.235 445.443C695.152 445.443 695.909 445.741 696.504 446.336C697.124 446.906 697.434 447.626 697.434 448.493C697.434 449.361 697.124 450.093 696.504 450.688C695.909 451.258 695.152 451.544 694.235 451.544ZM696.801 453.998V474.605H691.594V453.998H696.801Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M713.365 453.701C715.82 453.701 717.804 454.482 719.317 456.044C720.829 457.582 721.586 459.739 721.586 462.516V474.605H716.378V463.223C716.378 461.586 715.969 460.334 715.151 459.466C714.333 458.574 713.217 458.127 711.803 458.127C710.365 458.127 709.224 458.574 708.381 459.466C707.563 460.334 707.154 461.586 707.154 463.223V474.605H701.946V453.998H707.154V456.565C707.848 455.672 708.728 454.978 709.795 454.482C710.886 453.961 712.076 453.701 713.365 453.701Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M745.694 463.855C745.694 464.599 745.644 465.269 745.545 465.864H730.481C730.605 467.352 731.125 468.517 732.043 469.36C732.96 470.204 734.089 470.625 735.428 470.625C737.362 470.625 738.738 469.794 739.556 468.133H745.173C744.578 470.117 743.437 471.753 741.751 473.043C740.065 474.308 737.994 474.94 735.539 474.94C733.555 474.94 731.77 474.506 730.183 473.638C728.621 472.745 727.393 471.493 726.501 469.881C725.633 468.269 725.199 466.41 725.199 464.302C725.199 462.169 725.633 460.297 726.501 458.685C727.369 457.073 728.584 455.833 730.146 454.966C731.708 454.098 733.506 453.664 735.539 453.664C737.498 453.664 739.246 454.085 740.784 454.928C742.346 455.771 743.549 456.974 744.392 458.536C745.26 460.074 745.694 461.847 745.694 463.855ZM740.3 462.368C740.276 461.029 739.792 459.962 738.85 459.169C737.907 458.35 736.754 457.941 735.39 457.941C734.101 457.941 733.01 458.338 732.117 459.132C731.249 459.9 730.716 460.979 730.518 462.368H740.3Z" fill="var(--color-illustrationInterface060)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M523 108.094V87H545.2V91H527V108.094H523ZM634 87H589.6V91H634V87ZM678.4 87V91H722.8V87H678.4ZM767.2 87V91H811.6V87H767.2ZM856 87V91H900.4V87H856ZM944.8 87V91H963V108.094H967V87H944.8ZM967 150.281H963V192.469H967V150.281ZM967 234.656H963V276.844H967V234.656ZM967 319.031H963V361.219H967V319.031ZM967 403.406H963V445.594H967V403.406ZM967 487.781H963V529.969H967V487.781ZM967 572.156H963V614.344H967V572.156ZM967 656.531H963V698.719H967V656.531ZM967 740.906H963V758H944.8V762H967V740.906ZM900.4 762V758H856V762H900.4ZM811.6 762V758H767.2V762H811.6ZM722.8 762V758H678.4V762H722.8ZM634 762V758H589.6V762H634ZM545.2 762V758H527V740.906H523V762H545.2ZM523 698.719H527V656.531H523V698.719ZM523 614.344H527V572.156H523V614.344ZM523 529.969H527V487.781H523V529.969ZM523 445.594H527V403.406H523V445.594ZM523 361.219H527V319.031H523V361.219ZM523 276.844H527V234.656H523V276.844ZM523 192.469H527V150.281H523V192.469Z" fill="var(--color-illustrationAnatomyBorder010)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M560 126.449V122H564.405V124H562V126.449H560ZM582.024 122H573.214V124H582.024V122ZM590.833 122V124H599.643V122H590.833ZM608.452 122V124H617.262V122H608.452ZM626.072 122V124H634.881V122H626.072ZM643.691 122V124H652.5V122H643.691ZM661.31 122V124H670.119V122H661.31ZM678.929 122V124H687.738V122H678.929ZM696.548 122V124H705.357V122H696.548ZM714.167 122V124H722.976V122H714.167ZM731.786 122V124H740.595V122H731.786ZM749.405 122V124H758.214V122H749.405ZM767.024 122V124H775.833V122H767.024ZM784.643 122V124H793.452V122H784.643ZM802.262 122V124H811.071V122H802.262ZM819.881 122V124H828.69V122H819.881ZM837.5 122V124H846.31V122H837.5ZM855.119 122V124H863.929V122H855.119ZM872.738 122V124H881.548V122H872.738ZM890.357 122V124H899.167V122H890.357ZM907.976 122V124H916.786V122H907.976ZM925.595 122V124H928V126.449H930V122H925.595ZM930 135.346H928V144.243H930V135.346ZM930 153.14H928V162.037H930V153.14ZM930 170.934H928V179.831H930V170.934ZM930 188.728H928V197.625H930V188.728ZM930 206.522H928V215.419H930V206.522ZM930 224.316H928V233.213H930V224.316ZM930 242.11H928V251.007H930V242.11ZM930 259.904H928V268.801H930V259.904ZM930 277.698H928V286.595H930V277.698ZM930 295.492H928V304.39H930V295.492ZM930 313.287H928V322.184H930V313.287ZM930 331.081H928V339.978H930V331.081ZM930 348.875H928V357.772H930V348.875ZM930 366.669H928V375.566H930V366.669ZM930 384.463H928V393.36H930V384.463ZM930 402.257H928V411.154H930V402.257ZM930 420.051H928V428.948H930V420.051ZM930 437.846H928V446.743H930V437.846ZM930 455.64H928V464.537H930V455.64ZM930 473.434H928V482.331H930V473.434ZM930 491.228H928V500.125H930V491.228ZM930 509.022H928V517.919H930V509.022ZM930 526.816H928V535.713H930V526.816ZM930 544.61H928V553.507H930V544.61ZM930 562.404H928V571.301H930V562.404ZM930 580.199H928V589.096H930V580.199ZM930 597.993H928V606.89H930V597.993ZM930 615.787H928V624.684H930V615.787ZM930 633.581H928V642.478H930V633.581ZM930 651.375H928V660.272H930V651.375ZM930 669.169H928V678.066H930V669.169ZM930 686.963H928V695.86H930V686.963ZM930 704.757H928V713.654H930V704.757ZM930 722.551H928V725H925.595V727H930V722.551ZM916.786 727V725H907.976V727H916.786ZM899.167 727V725H890.357V727H899.167ZM881.548 727V725H872.738V727H881.548ZM863.928 727V725H855.119V727H863.928ZM846.309 727V725H837.5V727H846.309ZM828.69 727V725H819.881V727H828.69ZM811.071 727V725H802.262V727H811.071ZM793.452 727V725H784.643V727H793.452ZM775.833 727V725H767.024V727H775.833ZM758.214 727V725H749.405V727H758.214ZM740.595 727V725H731.786V727H740.595ZM722.976 727V725H714.167V727H722.976ZM705.357 727V725H696.548V727H705.357ZM687.738 727V725H678.929V727H687.738ZM670.119 727V725H661.31V727H670.119ZM652.5 727V725H643.69V727H652.5ZM634.881 727V725H626.071V727H634.881ZM617.262 727V725H608.452V727H617.262ZM599.643 727V725H590.833V727H599.643ZM582.024 727V725H573.214V727H582.024ZM564.405 727V725H562V722.551H560V727H564.405ZM560 713.654H562V704.757H560V713.654ZM560 695.86H562V686.963H560V695.86ZM560 678.066H562V669.169H560V678.066ZM560 660.272H562V651.375H560V660.272ZM560 642.478H562V633.581H560V642.478ZM560 624.684H562V615.787H560V624.684ZM560 606.89H562V597.993H560V606.89ZM560 589.096H562V580.199H560V589.096ZM560 571.302H562V562.405H560V571.302ZM560 553.508H562V544.61H560V553.508ZM560 535.713H562V526.816H560V535.713ZM560 517.919H562V509.022H560V517.919ZM560 500.125H562V491.228H560V500.125ZM560 482.331H562V473.434H560V482.331ZM560 464.537H562V455.64H560V464.537ZM560 446.743H562V437.846H560V446.743ZM560 428.949H562V420.052H560V428.949ZM560 411.154H562V402.257H560V411.154ZM560 393.36H562V384.463H560V393.36ZM560 375.566H562V366.669H560V375.566ZM560 357.772H562V348.875H560V357.772ZM560 339.978H562V331.081H560V339.978ZM560 322.184H562V313.287H560V322.184ZM560 304.39H562V295.493H560V304.39ZM560 286.596H562V277.699H560V286.596ZM560 268.801H562V259.904H560V268.801ZM560 251.007H562V242.11H560V251.007ZM560 233.213H562V224.316H560V233.213ZM560 215.419H562V206.522H560V215.419ZM560 197.625H562V188.728H560V197.625ZM560 179.831H562V170.934H560V179.831ZM560 162.037H562V153.14H560V162.037ZM560 144.243H562V135.346H560V144.243Z" fill="var(--color-illustrationAnatomyBorder020)"/>
+<path d="M860 406C856.686 406 854 408.686 854 412C854 415.314 856.686 418 860 418C863.314 418 866 415.314 866 412C866 408.686 863.314 406 860 406Z" fill="var(--color-illustrationPalette040)"/>
+<path d="M1089 395C1079.06 395 1071 402.835 1071 412.5C1071 422.165 1079.06 430 1089 430C1098.94 430 1107 422.165 1107 412.5C1107 402.835 1098.94 395 1089 395Z" fill="var(--color-illustrationPalette040)"/>
+<path d="M1084.11 409.26C1084.18 407.927 1084.65 406.9 1085.51 406.18C1086.39 405.447 1087.55 405.08 1088.97 405.08C1089.95 405.08 1090.78 405.253 1091.47 405.6C1092.17 405.933 1092.69 406.393 1093.03 406.98C1093.39 407.553 1093.57 408.207 1093.57 408.94C1093.57 409.78 1093.35 410.493 1092.91 411.08C1092.49 411.653 1091.97 412.04 1091.37 412.24V412.32C1092.15 412.56 1092.75 412.987 1093.17 413.6C1093.61 414.213 1093.83 415 1093.83 415.96C1093.83 416.76 1093.65 417.473 1093.27 418.1C1092.91 418.727 1092.37 419.22 1091.65 419.58C1090.95 419.927 1090.09 420.1 1089.09 420.1C1087.59 420.1 1086.36 419.72 1085.41 418.96C1084.47 418.2 1083.97 417.08 1083.91 415.6H1086.63C1086.66 416.253 1086.88 416.78 1087.29 417.18C1087.72 417.567 1088.3 417.76 1089.03 417.76C1089.71 417.76 1090.23 417.573 1090.59 417.2C1090.97 416.813 1091.15 416.32 1091.15 415.72C1091.15 414.92 1090.9 414.347 1090.39 414C1089.89 413.653 1089.1 413.48 1088.03 413.48H1087.45V411.18H1088.03C1089.93 411.18 1090.87 410.547 1090.87 409.28C1090.87 408.707 1090.7 408.26 1090.35 407.94C1090.02 407.62 1089.53 407.46 1088.89 407.46C1088.27 407.46 1087.78 407.633 1087.43 407.98C1087.1 408.313 1086.91 408.74 1086.85 409.26H1084.11Z" fill="var(--color-white)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1072 411L859 411L859 413L1072 413L1072 411Z" fill="var(--color-illustrationPalette040)"/>
+<path d="M860 155C856.686 155 854 157.686 854 161C854 164.314 856.686 167 860 167C863.314 167 866 164.314 866 161C866 157.686 863.314 155 860 155Z" fill="var(--color-illustrationPalette040)"/>
+<path d="M1089 144C1079.06 144 1071 151.835 1071 161.5C1071 171.165 1079.06 179 1089 179C1098.94 179 1107 171.165 1107 161.5C1107 151.835 1098.94 144 1089 144Z" fill="var(--color-illustrationPalette040)"/>
+<path d="M1083.33 166.16V163.96L1089.87 154.6H1093.13V163.72H1094.89V166.16H1093.13V169H1090.33V166.16H1083.33ZM1090.51 157.6L1086.41 163.72H1090.51V157.6Z" fill="var(--color-white)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1072 160L859 160L859 162L1072 162L1072 160Z" fill="var(--color-illustrationPalette040)"/>
+<path d="M860 656C856.686 656 854 658.686 854 662C854 665.314 856.686 668 860 668C863.314 668 866 665.314 866 662C866 658.686 863.314 656 860 656Z" fill="var(--color-illustrationPalette040)"/>
+<path d="M1089 645C1079.06 645 1071 652.835 1071 662.5C1071 672.165 1079.06 680 1089 680C1098.94 680 1107 672.165 1107 662.5C1107 652.835 1098.94 645 1089 645Z" fill="var(--color-illustrationPalette040)"/>
+<path d="M1093.92 657.84H1087.44V661.26C1087.72 660.913 1088.12 660.633 1088.64 660.42C1089.16 660.193 1089.72 660.08 1090.3 660.08C1091.37 660.08 1092.24 660.313 1092.92 660.78C1093.6 661.247 1094.1 661.847 1094.4 662.58C1094.71 663.3 1094.86 664.073 1094.86 664.9C1094.86 666.433 1094.42 667.667 1093.54 668.6C1092.68 669.533 1091.44 670 1089.82 670C1088.3 670 1087.09 669.62 1086.18 668.86C1085.28 668.1 1084.76 667.107 1084.64 665.88H1087.36C1087.48 666.413 1087.75 666.84 1088.16 667.16C1088.59 667.48 1089.13 667.64 1089.78 667.64C1090.57 667.64 1091.16 667.393 1091.56 666.9C1091.96 666.407 1092.16 665.753 1092.16 664.94C1092.16 664.113 1091.96 663.487 1091.54 663.06C1091.14 662.62 1090.55 662.4 1089.76 662.4C1089.2 662.4 1088.74 662.54 1088.36 662.82C1087.99 663.1 1087.72 663.473 1087.56 663.94H1084.88V655.38H1093.92V657.84Z" fill="var(--color-white)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1072 661L859 661L859 663L1072 663L1072 661Z" fill="var(--color-illustrationPalette040)"/>
+<path d="M525 165C528.314 165 531 167.686 531 171C531 174.314 528.314 177 525 177C521.686 177 519 174.314 519 171C519 167.686 521.686 165 525 165Z" fill="var(--color-illustrationPalette040)"/>
+<path d="M376 154C385.941 154 394 161.835 394 171.5C394 181.165 385.941 189 376 189C366.059 189 358 181.165 358 171.5C358 161.835 366.059 154 376 154Z" fill="var(--color-illustrationPalette040)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M393 170L523 170L523 172L393 172L393 170Z" fill="var(--color-illustrationPalette040)"/>
+<path d="M373.097 167V164.42H377.917V179H375.037V167H373.097Z" fill="var(--color-white)"/>
+<path d="M561 292C564.314 292 567 294.686 567 298C567 301.314 564.314 304 561 304C557.686 304 555 301.314 555 298C555 294.686 557.686 292 561 292Z" fill="var(--color-illustrationPalette040)"/>
+<path d="M376 281C385.941 281 394 288.835 394 298.5C394 308.165 385.941 316 376 316C366.059 316 358 308.165 358 298.5C358 288.835 366.059 281 376 281Z" fill="var(--color-illustrationPalette040)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M393 297L560 297L560 299L393 299L393 297Z" fill="var(--color-illustrationPalette040)"/>
+<path d="M372.198 302.84C373.478 301.773 374.498 300.887 375.258 300.18C376.018 299.46 376.651 298.713 377.158 297.94C377.664 297.167 377.918 296.407 377.918 295.66C377.918 294.98 377.758 294.447 377.438 294.06C377.118 293.673 376.624 293.48 375.958 293.48C375.291 293.48 374.778 293.707 374.418 294.16C374.058 294.6 373.871 295.207 373.858 295.98H371.138C371.191 294.38 371.664 293.167 372.558 292.34C373.464 291.513 374.611 291.1 375.998 291.1C377.518 291.1 378.684 291.507 379.498 292.32C380.311 293.12 380.718 294.18 380.718 295.5C380.718 296.54 380.438 297.533 379.878 298.48C379.318 299.427 378.678 300.253 377.958 300.96C377.238 301.653 376.298 302.493 375.138 303.48H381.038V305.8H371.158V303.72L372.198 302.84Z" fill="var(--color-white)"/>
+</svg>
diff --git a/site/public/static/illustrations/components/card-composable/behaviours/grid-layout.svg b/site/public/static/illustrations/components/card-composable/behaviours/grid-layout.svg
new file mode 100644
index 0000000000..f95e611a42
--- /dev/null
+++ b/site/public/static/illustrations/components/card-composable/behaviours/grid-layout.svg
@@ -0,0 +1,21 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3517_104801)">
+<path d="M0 0H1490V838H0V0Z" fill="var(--color-illustrationBackground020)"/>
+<rect x="337" y="443" width="240" height="240" rx="20" fill="var(--color-illustrationInterface060)"/>
+<rect x="337" y="155" width="240" height="240" rx="20" fill="var(--color-illustrationInterface060)"/>
+<rect x="625" y="442" width="240" height="240" rx="20" fill="var(--color-illustrationInterface060)"/>
+<rect x="913" y="442" width="240" height="240" rx="20" fill="var(--color-illustrationInterface060)"/>
+<rect x="625" y="155" width="240" height="240" rx="20" fill="var(--color-illustrationInterface060)"/>
+<rect x="913" y="155" width="240" height="240" rx="20" fill="var(--color-illustrationInterface060)"/>
+<path d="M337 433L337 405L1153 405L1153 433L337 433Z" fill="var(--color-green030)"/>
+<path opacity="0.8" d="M587 155H615V395H587V155Z" fill="var(--color-red030)"/>
+<path opacity="0.8" d="M875 155H903V395H875V155Z" fill="var(--color-red030)"/>
+<path opacity="0.8" d="M587 443H615V683H587V443Z" fill="var(--color-red030)"/>
+<path opacity="0.8" d="M875 443H903V683H875V443Z" fill="var(--color-red030)"/>
+</g>
+<defs>
+<clipPath id="clip0_3517_104801">
+<rect width="1490" height="838" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site/public/static/illustrations/components/card-composable/behaviours/static.svg b/site/public/static/illustrations/components/card-composable/behaviours/static.svg
new file mode 100644
index 0000000000..f7e4b0c43d
--- /dev/null
+++ b/site/public/static/illustrations/components/card-composable/behaviours/static.svg
@@ -0,0 +1,19 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3517_104832)">
+<path d="M0 0H1490V838H0V0Z" fill="var(--color-illustrationBackground020)"/>
+<path d="M481 137C481 130.373 486.373 125 493 125H998C1004.63 125 1010 130.373 1010 137V397C1010 403.627 1004.63 409 998 409H493C486.373 409 481 403.627 481 397V137Z" fill="var(--color-illustrationInterface030)"/>
+<rect x="481" y="622" width="507" height="16" rx="8" fill="var(--color-illustrationInterface030)"/>
+<rect x="481" y="659" width="507" height="16" rx="8" fill="var(--color-illustrationInterface030)"/>
+<rect x="481" y="585" width="507" height="16" rx="8" fill="var(--color-illustrationInterface030)"/>
+<rect x="481" y="696" width="257" height="16" rx="8" fill="var(--color-illustrationInterface030)"/>
+<path d="M481.38 465.5C481.38 458.044 487.44 452 494.915 452H908.845C916.321 452 922.38 458.044 922.38 465.5C922.38 472.956 916.321 479 908.845 479H494.915C487.44 479 481.38 472.956 481.38 465.5Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M481.38 523.5C481.38 516.044 487.428 510 494.889 510H756.872C764.333 510 770.38 516.044 770.38 523.5C770.38 530.956 764.333 537 756.872 537H494.889C487.428 537 481.38 530.956 481.38 523.5Z" fill="var(--color-illustrationInterface060)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M971.622 576.185L887.085 538.152L907.079 627.937L931.511 592.474L971.622 576.185Z" fill="var(--color-black)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M988 576.488L935.722 597.719L904.002 643.761L878 527L988 576.488ZM931.511 592.475L971.622 576.185L887.085 538.153L907.079 627.937L931.511 592.475Z" fill="var(--color-white)"/>
+</g>
+<defs>
+<clipPath id="clip0_3517_104832">
+<rect width="1490" height="838" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site/public/static/illustrations/components/card-composable/hero.svg b/site/public/static/illustrations/components/card-composable/hero.svg
new file mode 100644
index 0000000000..6b249211d9
--- /dev/null
+++ b/site/public/static/illustrations/components/card-composable/hero.svg
@@ -0,0 +1,11 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1490" height="838" fill="var(--color-illustrationBackground020)"/>
+<rect x="550.131" y="171.036" width="390.869" height="497.893" rx="12" fill="var(--color-illustrationPalette040)"/>
+<path d="M550 181C550 174.373 555.373 169 562 169H929C935.627 169 941 174.373 941 181V379H550V181Z" fill="var(--color-illustrationPalette060)"/>
+<rect x="581.535" y="410.495" width="325.822" height="20" rx="10" fill="var(--color-white)"/>
+<rect x="581.535" y="453.676" width="213.943" height="20" rx="10" fill="var(--color-white)"/>
+<rect x="581.535" y="536.114" width="325.822" height="11.7767" rx="5.88835" fill="var(--color-illustrationPalette010)"/>
+<rect x="581.535" y="563.592" width="325.822" height="11.7767" rx="5.88835" fill="var(--color-illustrationPalette010)"/>
+<rect x="581.535" y="508.633" width="325.822" height="11.7767" rx="5.88835" fill="var(--color-illustrationPalette010)"/>
+<rect x="581.535" y="591.071" width="164.874" height="11.7767" rx="5.88835" fill="var(--color-illustrationPalette010)"/>
+</svg>
diff --git a/site/public/static/illustrations/components/card-composable/options/expand.svg b/site/public/static/illustrations/components/card-composable/options/expand.svg
new file mode 100644
index 0000000000..b78d16d670
--- /dev/null
+++ b/site/public/static/illustrations/components/card-composable/options/expand.svg
@@ -0,0 +1,21 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3517_104032)">
+<path d="M0 0H1490V838H0V0Z" fill="var(--color-illustrationBackground020)"/>
+<rect x="481" y="81" width="529" height="674" rx="12" fill="var(--color-illustrationInterface010)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M483.652 60H1007.35C1019.31 60 1029 69.7044 1029 81.6755V756.325C1029 768.296 1019.31 778 1007.35 778H483.652C471.694 778 462 768.296 462 756.325V81.6755C462 69.7044 471.694 60 483.652 60ZM483.652 65.4189C474.683 65.4189 467.413 72.6972 467.413 81.6755V756.325C467.413 765.303 474.683 772.581 483.652 772.581H1007.35C1016.32 772.581 1023.59 765.303 1023.59 756.325V81.6755C1023.59 72.6972 1016.32 65.4189 1007.35 65.4189H483.652Z" fill="var(--color-illustrationHighlight010)"/>
+<path d="M481 90C481 83.3726 486.373 78 493 78H998C1004.63 78 1010 83.3726 1010 90V362H481V90Z" fill="var(--color-illustrationInterface030)"/>
+<rect x="523.62" y="574.774" width="440.91" height="15.9365" rx="7.96825" fill="var(--color-illustrationInterface030)"/>
+<rect x="523.62" y="611.959" width="440.91" height="15.9365" rx="7.96825" fill="var(--color-illustrationInterface030)"/>
+<rect x="523.62" y="537.587" width="440.91" height="15.9365" rx="7.96825" fill="var(--color-illustrationInterface030)"/>
+<rect x="523.62" y="649.144" width="223.111" height="15.9365" rx="7.96825" fill="var(--color-illustrationInterface030)"/>
+<path d="M524 418.5C524 411.044 530.06 405 537.535 405H951.465C958.94 405 965 411.044 965 418.5C965 425.956 958.94 432 951.465 432H537.535C530.06 432 524 425.956 524 418.5Z" fill="var(--color-illustrationInterface070)"/>
+<path d="M524 476.5C524 469.044 530.048 463 537.508 463H799.492C806.952 463 813 469.044 813 476.5C813 483.956 806.952 490 799.492 490H537.508C530.048 490 524 483.956 524 476.5Z" fill="var(--color-illustrationInterface070)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M867.921 740.5L862.462 732.16C858.736 726.466 850.797 724.388 844.725 727.51L846.14 726.783C844.633 727.557 843.91 729.489 844.531 731.094L852.086 750.642C853.284 753.741 856.343 758.123 858.878 760.325C858.878 760.325 874.077 772.906 874.077 777.622V783.594H898.702H905.436H911.014H917.171V777.622C917.171 772.906 926.46 758.049 926.46 758.049C928.169 755.162 929.595 750.074 929.595 746.697V721.858C929.483 716.358 924.809 711.901 919.04 711.901C916.155 711.901 913.817 714.13 913.817 716.881V718.87C913.817 713.371 909.143 708.914 903.375 708.914C900.489 708.914 898.152 711.143 898.152 713.894V715.883C898.152 710.384 893.477 705.927 887.709 705.927C884.823 705.927 882.486 708.155 882.486 710.907V712.896C882.486 712.012 882.392 711.31 882.209 710.753L880.616 685.101C880.401 681.632 877.477 678.938 874.077 678.938C870.653 678.938 867.921 681.693 867.921 685.093V709.719V740.5Z" fill="var(--color-white)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M846.185 726.87C851.072 725.081 856.789 726.32 860.533 729.857C861.257 730.54 861.907 731.309 862.463 732.159L867.921 740.499V685.091C867.921 681.692 870.653 678.936 874.077 678.936C877.477 678.936 880.401 681.631 880.616 685.1L882.209 710.752C882.226 710.802 882.241 710.853 882.256 710.905C882.408 711.436 882.486 712.091 882.486 712.895V710.905C882.486 710.848 882.487 710.791 882.489 710.734C882.49 710.709 882.491 710.684 882.492 710.659C882.627 708.022 884.91 705.926 887.709 705.926C888.256 705.926 888.794 705.966 889.319 706.043C890.555 706.226 891.72 706.615 892.773 707.172C895.398 708.562 897.328 711 897.943 713.893C898.08 714.535 898.152 715.201 898.152 715.882V713.893C898.152 711.141 900.489 708.913 903.375 708.913C903.607 708.913 903.837 708.92 904.065 708.934C905.645 709.033 907.128 709.466 908.439 710.16C911.064 711.55 912.994 713.987 913.609 716.88C913.746 717.523 913.818 718.188 913.818 718.869V716.88C913.818 714.129 916.155 711.9 919.041 711.9C919.272 711.9 919.503 711.907 919.731 711.922C925.177 712.26 929.488 716.578 929.595 721.856V746.696C929.595 750.073 928.169 755.161 926.46 758.048C926.46 758.048 917.171 772.904 917.171 777.621V783.593H874.077V777.621C874.077 772.904 858.878 760.324 858.878 760.324C856.343 758.122 853.284 753.74 852.086 750.641L844.531 731.093C844.116 730.021 844.301 728.804 844.917 727.883C845.128 727.569 845.388 727.289 845.693 727.061C845.856 726.994 846.02 726.93 846.185 726.87ZM844.725 727.509C845.043 727.346 845.366 727.196 845.693 727.061C845.833 726.956 845.982 726.863 846.14 726.782L844.725 727.509ZM841.402 721.045C837.447 723.9 835.877 729.195 837.64 733.756L845.195 753.304C846.823 757.514 850.579 762.901 854.033 765.901L854.1 765.959L854.166 766.014L854.167 766.015L854.194 766.037L854.303 766.128C854.402 766.212 854.553 766.338 854.747 766.503C855.135 766.833 855.697 767.315 856.374 767.911C857.735 769.108 859.527 770.731 861.299 772.472C863.103 774.246 864.732 775.991 865.858 777.448C866.246 777.949 866.514 778.34 866.69 778.622V790.98H924.558V777.747C924.559 777.778 924.56 777.794 924.564 777.795C924.59 777.799 924.726 777.104 925.425 775.454C926.166 773.703 927.205 771.633 928.317 769.574C929.415 767.538 930.523 765.626 931.36 764.215C931.777 763.513 932.124 762.941 932.363 762.549C932.483 762.353 932.576 762.203 932.638 762.103L932.706 761.993L932.723 761.965L932.771 761.889L932.816 761.812C934.107 759.633 935.107 756.981 935.787 754.53C936.466 752.084 936.982 749.271 936.982 746.696V721.782L936.981 721.707C936.783 711.949 928.588 704.513 919.041 704.513C917.476 704.513 915.948 704.803 914.526 705.34C911.426 702.933 907.513 701.526 903.375 701.526C901.81 701.526 900.282 701.815 898.86 702.353C896.048 700.169 892.567 698.808 888.855 698.574L887.989 684.642C887.53 677.253 881.353 671.549 874.077 671.549C866.556 671.549 860.533 677.629 860.533 685.091V720.952C855.094 718.244 848.549 717.858 842.791 720.267M866.94 779.081C866.938 779.08 866.925 779.054 866.906 779.003C866.932 779.056 866.942 779.082 866.94 779.081ZM841.402 721.045L841.347 720.939L842.762 720.211" fill="var(--color-black)"/>
+</g>
+<defs>
+<clipPath id="clip0_3517_104032">
+<rect width="1490" height="838" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site/public/static/illustrations/components/card-composable/options/inset.svg b/site/public/static/illustrations/components/card-composable/options/inset.svg
new file mode 100644
index 0000000000..76af807101
--- /dev/null
+++ b/site/public/static/illustrations/components/card-composable/options/inset.svg
@@ -0,0 +1,22 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3517_104362)">
+<path d="M0 0H1490V838H0V0Z" fill="var(--color-illustrationBackground020)"/>
+<rect x="472" y="70" width="547" height="697" rx="12" fill="var(--color-illustrationInterface010)"/>
+<path d="M505 609.397C505 604.875 508.673 601.209 513.204 601.209H978.796C983.327 601.209 987 604.875 987 609.397C987 613.919 983.327 617.584 978.796 617.584H513.204C508.673 617.584 505 613.919 505 609.397Z" fill="var(--color-illustrationInterface030)"/>
+<path d="M505 647.604C505 643.082 508.673 639.417 513.204 639.417H978.796C983.327 639.417 987 643.082 987 647.604C987 652.126 983.327 655.792 978.796 655.792H513.204C508.673 655.792 505 652.126 505 647.604Z" fill="var(--color-illustrationInterface030)"/>
+<path d="M505 571.187C505 566.666 508.673 563 513.204 563H978.796C983.327 563 987 566.666 987 571.187C987 575.709 983.327 579.375 978.796 579.375H513.204C508.673 579.375 505 575.709 505 571.187Z" fill="var(--color-illustrationInterface030)"/>
+<path d="M505 685.813C505 681.291 508.673 677.625 513.204 677.625H726.487C731.017 677.625 734.69 681.291 734.69 685.813C734.69 690.334 731.017 694 726.487 694H513.204C508.673 694 505 690.334 505 685.813Z" fill="var(--color-illustrationInterface030)"/>
+<path d="M505 449.5C505 442.044 511.252 436 518.965 436H973.035C980.748 436 987 442.044 987 449.5C987 456.956 980.748 463 973.035 463H518.965C511.252 463 505 456.956 505 449.5Z" fill="var(--color-illustrationInterface070)"/>
+<path d="M505 510C505 502.268 511.236 496 518.929 496H789.071C796.764 496 803 502.268 803 510C803 517.732 796.764 524 789.071 524H518.929C511.236 524 505 517.732 505 510Z" fill="var(--color-illustrationInterface070)"/>
+<path d="M472 82C472 75.3726 477.373 70 484 70H1007C1013.63 70 1019 75.3726 1019 82V363H472V82Z" fill="var(--color-illustrationInterface030)"/>
+<rect x="472" y="363" width="547" height="67" fill="var(--color-green030)"/>
+<rect x="472" y="700" width="270" height="32" transform="rotate(-90 472 700)" fill="var(--color-green030)"/>
+<rect x="987" y="700" width="270" height="32" transform="rotate(-90 987 700)" fill="var(--color-green030)"/>
+<path d="M472 700H1019V755C1019 761.627 1013.63 767 1007 767H484C477.373 767 472 761.627 472 755V700Z" fill="var(--color-green030)"/>
+</g>
+<defs>
+<clipPath id="clip0_3517_104362">
+<rect width="1490" height="838" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site/public/static/illustrations/components/card-composable/options/order.svg b/site/public/static/illustrations/components/card-composable/options/order.svg
new file mode 100644
index 0000000000..39801a1733
--- /dev/null
+++ b/site/public/static/illustrations/components/card-composable/options/order.svg
@@ -0,0 +1,28 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3517_104706)">
+<path d="M0 0H1490V838H0V0Z" fill="var(--color-illustrationBackground020)"/>
+<rect x="144" y="142" width="434.452" height="553.536" rx="12" fill="var(--color-illustrationInterface010)"/>
+<rect x="179.002" y="340.967" width="362.106" height="13.0882" rx="6.54408" fill="var(--color-illustrationInterface030)"/>
+<rect x="179.002" y="371.506" width="362.106" height="13.0882" rx="6.54408" fill="var(--color-illustrationInterface030)"/>
+<rect x="179.002" y="310.426" width="362.106" height="13.0882" rx="6.54408" fill="var(--color-illustrationInterface030)"/>
+<rect x="179.002" y="402.044" width="183.234" height="13.0882" rx="6.54408" fill="var(--color-illustrationInterface030)"/>
+<path d="M179.315 212.623C179.315 206.5 184.291 201.536 190.431 201.536H530.379C536.518 201.536 541.495 206.5 541.495 212.623C541.495 218.747 536.518 223.71 530.379 223.71H190.431C184.291 223.71 179.315 218.747 179.315 212.623Z" fill="var(--color-illustrationInterface070)"/>
+<path d="M179.315 260.257C179.315 254.134 184.282 249.17 190.409 249.17H405.568C411.695 249.17 416.662 254.134 416.662 260.257C416.662 266.38 411.695 271.344 405.568 271.344H190.409C184.282 271.344 179.315 266.38 179.315 260.257Z" fill="var(--color-illustrationInterface070)"/>
+<path d="M144 462.536H578V683.536C578 690.164 572.627 695.536 566 695.536H156C149.373 695.536 144 690.164 144 683.536V462.536Z" fill="var(--color-illustrationInterface030)"/>
+<rect x="912" y="142" width="434.452" height="553.536" rx="12" fill="var(--color-illustrationInterface010)"/>
+<rect x="947.002" y="568.431" width="362.106" height="13.0882" rx="6.54408" fill="var(--color-illustrationInterface030)"/>
+<rect x="947.002" y="598.97" width="362.106" height="13.0882" rx="6.54408" fill="var(--color-illustrationInterface030)"/>
+<rect x="947.002" y="537.89" width="362.106" height="13.0882" rx="6.54408" fill="var(--color-illustrationInterface030)"/>
+<rect x="947.002" y="629.508" width="183.234" height="13.0882" rx="6.54408" fill="var(--color-illustrationInterface030)"/>
+<path d="M947.315 440.087C947.315 433.964 952.291 429 958.431 429H1298.38C1304.52 429 1309.49 433.964 1309.49 440.087C1309.49 446.21 1304.52 451.174 1298.38 451.174H958.431C952.291 451.174 947.315 446.21 947.315 440.087Z" fill="var(--color-illustrationInterface070)"/>
+<path d="M947.315 487.721C947.315 481.598 952.282 476.634 958.409 476.634H1173.57C1179.69 476.634 1184.66 481.598 1184.66 487.721C1184.66 493.844 1179.69 498.808 1173.57 498.808H958.409C952.282 498.808 947.315 493.844 947.315 487.721Z" fill="var(--color-illustrationInterface070)"/>
+<path d="M912 154C912 147.373 917.373 142 924 142H1334C1340.63 142 1346 147.373 1346 154V375H912V154Z" fill="var(--color-illustrationInterface030)"/>
+<path d="M843.904 416.002L822.168 404.826C819.658 403.535 816.673 405.357 816.673 408.18L816.673 429.916C816.673 432.7 819.587 434.525 822.092 433.308L843.828 422.748C846.623 421.39 846.668 417.423 843.904 416.002Z" fill="var(--color-illustrationHighlight010)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M640.166 418.971C640.166 420.533 641.432 421.799 642.994 421.799L650.231 421.799C651.793 421.799 653.059 420.533 653.059 418.971C653.059 417.409 651.793 416.143 650.231 416.143L642.994 416.143C641.432 416.143 640.166 417.409 640.166 418.971ZM661.876 418.971C661.876 420.533 663.142 421.799 664.704 421.799L679.177 421.799C680.739 421.799 682.006 420.533 682.006 418.971C682.006 417.409 680.739 416.143 679.177 416.143L664.704 416.143C663.142 416.143 661.876 417.409 661.876 418.971ZM690.822 418.971C690.822 420.533 692.088 421.799 693.65 421.799L708.123 421.799C709.686 421.799 710.952 420.533 710.952 418.971C710.952 417.409 709.686 416.143 708.123 416.143L693.65 416.143C692.088 416.143 690.822 417.409 690.822 418.971ZM719.768 418.971C719.768 420.533 721.035 421.799 722.597 421.799L737.07 421.799C738.632 421.799 739.898 420.533 739.898 418.971C739.898 417.409 738.632 416.143 737.07 416.143L722.597 416.143C721.035 416.143 719.768 417.409 719.768 418.971ZM748.714 418.971C748.714 420.533 749.981 421.799 751.543 421.799L766.016 421.799C767.578 421.799 768.844 420.533 768.844 418.971C768.844 417.409 767.578 416.143 766.016 416.143L751.543 416.143C749.981 416.143 748.714 417.409 748.714 418.971ZM777.661 418.971C777.661 420.533 778.927 421.799 780.489 421.799L794.962 421.799C796.524 421.799 797.791 420.533 797.791 418.971C797.791 417.409 796.524 416.143 794.962 416.143L780.489 416.143C778.927 416.143 777.661 417.409 777.661 418.971ZM806.607 418.971C806.607 420.533 807.873 421.799 809.435 421.799L816.672 421.799C818.234 421.799 819.5 420.533 819.5 418.971C819.5 417.409 818.234 416.143 816.672 416.143L809.435 416.143C807.873 416.143 806.607 417.409 806.607 418.971Z" fill="var(--color-illustrationHighlight010)"/>
+</g>
+<defs>
+<clipPath id="clip0_3517_104706">
+<rect width="1490" height="838" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site/public/static/illustrations/components/card-composable/options/span.svg b/site/public/static/illustrations/components/card-composable/options/span.svg
new file mode 100644
index 0000000000..e02d275143
--- /dev/null
+++ b/site/public/static/illustrations/components/card-composable/options/span.svg
@@ -0,0 +1,21 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3517_104319)">
+<path d="M0 0H1490V838H0V0Z" fill="var(--color-illustrationBackground020)"/>
+<rect x="293" y="252" width="905" height="335" rx="12" fill="var(--color-illustrationInterface010)"/>
+<path d="M665 457.974C665 454.36 667.93 451.43 671.544 451.43H1112.56C1116.18 451.43 1119.11 454.36 1119.11 457.974C1119.11 461.588 1116.18 464.518 1112.56 464.518H671.544C667.93 464.518 665 461.588 665 457.974Z" fill="var(--color-illustrationInterface030)"/>
+<path d="M665 488.513C665 484.899 667.93 481.969 671.544 481.969H1112.56C1116.18 481.969 1119.11 484.899 1119.11 488.513C1119.11 492.127 1116.18 495.057 1112.56 495.057H671.544C667.93 495.057 665 492.127 665 488.513Z" fill="var(--color-illustrationInterface030)"/>
+<path d="M665 427.434C665 423.82 667.93 420.89 671.544 420.89H1112.56C1116.18 420.89 1119.11 423.82 1119.11 427.434C1119.11 431.048 1116.18 433.978 1112.56 433.978H671.544C667.93 433.978 665 431.048 665 427.434Z" fill="var(--color-illustrationInterface030)"/>
+<path d="M665 519.052C665 515.437 667.93 512.508 671.544 512.508H841.69C845.305 512.508 848.234 515.437 848.234 519.052C848.234 522.666 845.305 525.596 841.69 525.596H671.544C667.93 525.596 665 522.666 665 519.052Z" fill="var(--color-illustrationInterface030)"/>
+<path d="M665.312 323.087C665.312 316.964 670.289 312 676.428 312H1016.38C1022.52 312 1027.49 316.964 1027.49 323.087C1027.49 329.21 1022.52 334.174 1016.38 334.174H676.428C670.289 334.174 665.312 329.21 665.312 323.087Z" fill="var(--color-illustrationInterface070)"/>
+<path d="M665.312 370.721C665.312 364.598 670.279 359.634 676.406 359.634H891.566C897.693 359.634 902.66 364.598 902.66 370.721C902.66 376.844 897.693 381.808 891.566 381.808H676.406C670.279 381.808 665.312 376.844 665.312 370.721Z" fill="var(--color-illustrationInterface070)"/>
+<path d="M293 264C293 257.373 298.373 252 305 252H594.667V587H305C298.373 587 293 581.627 293 575V264Z" fill="var(--color-illustrationInterface030)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M305 254C299.477 254 295 258.477 295 264V276.958C295 278.063 294.105 278.958 293 278.958C291.895 278.958 291 278.063 291 276.958V264C291 256.268 297.268 250 305 250H317.236C318.341 250 319.236 250.895 319.236 252C319.236 253.105 318.341 254 317.236 254H305ZM339.708 252C339.708 250.895 340.604 250 341.708 250H366.181C367.285 250 368.181 250.895 368.181 252C368.181 253.105 367.285 254 366.181 254H341.708C340.604 254 339.708 253.105 339.708 252ZM388.653 252C388.653 250.895 389.548 250 390.653 250H415.125C416.23 250 417.125 250.895 417.125 252C417.125 253.105 416.23 254 415.125 254H390.653C389.548 254 388.653 253.105 388.653 252ZM437.597 252C437.597 250.895 438.493 250 439.597 250H464.069C465.174 250 466.069 250.895 466.069 252C466.069 253.105 465.174 254 464.069 254H439.597C438.493 254 437.597 253.105 437.597 252ZM486.542 252C486.542 250.895 487.437 250 488.542 250H513.014C514.118 250 515.014 250.895 515.014 252C515.014 253.105 514.118 254 513.014 254H488.542C487.437 254 486.542 253.105 486.542 252ZM535.486 252C535.486 250.895 536.382 250 537.486 250H561.958C563.063 250 563.958 250.895 563.958 252C563.958 253.105 563.063 254 561.958 254H537.486C536.382 254 535.486 253.105 535.486 252ZM584.431 252C584.431 250.895 585.326 250 586.431 250H610.903C612.007 250 612.903 250.895 612.903 252C612.903 253.105 612.007 254 610.903 254H586.431C585.326 254 584.431 253.105 584.431 252ZM633.375 252C633.375 250.895 634.27 250 635.375 250H659.847C660.952 250 661.847 250.895 661.847 252C661.847 253.105 660.952 254 659.847 254H635.375C634.27 254 633.375 253.105 633.375 252ZM682.319 252C682.319 250.895 683.215 250 684.319 250H708.792C709.896 250 710.792 250.895 710.792 252C710.792 253.105 709.896 254 708.792 254H684.319C683.215 254 682.319 253.105 682.319 252ZM731.264 252C731.264 250.895 732.159 250 733.264 250H757.736C758.841 250 759.736 250.895 759.736 252C759.736 253.105 758.841 254 757.736 254H733.264C732.159 254 731.264 253.105 731.264 252ZM780.208 252C780.208 250.895 781.104 250 782.208 250H806.681C807.785 250 808.681 250.895 808.681 252C808.681 253.105 807.785 254 806.681 254H782.208C781.104 254 780.208 253.105 780.208 252ZM829.153 252C829.153 250.895 830.048 250 831.153 250H855.625C856.73 250 857.625 250.895 857.625 252C857.625 253.105 856.73 254 855.625 254H831.153C830.048 254 829.153 253.105 829.153 252ZM878.097 252C878.097 250.895 878.993 250 880.097 250H904.57C905.674 250 906.57 250.895 906.57 252C906.57 253.105 905.674 254 904.57 254H880.097C878.993 254 878.097 253.105 878.097 252ZM927.042 252C927.042 250.895 927.937 250 929.042 250H953.514C954.619 250 955.514 250.895 955.514 252C955.514 253.105 954.619 254 953.514 254H929.042C927.937 254 927.042 253.105 927.042 252ZM975.986 252C975.986 250.895 976.882 250 977.986 250H1002.46C1003.56 250 1004.46 250.895 1004.46 252C1004.46 253.105 1003.56 254 1002.46 254H977.986C976.882 254 975.986 253.105 975.986 252ZM1024.93 252C1024.93 250.895 1025.83 250 1026.93 250H1051.4C1052.51 250 1053.4 250.895 1053.4 252C1053.4 253.105 1052.51 254 1051.4 254H1026.93C1025.83 254 1024.93 253.105 1024.93 252ZM1073.88 252C1073.88 250.895 1074.77 250 1075.88 250H1100.35C1101.45 250 1102.35 250.895 1102.35 252C1102.35 253.105 1101.45 254 1100.35 254H1075.88C1074.77 254 1073.88 253.105 1073.88 252ZM1122.82 252C1122.82 250.895 1123.72 250 1124.82 250H1149.29C1150.4 250 1151.29 250.895 1151.29 252C1151.29 253.105 1150.4 254 1149.29 254H1124.82C1123.72 254 1122.82 253.105 1122.82 252ZM1171.76 252C1171.76 250.895 1172.66 250 1173.76 250H1186C1193.73 250 1200 256.268 1200 264V276.958C1200 278.063 1199.1 278.958 1198 278.958C1196.9 278.958 1196 278.063 1196 276.958V264C1196 258.477 1191.52 254 1186 254H1173.76C1172.66 254 1171.76 253.105 1171.76 252ZM293 300.875C294.105 300.875 295 301.77 295 302.875V328.792C295 329.896 294.105 330.792 293 330.792C291.895 330.792 291 329.896 291 328.792V302.875C291 301.77 291.895 300.875 293 300.875ZM1198 300.875C1199.1 300.875 1200 301.77 1200 302.875V328.792C1200 329.896 1199.1 330.792 1198 330.792C1196.9 330.792 1196 329.896 1196 328.792V302.875C1196 301.77 1196.9 300.875 1198 300.875ZM293 352.708C294.105 352.708 295 353.604 295 354.708V380.625C295 381.73 294.105 382.625 293 382.625C291.895 382.625 291 381.73 291 380.625V354.708C291 353.604 291.895 352.708 293 352.708ZM1198 352.708C1199.1 352.708 1200 353.604 1200 354.708V380.625C1200 381.73 1199.1 382.625 1198 382.625C1196.9 382.625 1196 381.73 1196 380.625V354.708C1196 353.604 1196.9 352.708 1198 352.708ZM1198 404.542C1199.1 404.542 1200 405.437 1200 406.542V432.458C1200 433.563 1199.1 434.458 1198 434.458C1196.9 434.458 1196 433.563 1196 432.458V406.542C1196 405.437 1196.9 404.542 1198 404.542ZM293 404.542C294.105 404.542 295 405.437 295 406.542V432.458C295 433.563 294.105 434.458 293 434.458C291.895 434.458 291 433.563 291 432.458V406.542C291 405.437 291.895 404.542 293 404.542ZM1198 456.375C1199.1 456.375 1200 457.27 1200 458.375V484.292C1200 485.396 1199.1 486.292 1198 486.292C1196.9 486.292 1196 485.396 1196 484.292V458.375C1196 457.27 1196.9 456.375 1198 456.375ZM293 456.375C294.105 456.375 295 457.27 295 458.375V484.292C295 485.396 294.105 486.292 293 486.292C291.895 486.292 291 485.396 291 484.292V458.375C291 457.27 291.895 456.375 293 456.375ZM293 508.208C294.105 508.208 295 509.104 295 510.208V536.125C295 537.23 294.105 538.125 293 538.125C291.895 538.125 291 537.23 291 536.125V510.208C291 509.104 291.895 508.208 293 508.208ZM1198 508.208C1199.1 508.208 1200 509.104 1200 510.208V536.125C1200 537.23 1199.1 538.125 1198 538.125C1196.9 538.125 1196 537.23 1196 536.125V510.208C1196 509.104 1196.9 508.208 1198 508.208ZM293 560.042C294.105 560.042 295 560.937 295 562.042V575C295 580.523 299.477 585 305 585H317.236C318.341 585 319.236 585.895 319.236 587C319.236 588.105 318.341 589 317.236 589H305C297.268 589 291 582.732 291 575V562.042C291 560.937 291.895 560.042 293 560.042ZM1198 560.042C1199.1 560.042 1200 560.937 1200 562.042V575C1200 582.732 1193.73 589 1186 589H1173.76C1172.66 589 1171.76 588.105 1171.76 587C1171.76 585.895 1172.66 585 1173.76 585H1186C1191.52 585 1196 580.523 1196 575V562.042C1196 560.937 1196.9 560.042 1198 560.042ZM339.708 587C339.708 585.895 340.604 585 341.708 585H366.18C367.285 585 368.18 585.895 368.18 587C368.18 588.105 367.285 589 366.18 589H341.708C340.604 589 339.708 588.105 339.708 587ZM388.653 587C388.653 585.895 389.548 585 390.653 585H415.125C416.229 585 417.125 585.895 417.125 587C417.125 588.105 416.229 589 415.125 589H390.653C389.548 589 388.653 588.105 388.653 587ZM437.597 587C437.597 585.895 438.493 585 439.597 585H464.069C465.174 585 466.069 585.895 466.069 587C466.069 588.105 465.174 589 464.069 589H439.597C438.493 589 437.597 588.105 437.597 587ZM486.542 587C486.542 585.895 487.437 585 488.542 585H513.014C514.118 585 515.014 585.895 515.014 587C515.014 588.105 514.118 589 513.014 589H488.542C487.437 589 486.542 588.105 486.542 587ZM535.486 587C535.486 585.895 536.381 585 537.486 585H561.958C563.063 585 563.958 585.895 563.958 587C563.958 588.105 563.063 589 561.958 589H537.486C536.381 589 535.486 588.105 535.486 587ZM584.43 587C584.43 585.895 585.326 585 586.43 585H610.903C612.007 585 612.903 585.895 612.903 587C612.903 588.105 612.007 589 610.903 589H586.43C585.326 589 584.43 588.105 584.43 587ZM633.375 587C633.375 585.895 634.27 585 635.375 585H659.847C660.952 585 661.847 585.895 661.847 587C661.847 588.105 660.952 589 659.847 589H635.375C634.27 589 633.375 588.105 633.375 587ZM682.319 587C682.319 585.895 683.215 585 684.319 585H708.792C709.896 585 710.792 585.895 710.792 587C710.792 588.105 709.896 589 708.792 589H684.319C683.215 589 682.319 588.105 682.319 587ZM731.264 587C731.264 585.895 732.159 585 733.264 585H757.736C758.841 585 759.736 585.895 759.736 587C759.736 588.105 758.841 589 757.736 589H733.264C732.159 589 731.264 588.105 731.264 587ZM780.208 587C780.208 585.895 781.104 585 782.208 585H806.68C807.785 585 808.68 585.895 808.68 587C808.68 588.105 807.785 589 806.68 589H782.208C781.104 589 780.208 588.105 780.208 587ZM829.153 587C829.153 585.895 830.048 585 831.153 585H855.625C856.73 585 857.625 585.895 857.625 587C857.625 588.105 856.73 589 855.625 589H831.153C830.048 589 829.153 588.105 829.153 587ZM878.097 587C878.097 585.895 878.993 585 880.097 585H904.569C905.674 585 906.569 585.895 906.569 587C906.569 588.105 905.674 589 904.569 589H880.097C878.993 589 878.097 588.105 878.097 587ZM927.042 587C927.042 585.895 927.937 585 929.042 585H953.514C954.618 585 955.514 585.895 955.514 587C955.514 588.105 954.618 589 953.514 589H929.042C927.937 589 927.042 588.105 927.042 587ZM975.986 587C975.986 585.895 976.882 585 977.986 585H1002.46C1003.56 585 1004.46 585.895 1004.46 587C1004.46 588.105 1003.56 589 1002.46 589H977.986C976.882 589 975.986 588.105 975.986 587ZM1024.93 587C1024.93 585.895 1025.83 585 1026.93 585H1051.4C1052.51 585 1053.4 585.895 1053.4 587C1053.4 588.105 1052.51 589 1051.4 589H1026.93C1025.83 589 1024.93 588.105 1024.93 587ZM1073.88 587C1073.88 585.895 1074.77 585 1075.88 585H1100.35C1101.45 585 1102.35 585.895 1102.35 587C1102.35 588.105 1101.45 589 1100.35 589H1075.88C1074.77 589 1073.88 588.105 1073.88 587ZM1122.82 587C1122.82 585.895 1123.71 585 1124.82 585H1149.29C1150.4 585 1151.29 585.895 1151.29 587C1151.29 588.105 1150.4 589 1149.29 589H1124.82C1123.71 589 1122.82 588.105 1122.82 587Z" fill="var(--color-illustrationHighlight010)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M596 250C597.105 250 598 250.895 598 252L598 263.893C598 264.997 597.105 265.893 596 265.893C594.895 265.893 594 264.997 594 263.893L594 252C594 250.895 594.895 250 596 250ZM596 285.679C597.105 285.679 598 286.574 598 287.679L598 311.464C598 312.569 597.105 313.464 596 313.464C594.895 313.464 594 312.569 594 311.464L594 287.679C594 286.574 594.895 285.679 596 285.679ZM596 333.25C597.105 333.25 598 334.145 598 335.25L598 359.036C598 360.14 597.105 361.036 596 361.036C594.895 361.036 594 360.14 594 359.036L594 335.25C594 334.145 594.895 333.25 596 333.25ZM596 380.821C597.105 380.821 598 381.717 598 382.821L598 406.607C598 407.712 597.105 408.607 596 408.607C594.895 408.607 594 407.712 594 406.607L594 382.821C594 381.717 594.895 380.821 596 380.821ZM596 428.393C597.105 428.393 598 429.288 598 430.393L598 454.179C598 455.283 597.105 456.179 596 456.179C594.895 456.179 594 455.283 594 454.179L594 430.393C594 429.288 594.895 428.393 596 428.393ZM596 475.964C597.105 475.964 598 476.86 598 477.964L598 501.75C598 502.855 597.105 503.75 596 503.75C594.895 503.75 594 502.855 594 501.75L594 477.964C594 476.86 594.895 475.964 596 475.964ZM596 523.536C597.105 523.536 598 524.431 598 525.536L598 549.321C598 550.426 597.105 551.321 596 551.321C594.895 551.321 594 550.426 594 549.321L594 525.536C594 524.431 594.895 523.536 596 523.536ZM596 571.107C597.105 571.107 598 572.003 598 573.107L598 585C598 586.105 597.105 587 596 587C594.895 587 594 586.105 594 585L594 573.107C594 572.003 594.895 571.107 596 571.107Z" fill="var(--color-illustrationHighlight010)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M898 250C899.105 250 900 250.895 900 252L900 263.893C900 264.997 899.105 265.893 898 265.893C896.895 265.893 896 264.997 896 263.893L896 252C896 250.895 896.895 250 898 250ZM898 285.679C899.105 285.679 900 286.574 900 287.679L900 311.464C900 312.569 899.105 313.464 898 313.464C896.895 313.464 896 312.569 896 311.464L896 287.679C896 286.574 896.895 285.679 898 285.679ZM898 333.25C899.105 333.25 900 334.145 900 335.25L900 359.036C900 360.14 899.105 361.036 898 361.036C896.895 361.036 896 360.14 896 359.036L896 335.25C896 334.145 896.895 333.25 898 333.25ZM898 380.821C899.105 380.821 900 381.717 900 382.821L900 406.607C900 407.712 899.105 408.607 898 408.607C896.895 408.607 896 407.712 896 406.607L896 382.821C896 381.717 896.895 380.821 898 380.821ZM898 428.393C899.105 428.393 900 429.288 900 430.393L900 454.179C900 455.283 899.105 456.179 898 456.179C896.895 456.179 896 455.283 896 454.179L896 430.393C896 429.288 896.895 428.393 898 428.393ZM898 475.964C899.105 475.964 900 476.86 900 477.964L900 501.75C900 502.855 899.105 503.75 898 503.75C896.895 503.75 896 502.855 896 501.75L896 477.964C896 476.86 896.895 475.964 898 475.964ZM898 523.536C899.105 523.536 900 524.431 900 525.536L900 549.321C900 550.426 899.105 551.321 898 551.321C896.895 551.321 896 550.426 896 549.321L896 525.536C896 524.431 896.895 523.536 898 523.536ZM898 571.107C899.105 571.107 900 572.003 900 573.107L900 585C900 586.105 899.105 587 898 587C896.895 587 896 586.105 896 585L896 573.107C896 572.003 896.895 571.107 898 571.107Z" fill="var(--color-illustrationHighlight010)"/>
+</g>
+<defs>
+<clipPath id="clip0_3517_104319">
+<rect width="1490" height="838" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site/public/static/illustrations/components/card-composable/usage/do-1.svg b/site/public/static/illustrations/components/card-composable/usage/do-1.svg
new file mode 100644
index 0000000000..2209770ca9
--- /dev/null
+++ b/site/public/static/illustrations/components/card-composable/usage/do-1.svg
@@ -0,0 +1,29 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3523_104054)">
+<path d="M0 0H1490V838H0V0Z" fill="var(--color-illustrationBackground010)"/>
+<path d="M427 90C427 83.3726 432.373 78 439 78H1052C1058.63 78 1064 83.3726 1064 90V407.981C1064 414.609 1058.63 419.981 1052 419.981H439C432.373 419.981 427 414.609 427 407.981V90Z" fill="var(--color-illustrationInterface010)"/>
+<rect x="427" y="559.887" width="610.508" height="19.2665" rx="9.63327" fill="var(--color-illustrationInterface030)"/>
+<rect x="427" y="604.441" width="309.469" height="19.2665" rx="9.63327" fill="var(--color-illustrationInterface030)"/>
+<rect x="427" y="673.078" width="375.699" height="86.6994" rx="9.63327" fill="var(--color-illustrationInterface070)"/>
+<path d="M460.679 723.07H466.622V725.396H457.796V707.822H460.679V723.07ZM481.803 718.088C481.803 718.611 481.769 719.083 481.701 719.505H471.056C471.14 720.617 471.553 721.511 472.295 722.185C473.036 722.859 473.947 723.196 475.026 723.196C476.577 723.196 477.672 722.547 478.313 721.249H481.423C481.002 722.531 480.235 723.584 479.122 724.41C478.026 725.219 476.661 725.624 475.026 725.624C473.694 725.624 472.497 725.329 471.435 724.739C470.39 724.132 469.564 723.289 468.957 722.21C468.367 721.114 468.072 719.85 468.072 718.417C468.072 716.984 468.358 715.728 468.931 714.649C469.521 713.554 470.339 712.711 471.384 712.121C472.446 711.531 473.66 711.236 475.026 711.236C476.341 711.236 477.512 711.522 478.541 712.095C479.569 712.669 480.37 713.478 480.943 714.523C481.516 715.551 481.803 716.74 481.803 718.088ZM478.793 717.178C478.777 716.116 478.397 715.265 477.656 714.624C476.914 713.983 475.995 713.663 474.899 713.663C473.905 713.663 473.053 713.983 472.345 714.624C471.637 715.248 471.216 716.099 471.081 717.178H478.793ZM483.679 718.367C483.679 716.967 483.965 715.728 484.538 714.649C485.128 713.57 485.921 712.736 486.915 712.146C487.927 711.539 489.04 711.236 490.253 711.236C491.349 711.236 492.302 711.455 493.111 711.893C493.937 712.315 494.594 712.846 495.083 713.486V711.463H497.991V725.396H495.083V723.323C494.594 723.98 493.928 724.528 493.086 724.967C492.243 725.405 491.282 725.624 490.203 725.624C489.006 725.624 487.91 725.321 486.915 724.714C485.921 724.09 485.128 723.23 484.538 722.134C483.965 721.022 483.679 719.766 483.679 718.367ZM495.083 718.417C495.083 717.456 494.881 716.622 494.476 715.914C494.089 715.206 493.574 714.666 492.934 714.295C492.293 713.924 491.602 713.739 490.86 713.739C490.118 713.739 489.427 713.924 488.787 714.295C488.146 714.649 487.623 715.18 487.219 715.888C486.831 716.58 486.637 717.406 486.637 718.367C486.637 719.328 486.831 720.17 487.219 720.895C487.623 721.62 488.146 722.177 488.787 722.564C489.444 722.935 490.135 723.121 490.86 723.121C491.602 723.121 492.293 722.935 492.934 722.564C493.574 722.193 494.089 721.654 494.476 720.946C494.881 720.221 495.083 719.378 495.083 718.417ZM504.66 713.486C505.082 712.778 505.638 712.23 506.329 711.842C507.037 711.438 507.872 711.236 508.833 711.236V714.219H508.099C506.97 714.219 506.11 714.506 505.52 715.079C504.947 715.652 504.66 716.647 504.66 718.063V725.396H501.778V711.463H504.66V713.486ZM518.513 711.236C519.608 711.236 520.586 711.463 521.446 711.918C522.322 712.374 523.005 713.048 523.494 713.941C523.983 714.835 524.227 715.914 524.227 717.178V725.396H521.37V717.608C521.37 716.36 521.058 715.408 520.434 714.751C519.811 714.076 518.959 713.739 517.88 713.739C516.801 713.739 515.942 714.076 515.301 714.751C514.677 715.408 514.365 716.36 514.365 717.608V725.396H511.483V711.463H514.365V713.056C514.837 712.483 515.436 712.036 516.161 711.716C516.903 711.396 517.686 711.236 518.513 711.236ZM541.68 711.236C542.742 711.236 543.686 711.463 544.512 711.918C545.355 712.374 546.013 713.048 546.485 713.941C546.974 714.835 547.218 715.914 547.218 717.178V725.396H544.361V717.608C544.361 716.36 544.049 715.408 543.425 714.751C542.801 714.076 541.95 713.739 540.871 713.739C539.792 713.739 538.932 714.076 538.292 714.751C537.668 715.408 537.356 716.36 537.356 717.608V725.396H534.473V706.684H537.356V713.082C537.845 712.492 538.46 712.036 539.202 711.716C539.961 711.396 540.787 711.236 541.68 711.236ZM556.939 725.624C555.624 725.624 554.436 725.329 553.373 724.739C552.311 724.132 551.477 723.289 550.87 722.21C550.263 721.114 549.96 719.85 549.96 718.417C549.96 717.001 550.272 715.745 550.895 714.649C551.519 713.554 552.37 712.711 553.449 712.121C554.528 711.531 555.734 711.236 557.065 711.236C558.397 711.236 559.603 711.531 560.682 712.121C561.76 712.711 562.612 713.554 563.236 714.649C563.859 715.745 564.171 717.001 564.171 718.417C564.171 719.833 563.851 721.089 563.21 722.185C562.57 723.281 561.693 724.132 560.58 724.739C559.485 725.329 558.271 725.624 556.939 725.624ZM556.939 723.121C557.681 723.121 558.372 722.944 559.013 722.59C559.67 722.236 560.201 721.705 560.606 720.996C561.01 720.288 561.213 719.429 561.213 718.417C561.213 717.406 561.019 716.554 560.631 715.863C560.243 715.155 559.729 714.624 559.088 714.27C558.448 713.916 557.757 713.739 557.015 713.739C556.273 713.739 555.582 713.916 554.941 714.27C554.318 714.624 553.82 715.155 553.449 715.863C553.078 716.554 552.893 717.406 552.893 718.417C552.893 719.918 553.272 721.081 554.031 721.907C554.806 722.716 555.776 723.121 556.939 723.121ZM585.734 711.463L581.409 725.396H578.375L575.568 715.105L572.761 725.396H569.727L565.377 711.463H568.311L571.219 722.665L574.177 711.463H577.186L580.019 722.615L582.901 711.463H585.734ZM597.82 713.815V721.528C597.82 722.05 597.938 722.429 598.174 722.665C598.427 722.885 598.848 722.994 599.438 722.994H601.208V725.396H598.933C597.634 725.396 596.64 725.093 595.949 724.486C595.257 723.879 594.912 722.893 594.912 721.528V713.815H593.268V711.463H594.912V707.999H597.82V711.463H601.208V713.815H597.82ZM609.909 725.624C608.594 725.624 607.406 725.329 606.344 724.739C605.281 724.132 604.447 723.289 603.84 722.21C603.233 721.114 602.93 719.85 602.93 718.417C602.93 717.001 603.242 715.745 603.865 714.649C604.489 713.554 605.34 712.711 606.419 712.121C607.498 711.531 608.704 711.236 610.035 711.236C611.367 711.236 612.573 711.531 613.652 712.121C614.731 712.711 615.582 713.554 616.206 714.649C616.829 715.745 617.141 717.001 617.141 718.417C617.141 719.833 616.821 721.089 616.18 722.185C615.54 723.281 614.663 724.132 613.55 724.739C612.455 725.329 611.241 725.624 609.909 725.624ZM609.909 723.121C610.651 723.121 611.342 722.944 611.983 722.59C612.64 722.236 613.171 721.705 613.576 720.996C613.98 720.288 614.183 719.429 614.183 718.417C614.183 717.406 613.989 716.554 613.601 715.863C613.213 715.155 612.699 714.624 612.058 714.27C611.418 713.916 610.727 713.739 609.985 713.739C609.243 713.739 608.552 713.916 607.911 714.27C607.288 714.624 606.79 715.155 606.419 715.863C606.049 716.554 605.863 717.406 605.863 718.417C605.863 719.918 606.242 721.081 607.001 721.907C607.776 722.716 608.746 723.121 609.909 723.121ZM639.178 711.463V725.396H636.295V723.753C635.84 724.326 635.242 724.781 634.5 725.118C633.775 725.439 633 725.599 632.174 725.599C631.078 725.599 630.092 725.371 629.215 724.916C628.355 724.461 627.672 723.787 627.167 722.893C626.678 722 626.433 720.921 626.433 719.656V711.463H629.291V719.226C629.291 720.474 629.603 721.435 630.226 722.109C630.85 722.767 631.702 723.095 632.78 723.095C633.859 723.095 634.711 722.767 635.334 722.109C635.975 721.435 636.295 720.474 636.295 719.226V711.463H639.178ZM648.039 725.624C646.943 725.624 645.957 725.43 645.081 725.042C644.221 724.638 643.538 724.098 643.032 723.424C642.527 722.733 642.257 721.966 642.223 721.123H645.207C645.258 721.713 645.536 722.21 646.041 722.615C646.564 723.003 647.213 723.196 647.989 723.196C648.798 723.196 649.422 723.045 649.86 722.741C650.315 722.421 650.543 722.016 650.543 721.528C650.543 721.005 650.29 720.617 649.784 720.364C649.295 720.111 648.511 719.833 647.432 719.53C646.387 719.243 645.536 718.965 644.878 718.695C644.221 718.426 643.648 718.013 643.159 717.456C642.687 716.9 642.451 716.167 642.451 715.256C642.451 714.515 642.67 713.84 643.108 713.233C643.546 712.61 644.17 712.121 644.979 711.767C645.805 711.413 646.75 711.236 647.812 711.236C649.396 711.236 650.669 711.64 651.63 712.449C652.608 713.242 653.13 714.329 653.198 715.711H650.315C650.264 715.088 650.012 714.59 649.556 714.219C649.101 713.849 648.486 713.663 647.71 713.663C646.952 713.663 646.37 713.806 645.966 714.093C645.561 714.38 645.359 714.759 645.359 715.231C645.359 715.602 645.494 715.914 645.763 716.167C646.033 716.419 646.362 716.622 646.75 716.774C647.137 716.908 647.71 717.085 648.469 717.305C649.481 717.574 650.307 717.852 650.947 718.139C651.605 718.409 652.169 718.813 652.641 719.353C653.114 719.892 653.358 720.609 653.375 721.502C653.375 722.295 653.156 723.003 652.717 723.626C652.279 724.25 651.655 724.739 650.846 725.093C650.054 725.447 649.118 725.624 648.039 725.624ZM669.26 718.088C669.26 718.611 669.226 719.083 669.159 719.505H658.513C658.597 720.617 659.01 721.511 659.752 722.185C660.494 722.859 661.404 723.196 662.483 723.196C664.034 723.196 665.13 722.547 665.77 721.249H668.88C668.459 722.531 667.692 723.584 666.579 724.41C665.484 725.219 664.118 725.624 662.483 725.624C661.151 725.624 659.954 725.329 658.892 724.739C657.847 724.132 657.021 723.289 656.414 722.21C655.824 721.114 655.529 719.85 655.529 718.417C655.529 716.984 655.815 715.728 656.389 714.649C656.979 713.554 657.796 712.711 658.841 712.121C659.903 711.531 661.117 711.236 662.483 711.236C663.798 711.236 664.969 711.522 665.998 712.095C667.026 712.669 667.827 713.478 668.4 714.523C668.973 715.551 669.26 716.74 669.26 718.088ZM666.251 717.178C666.234 716.116 665.854 715.265 665.113 714.624C664.371 713.983 663.452 713.663 662.356 713.663C661.362 713.663 660.51 713.983 659.802 714.624C659.094 715.248 658.673 716.099 658.538 717.178H666.251ZM682.029 713.815V721.528C682.029 722.05 682.147 722.429 682.383 722.665C682.636 722.885 683.057 722.994 683.647 722.994H685.417V725.396H683.141C681.843 725.396 680.849 725.093 680.157 724.486C679.466 723.879 679.121 722.893 679.121 721.528V713.815H677.477V711.463H679.121V707.999H682.029V711.463H685.417V713.815H682.029ZM695.281 711.236C696.343 711.236 697.287 711.463 698.113 711.918C698.956 712.374 699.614 713.048 700.086 713.941C700.575 714.835 700.819 715.914 700.819 717.178V725.396H697.962V717.608C697.962 716.36 697.65 715.408 697.026 714.751C696.402 714.076 695.551 713.739 694.472 713.739C693.393 713.739 692.533 714.076 691.893 714.751C691.269 715.408 690.957 716.36 690.957 717.608V725.396H688.074V706.684H690.957V713.082C691.446 712.492 692.061 712.036 692.803 711.716C693.562 711.396 694.388 711.236 695.281 711.236ZM717.266 718.088C717.266 718.611 717.233 719.083 717.165 719.505H706.519C706.603 720.617 707.016 721.511 707.758 722.185C708.5 722.859 709.41 723.196 710.489 723.196C712.04 723.196 713.136 722.547 713.777 721.249H716.887C716.465 722.531 715.698 723.584 714.586 724.41C713.49 725.219 712.124 725.624 710.489 725.624C709.157 725.624 707.96 725.329 706.898 724.739C705.853 724.132 705.027 723.289 704.42 722.21C703.83 721.114 703.535 719.85 703.535 718.417C703.535 716.984 703.822 715.728 704.395 714.649C704.985 713.554 705.803 712.711 706.848 712.121C707.91 711.531 709.124 711.236 710.489 711.236C711.804 711.236 712.976 711.522 714.004 712.095C715.033 712.669 715.833 713.478 716.406 714.523C716.98 715.551 717.266 716.74 717.266 718.088ZM714.257 717.178C714.24 716.116 713.861 715.265 713.119 714.624C712.377 713.983 711.459 713.663 710.363 713.663C709.368 713.663 708.517 713.983 707.809 714.624C707.101 715.248 706.679 716.099 706.544 717.178H714.257ZM736.97 711.236C738.066 711.236 739.043 711.463 739.903 711.918C740.78 712.374 741.463 713.048 741.951 713.941C742.457 714.835 742.71 715.914 742.71 717.178V725.396H739.853V717.608C739.853 716.36 739.541 715.408 738.917 714.751C738.293 714.076 737.442 713.739 736.363 713.739C735.284 713.739 734.424 714.076 733.784 714.751C733.16 715.408 732.848 716.36 732.848 717.608V725.396H729.991V717.608C729.991 716.36 729.679 715.408 729.055 714.751C728.431 714.076 727.58 713.739 726.501 713.739C725.422 713.739 724.562 714.076 723.922 714.751C723.298 715.408 722.986 716.36 722.986 717.608V725.396H720.103V711.463H722.986V713.056C723.458 712.483 724.056 712.036 724.781 711.716C725.506 711.396 726.282 711.236 727.108 711.236C728.22 711.236 729.215 711.472 730.092 711.944C730.968 712.416 731.643 713.098 732.115 713.992C732.536 713.149 733.194 712.483 734.087 711.994C734.981 711.488 735.941 711.236 736.97 711.236ZM759.148 718.088C759.148 718.611 759.115 719.083 759.047 719.505H748.401C748.486 720.617 748.899 721.511 749.64 722.185C750.382 722.859 751.292 723.196 752.371 723.196C753.922 723.196 755.018 722.547 755.659 721.249H758.769C758.348 722.531 757.581 723.584 756.468 724.41C755.372 725.219 754.007 725.624 752.371 725.624C751.04 725.624 749.843 725.329 748.781 724.739C747.735 724.132 746.909 723.289 746.302 722.21C745.712 721.114 745.417 719.85 745.417 718.417C745.417 716.984 745.704 715.728 746.277 714.649C746.867 713.554 747.685 712.711 748.73 712.121C749.792 711.531 751.006 711.236 752.371 711.236C753.686 711.236 754.858 711.522 755.886 712.095C756.915 712.669 757.715 713.478 758.289 714.523C758.862 715.551 759.148 716.74 759.148 718.088ZM756.139 717.178C756.122 716.116 755.743 715.265 755.001 714.624C754.259 713.983 753.341 713.663 752.245 713.663C751.25 713.663 750.399 713.983 749.691 714.624C748.983 715.248 748.561 716.099 748.427 717.178H756.139ZM767.043 725.624C765.947 725.624 764.961 725.43 764.084 725.042C763.224 724.638 762.542 724.098 762.036 723.424C761.53 722.733 761.26 721.966 761.227 721.123H764.211C764.261 721.713 764.539 722.21 765.045 722.615C765.568 723.003 766.217 723.196 766.992 723.196C767.801 723.196 768.425 723.045 768.863 722.741C769.319 722.421 769.546 722.016 769.546 721.528C769.546 721.005 769.293 720.617 768.788 720.364C768.299 720.111 767.515 719.833 766.436 719.53C765.391 719.243 764.539 718.965 763.882 718.695C763.224 718.426 762.651 718.013 762.162 717.456C761.69 716.9 761.454 716.167 761.454 715.256C761.454 714.515 761.673 713.84 762.112 713.233C762.55 712.61 763.174 712.121 763.983 711.767C764.809 711.413 765.753 711.236 766.815 711.236C768.4 711.236 769.673 711.64 770.634 712.449C771.611 713.242 772.134 714.329 772.201 715.711H769.319C769.268 715.088 769.015 714.59 768.56 714.219C768.105 713.849 767.49 713.663 766.714 713.663C765.955 713.663 765.374 713.806 764.969 714.093C764.565 714.38 764.362 714.759 764.362 715.231C764.362 715.602 764.497 715.914 764.767 716.167C765.037 716.419 765.365 716.622 765.753 716.774C766.141 716.908 766.714 717.085 767.473 717.305C768.484 717.574 769.31 717.852 769.951 718.139C770.608 718.409 771.173 718.813 771.645 719.353C772.117 719.892 772.362 720.609 772.378 721.502C772.378 722.295 772.159 723.003 771.721 723.626C771.283 724.25 770.659 724.739 769.85 725.093C769.057 725.447 768.122 725.624 767.043 725.624Z" fill="var(--color-inkInverse)"/>
+<path d="M438.078 473.15V493.38C438.078 495.403 438.576 496.96 439.571 498.052C440.567 499.144 442.028 499.69 443.955 499.69C445.881 499.69 447.358 499.144 448.386 498.052C449.413 496.96 449.927 495.403 449.927 493.38V473.15H458.164V493.332C458.164 496.35 457.521 498.903 456.237 500.99C454.953 503.077 453.219 504.651 451.035 505.711C448.884 506.77 446.475 507.3 443.81 507.3C441.145 507.3 438.753 506.786 436.633 505.759C434.546 504.699 432.892 503.126 431.672 501.038C430.452 498.919 429.842 496.35 429.842 493.332V473.15H438.078ZM474.881 507.348C472.537 507.348 470.45 506.947 468.619 506.144C466.789 505.341 465.344 504.25 464.285 502.869C463.225 501.456 462.631 499.882 462.502 498.148H470.642C470.739 499.08 471.172 499.834 471.943 500.412C472.714 500.99 473.661 501.279 474.785 501.279C475.812 501.279 476.599 501.087 477.145 500.701C477.723 500.284 478.012 499.754 478.012 499.112C478.012 498.341 477.611 497.779 476.808 497.426C476.005 497.041 474.705 496.623 472.906 496.174C470.98 495.724 469.374 495.258 468.09 494.777C466.805 494.263 465.697 493.476 464.766 492.417C463.835 491.325 463.369 489.864 463.369 488.034C463.369 486.492 463.787 485.095 464.622 483.843C465.489 482.559 466.741 481.547 468.379 480.809C470.048 480.07 472.023 479.701 474.303 479.701C477.675 479.701 480.324 480.536 482.251 482.205C484.209 483.875 485.333 486.091 485.622 488.852H478.012C477.883 487.921 477.466 487.183 476.76 486.637C476.085 486.091 475.186 485.818 474.062 485.818C473.099 485.818 472.36 486.011 471.847 486.396C471.333 486.749 471.076 487.247 471.076 487.889C471.076 488.66 471.477 489.238 472.28 489.623C473.115 490.008 474.399 490.394 476.133 490.779C478.124 491.293 479.746 491.807 480.998 492.32C482.251 492.802 483.342 493.605 484.274 494.729C485.237 495.82 485.735 497.298 485.767 499.16C485.767 500.733 485.317 502.146 484.418 503.399C483.551 504.619 482.283 505.582 480.613 506.289C478.975 506.995 477.065 507.348 474.881 507.348ZM494.948 477.292C493.503 477.292 492.315 476.875 491.384 476.04C490.485 475.173 490.035 474.113 490.035 472.861C490.035 471.577 490.485 470.517 491.384 469.682C492.315 468.815 493.503 468.382 494.948 468.382C496.361 468.382 497.517 468.815 498.416 469.682C499.347 470.517 499.813 471.577 499.813 472.861C499.813 474.113 499.347 475.173 498.416 476.04C497.517 476.875 496.361 477.292 494.948 477.292ZM499.042 480.086V506.963H490.806V480.086H499.042ZM521.388 479.797C524.534 479.797 527.039 480.825 528.902 482.88C530.796 484.903 531.743 487.696 531.743 491.261V506.963H523.555V492.368C523.555 490.57 523.089 489.173 522.158 488.178C521.227 487.183 519.975 486.685 518.401 486.685C516.828 486.685 515.576 487.183 514.644 488.178C513.713 489.173 513.247 490.57 513.247 492.368V506.963H505.011V480.086H513.247V483.65C514.082 482.462 515.206 481.531 516.619 480.857C518.032 480.15 519.622 479.797 521.388 479.797ZM547.678 479.701C549.573 479.701 551.226 480.086 552.639 480.857C554.084 481.627 555.192 482.639 555.963 483.891V480.086H564.199V506.915C564.199 509.387 563.701 511.619 562.706 513.61C561.743 515.633 560.25 517.238 558.227 518.426C556.236 519.615 553.747 520.209 550.761 520.209C546.779 520.209 543.552 519.261 541.079 517.367C538.607 515.504 537.194 512.968 536.841 509.757H544.981C545.238 510.784 545.848 511.587 546.811 512.165C547.774 512.775 548.963 513.08 550.375 513.08C552.077 513.08 553.426 512.582 554.421 511.587C555.449 510.624 555.963 509.066 555.963 506.915V503.11C555.16 504.362 554.052 505.389 552.639 506.192C551.226 506.963 549.573 507.348 547.678 507.348C545.463 507.348 543.456 506.786 541.657 505.662C539.859 504.506 538.43 502.885 537.371 500.798C536.343 498.678 535.829 496.238 535.829 493.476C535.829 490.715 536.343 488.29 537.371 486.203C538.43 484.116 539.859 482.51 541.657 481.387C543.456 480.263 545.463 479.701 547.678 479.701ZM555.963 493.524C555.963 491.469 555.385 489.848 554.229 488.66C553.105 487.472 551.724 486.878 550.086 486.878C548.449 486.878 547.052 487.472 545.896 488.66C544.772 489.816 544.21 491.421 544.21 493.476C544.21 495.531 544.772 497.169 545.896 498.389C547.052 499.577 548.449 500.171 550.086 500.171C551.724 500.171 553.105 499.577 554.229 498.389C555.385 497.201 555.963 495.58 555.963 493.524ZM610.614 506.963H602.377L588.601 486.107V506.963H580.365V473.15H588.601L602.377 494.102V473.15H610.614V506.963ZM641.919 493.091C641.919 493.862 641.871 494.664 641.775 495.499H623.135C623.263 497.169 623.793 498.454 624.724 499.353C625.687 500.22 626.859 500.653 628.24 500.653C630.295 500.653 631.724 499.786 632.527 498.052H641.293C640.844 499.818 640.025 501.408 638.837 502.821C637.681 504.233 636.22 505.341 634.454 506.144C632.687 506.947 630.713 507.348 628.529 507.348C625.896 507.348 623.552 506.786 621.497 505.662C619.442 504.539 617.836 502.933 616.68 500.846C615.524 498.759 614.946 496.318 614.946 493.524C614.946 490.731 615.508 488.29 616.632 486.203C617.788 484.116 619.394 482.51 621.449 481.387C623.504 480.263 625.864 479.701 628.529 479.701C631.13 479.701 633.442 480.247 635.465 481.338C637.488 482.43 639.062 483.988 640.185 486.011C641.341 488.034 641.919 490.394 641.919 493.091ZM633.49 490.923C633.49 489.511 633.009 488.387 632.045 487.552C631.082 486.717 629.878 486.3 628.433 486.3C627.052 486.3 625.88 486.701 624.917 487.504C623.985 488.306 623.407 489.446 623.183 490.923H633.49ZM684.846 480.086L677.573 506.963H668.469L664.231 489.527L659.847 506.963H650.792L643.471 480.086H651.707L655.512 499.304L660.04 480.086H668.758L673.334 499.208L677.091 480.086H684.846ZM698.921 507.348C696.576 507.348 694.489 506.947 692.659 506.144C690.829 505.341 689.384 504.25 688.324 502.869C687.264 501.456 686.67 499.882 686.542 498.148H694.682C694.778 499.08 695.212 499.834 695.982 500.412C696.753 500.99 697.7 501.279 698.824 501.279C699.852 501.279 700.638 501.087 701.184 500.701C701.762 500.284 702.051 499.754 702.051 499.112C702.051 498.341 701.65 497.779 700.847 497.426C700.044 497.041 698.744 496.623 696.946 496.174C695.019 495.724 693.413 495.258 692.129 494.777C690.845 494.263 689.737 493.476 688.806 492.417C687.874 491.325 687.409 489.864 687.409 488.034C687.409 486.492 687.826 485.095 688.661 483.843C689.528 482.559 690.78 481.547 692.418 480.809C694.088 480.07 696.063 479.701 698.343 479.701C701.714 479.701 704.363 480.536 706.29 482.205C708.249 483.875 709.373 486.091 709.662 488.852H702.051C701.923 487.921 701.505 487.183 700.799 486.637C700.125 486.091 699.226 485.818 698.102 485.818C697.138 485.818 696.4 486.011 695.886 486.396C695.372 486.749 695.115 487.247 695.115 487.889C695.115 488.66 695.517 489.238 696.32 489.623C697.154 490.008 698.439 490.394 700.173 490.779C702.164 491.293 703.785 491.807 705.038 492.32C706.29 492.802 707.382 493.605 708.313 494.729C709.276 495.82 709.774 497.298 709.806 499.16C709.806 500.733 709.357 502.146 708.457 503.399C707.59 504.619 706.322 505.582 704.652 506.289C703.015 506.995 701.104 507.348 698.921 507.348ZM734.449 506.963L723.082 492.031V506.963H714.845V473.15H723.082V487.985L734.352 473.15H744.034L730.933 489.719L744.516 506.963H734.449ZM752.572 477.292C751.127 477.292 749.939 476.875 749.008 476.04C748.109 475.173 747.659 474.113 747.659 472.861C747.659 471.577 748.109 470.517 749.008 469.682C749.939 468.815 751.127 468.382 752.572 468.382C753.985 468.382 755.141 468.815 756.04 469.682C756.971 470.517 757.437 471.577 757.437 472.861C757.437 474.113 756.971 475.173 756.04 476.04C755.141 476.875 753.985 477.292 752.572 477.292ZM756.666 480.086V506.963H748.43V480.086H756.666ZM777.615 499.979V506.963H773.424C770.438 506.963 768.11 506.24 766.44 504.795C764.771 503.318 763.936 500.926 763.936 497.619V486.926H760.66V480.086H763.936V473.535H772.172V480.086H777.567V486.926H772.172V497.715C772.172 498.518 772.365 499.096 772.75 499.449C773.135 499.802 773.778 499.979 774.677 499.979H777.615ZM807.39 499.979V506.963H803.199C800.213 506.963 797.885 506.24 796.215 504.795C794.545 503.318 793.71 500.926 793.71 497.619V486.926H790.435V480.086H793.71V473.535H801.947V480.086H807.341V486.926H801.947V497.715C801.947 498.518 802.14 499.096 802.525 499.449C802.91 499.802 803.552 499.979 804.451 499.979H807.39ZM828.499 479.797C831.581 479.797 834.054 480.825 835.916 482.88C837.779 484.903 838.71 487.696 838.71 491.261V506.963H830.522V492.368C830.522 490.57 830.056 489.173 829.125 488.178C828.193 487.183 826.941 486.685 825.368 486.685C823.794 486.685 822.542 487.183 821.611 488.178C820.68 489.173 820.214 490.57 820.214 492.368V506.963H811.977V471.32H820.214V483.699C821.049 482.51 822.189 481.563 823.634 480.857C825.079 480.15 826.7 479.797 828.499 479.797ZM869.769 493.091C869.769 493.862 869.721 494.664 869.624 495.499H850.984C851.112 497.169 851.642 498.454 852.573 499.353C853.537 500.22 854.709 500.653 856.09 500.653C858.145 500.653 859.574 499.786 860.376 498.052H869.143C868.693 499.818 867.874 501.408 866.686 502.821C865.53 504.233 864.069 505.341 862.303 506.144C860.537 506.947 858.562 507.348 856.379 507.348C853.745 507.348 851.401 506.786 849.346 505.662C847.291 504.539 845.686 502.933 844.53 500.846C843.374 498.759 842.796 496.318 842.796 493.524C842.796 490.731 843.358 488.29 844.481 486.203C845.637 484.116 847.243 482.51 849.298 481.387C851.353 480.263 853.713 479.701 856.379 479.701C858.98 479.701 861.292 480.247 863.315 481.338C865.338 482.43 866.911 483.988 868.035 486.011C869.191 488.034 869.769 490.394 869.769 493.091ZM861.34 490.923C861.34 489.511 860.858 488.387 859.895 487.552C858.931 486.717 857.727 486.3 856.282 486.3C854.901 486.3 853.729 486.701 852.766 487.504C851.835 488.306 851.257 489.446 851.032 490.923H861.34ZM908.408 479.797C911.748 479.797 914.397 480.809 916.356 482.832C918.347 484.855 919.342 487.664 919.342 491.261V506.963H911.154V492.368C911.154 490.634 910.688 489.302 909.757 488.371C908.858 487.407 907.606 486.926 906 486.926C904.395 486.926 903.126 487.407 902.195 488.371C901.296 489.302 900.846 490.634 900.846 492.368V506.963H892.658V492.368C892.658 490.634 892.192 489.302 891.261 488.371C890.362 487.407 889.11 486.926 887.504 486.926C885.899 486.926 884.63 487.407 883.699 488.371C882.8 489.302 882.35 490.634 882.35 492.368V506.963H874.114V480.086H882.35V483.458C883.185 482.334 884.277 481.451 885.626 480.809C886.974 480.134 888.5 479.797 890.202 479.797C892.224 479.797 894.023 480.231 895.596 481.098C897.202 481.965 898.454 483.201 899.353 484.806C900.284 483.329 901.553 482.125 903.158 481.194C904.764 480.263 906.514 479.797 908.408 479.797ZM950.438 493.091C950.438 493.862 950.39 494.664 950.294 495.499H931.653C931.782 497.169 932.311 498.454 933.243 499.353C934.206 500.22 935.378 500.653 936.759 500.653C938.814 500.653 940.243 499.786 941.046 498.052H949.812C949.362 499.818 948.543 501.408 947.355 502.821C946.199 504.233 944.738 505.341 942.972 506.144C941.206 506.947 939.231 507.348 937.048 507.348C934.415 507.348 932.071 506.786 930.015 505.662C927.96 504.539 926.355 502.933 925.199 500.846C924.043 498.759 923.465 496.318 923.465 493.524C923.465 490.731 924.027 488.29 925.151 486.203C926.307 484.116 927.912 482.51 929.967 481.387C932.022 480.263 934.383 479.701 937.048 479.701C939.649 479.701 941.961 480.247 943.984 481.338C946.007 482.43 947.58 483.988 948.704 486.011C949.86 488.034 950.438 490.394 950.438 493.091ZM942.009 490.923C942.009 489.511 941.527 488.387 940.564 487.552C939.601 486.717 938.396 486.3 936.951 486.3C935.571 486.3 934.399 486.701 933.435 487.504C932.504 488.306 931.926 489.446 931.701 490.923H942.009ZM965.717 507.348C963.373 507.348 961.286 506.947 959.455 506.144C957.625 505.341 956.18 504.25 955.12 502.869C954.061 501.456 953.467 499.882 953.338 498.148H961.478C961.575 499.08 962.008 499.834 962.779 500.412C963.549 500.99 964.497 501.279 965.621 501.279C966.648 501.279 967.435 501.087 967.981 500.701C968.559 500.284 968.848 499.754 968.848 499.112C968.848 498.341 968.446 497.779 967.644 497.426C966.841 497.041 965.54 496.623 963.742 496.174C961.815 495.724 960.21 495.258 958.925 494.777C957.641 494.263 956.533 493.476 955.602 492.417C954.671 491.325 954.205 489.864 954.205 488.034C954.205 486.492 954.623 485.095 955.458 483.843C956.325 482.559 957.577 481.547 959.214 480.809C960.884 480.07 962.859 479.701 965.139 479.701C968.511 479.701 971.16 480.536 973.086 482.205C975.045 483.875 976.169 486.091 976.458 488.852H968.848C968.719 487.921 968.302 487.183 967.595 486.637C966.921 486.091 966.022 485.818 964.898 485.818C963.935 485.818 963.196 486.011 962.682 486.396C962.169 486.749 961.912 487.247 961.912 487.889C961.912 488.66 962.313 489.238 963.116 489.623C963.951 490.008 965.235 490.394 966.969 490.779C968.96 491.293 970.582 491.807 971.834 492.32C973.086 492.802 974.178 493.605 975.109 494.729C976.073 495.82 976.57 497.298 976.603 499.16C976.603 500.733 976.153 502.146 975.254 503.399C974.387 504.619 973.119 505.582 971.449 506.289C969.811 506.995 967.9 507.348 965.717 507.348Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M427 372.037H545.009V420.203H439C432.373 420.203 427 414.831 427 408.203V372.037Z" fill="var(--color-illustrationInterface070)"/>
+<path d="M456.066 392.573C455.611 391.696 454.979 391.039 454.169 390.6C453.36 390.145 452.425 389.917 451.363 389.917C450.199 389.917 449.163 390.179 448.252 390.701C447.342 391.224 446.625 391.966 446.103 392.927C445.597 393.888 445.344 395 445.344 396.265C445.344 397.529 445.597 398.65 446.103 399.628C446.625 400.589 447.342 401.33 448.252 401.853C449.163 402.376 450.199 402.637 451.363 402.637C452.93 402.637 454.203 402.199 455.181 401.322C456.159 400.445 456.757 399.257 456.976 397.757H450.376V395.455H460.061V397.706C459.876 399.071 459.387 400.327 458.595 401.474C457.819 402.62 456.799 403.539 455.535 404.23C454.287 404.904 452.897 405.242 451.363 405.242C449.71 405.242 448.202 404.862 446.836 404.104C445.471 403.328 444.383 402.258 443.574 400.892C442.782 399.527 442.386 397.984 442.386 396.265C442.386 394.545 442.782 393.002 443.574 391.637C444.383 390.271 445.471 389.209 446.836 388.451C448.219 387.675 449.727 387.288 451.363 387.288C453.234 387.288 454.894 387.751 456.344 388.678C457.811 389.589 458.873 390.887 459.53 392.573H456.066ZM475.523 391.157V405.09H472.64V403.446C472.185 404.019 471.587 404.475 470.845 404.812C470.12 405.132 469.345 405.292 468.518 405.292C467.423 405.292 466.436 405.065 465.56 404.609C464.7 404.154 464.017 403.48 463.512 402.586C463.023 401.693 462.778 400.614 462.778 399.35V391.157H465.636V398.92C465.636 400.167 465.948 401.128 466.571 401.802C467.195 402.46 468.046 402.789 469.125 402.789C470.204 402.789 471.056 402.46 471.679 401.802C472.32 401.128 472.64 400.167 472.64 398.92V391.157H475.523ZM480.793 389.311C480.271 389.311 479.832 389.134 479.478 388.78C479.124 388.425 478.947 387.987 478.947 387.465C478.947 386.942 479.124 386.504 479.478 386.15C479.832 385.796 480.271 385.619 480.793 385.619C481.299 385.619 481.729 385.796 482.083 386.15C482.437 386.504 482.614 386.942 482.614 387.465C482.614 387.987 482.437 388.425 482.083 388.78C481.729 389.134 481.299 389.311 480.793 389.311ZM482.209 391.157V405.09H479.327V391.157H482.209ZM485.033 398.06C485.033 396.661 485.32 395.422 485.893 394.343C486.483 393.264 487.275 392.429 488.27 391.839C489.282 391.232 490.403 390.929 491.633 390.929C492.544 390.929 493.437 391.131 494.314 391.536C495.207 391.924 495.915 392.446 496.438 393.104V386.377H499.346V405.09H496.438V402.991C495.966 403.665 495.308 404.222 494.465 404.66C493.639 405.098 492.687 405.317 491.608 405.317C490.394 405.317 489.282 405.014 488.27 404.407C487.275 403.783 486.483 402.924 485.893 401.828C485.32 400.715 485.033 399.459 485.033 398.06ZM496.438 398.111C496.438 397.15 496.236 396.315 495.831 395.607C495.443 394.899 494.929 394.36 494.288 393.989C493.648 393.618 492.957 393.432 492.215 393.432C491.473 393.432 490.782 393.618 490.141 393.989C489.501 394.343 488.978 394.874 488.573 395.582C488.186 396.273 487.992 397.099 487.992 398.06C487.992 399.021 488.186 399.864 488.573 400.589C488.978 401.314 489.501 401.87 490.141 402.258C490.799 402.629 491.49 402.814 492.215 402.814C492.957 402.814 493.648 402.629 494.288 402.258C494.929 401.887 495.443 401.347 495.831 400.639C496.236 399.914 496.438 399.071 496.438 398.111ZM515.902 397.782C515.902 398.304 515.869 398.776 515.801 399.198H505.155C505.24 400.311 505.653 401.204 506.394 401.878C507.136 402.553 508.046 402.89 509.125 402.89C510.676 402.89 511.772 402.241 512.413 400.943H515.523C515.102 402.224 514.335 403.278 513.222 404.104C512.126 404.913 510.761 405.317 509.125 405.317C507.794 405.317 506.597 405.022 505.535 404.432C504.489 403.825 503.663 402.983 503.056 401.904C502.466 400.808 502.171 399.543 502.171 398.111C502.171 396.678 502.458 395.422 503.031 394.343C503.621 393.247 504.439 392.404 505.484 391.814C506.546 391.224 507.76 390.929 509.125 390.929C510.44 390.929 511.612 391.216 512.64 391.789C513.669 392.362 514.469 393.171 515.043 394.216C515.616 395.245 515.902 396.433 515.902 397.782ZM512.893 396.871C512.876 395.809 512.497 394.958 511.755 394.317C511.013 393.677 510.095 393.357 508.999 393.357C508.004 393.357 507.153 393.677 506.445 394.317C505.737 394.941 505.315 395.793 505.181 396.871H512.893ZM523.797 405.317C522.701 405.317 521.715 405.124 520.838 404.736C519.978 404.331 519.296 403.792 518.79 403.117C518.284 402.426 518.014 401.659 517.981 400.816H520.965C521.015 401.406 521.293 401.904 521.799 402.308C522.322 402.696 522.971 402.89 523.746 402.89C524.555 402.89 525.179 402.738 525.617 402.435C526.073 402.114 526.3 401.71 526.3 401.221C526.3 400.698 526.047 400.311 525.542 400.058C525.053 399.805 524.269 399.527 523.19 399.223C522.145 398.937 521.293 398.658 520.636 398.389C519.978 398.119 519.405 397.706 518.916 397.15C518.444 396.593 518.208 395.86 518.208 394.95C518.208 394.208 518.427 393.534 518.866 392.927C519.304 392.303 519.928 391.814 520.737 391.46C521.563 391.106 522.507 390.929 523.569 390.929C525.154 390.929 526.427 391.334 527.388 392.143C528.365 392.935 528.888 394.022 528.955 395.405H526.073C526.022 394.781 525.769 394.284 525.314 393.913C524.859 393.542 524.244 393.357 523.468 393.357C522.709 393.357 522.128 393.5 521.723 393.786C521.319 394.073 521.116 394.452 521.116 394.924C521.116 395.295 521.251 395.607 521.521 395.86C521.791 396.113 522.119 396.315 522.507 396.467C522.895 396.602 523.468 396.779 524.227 396.998C525.238 397.268 526.064 397.546 526.705 397.832C527.362 398.102 527.927 398.507 528.399 399.046C528.871 399.586 529.116 400.302 529.132 401.196C529.132 401.988 528.913 402.696 528.475 403.32C528.037 403.943 527.413 404.432 526.604 404.786C525.811 405.14 524.876 405.317 523.797 405.317Z" fill="var(--color-inkInverse)"/>
+<rect x="600.68" y="249.309" width="146.882" height="9.79213" rx="4.89607" fill="var(--color-illustrationInterface030)"/>
+<rect x="600.68" y="274.139" width="146.882" height="9.79213" rx="4.89607" fill="var(--color-illustrationInterface030)"/>
+<rect x="600.68" y="224.478" width="146.882" height="9.79213" rx="4.89607" fill="var(--color-illustrationInterface030)"/>
+<rect x="670.624" y="174.818" width="76.9382" height="9.79213" rx="4.89607" fill="var(--color-illustrationInterface030)"/>
+<rect x="670.624" y="199.647" width="76.9382" height="9.79213" rx="4.89607" fill="var(--color-illustrationInterface030)"/>
+<rect x="670.624" y="149.988" width="76.9382" height="9.79213" rx="4.89607" fill="var(--color-illustrationInterface030)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M615.431 210.724C615.807 210.724 616.14 210.484 616.26 210.129L619.468 200.605C619.588 200.249 619.921 200.009 620.296 200.009H641.551C641.926 200.009 642.26 200.249 642.379 200.605L645.587 210.129C645.707 210.484 646.04 210.724 646.416 210.724H660.095C660.7 210.724 661.123 210.123 660.918 209.554L639.932 151.222C639.682 150.528 639.024 150.065 638.286 150.065H623.733C622.995 150.065 622.337 150.528 622.087 151.222L601.101 209.554C600.896 210.123 601.319 210.724 601.924 210.724H615.431ZM638.117 187.392C638.31 187.959 637.888 188.548 637.289 188.548H624.725C624.127 188.548 623.706 187.961 623.896 187.395L630.142 168.822C630.409 168.029 631.529 168.027 631.799 168.819L638.117 187.392Z" fill="var(--color-illustrationInterface070)"/>
+<ellipse cx="674.064" cy="329.052" rx="21.6113" ry="21.8488" fill="var(--color-illustrationInterface030)"/>
+<ellipse cx="622.291" cy="329.052" rx="21.6113" ry="21.8488" fill="var(--color-illustrationInterface020)"/>
+<path d="M726.09 307.441H872.348C884.293 307.441 893.976 317.124 893.976 329.069C893.976 341.014 884.293 350.698 872.348 350.698H726.09C714.145 350.698 704.462 341.014 704.462 329.069C704.462 317.124 714.145 307.441 726.09 307.441Z" fill="var(--color-illustrationInterface050)" stroke="#8883F6" stroke-width="0.474973"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M772.621 168.987C772.621 158.494 781.127 149.988 791.62 149.988H875.215C885.708 149.988 894.214 158.494 894.214 168.987V252.582C894.214 263.075 885.708 271.581 875.215 271.581H791.62C781.127 271.581 772.621 263.075 772.621 252.582V168.987ZM874.465 181.054C876.603 183.213 876.586 186.696 874.427 188.834L825.234 237.555C822.589 240.174 818.303 240.09 815.762 237.37L796.659 216.913C794.586 214.692 794.705 211.21 796.926 209.136C799.147 207.062 802.628 207.182 804.702 209.403L820.711 226.546L866.684 181.016C868.843 178.878 872.327 178.895 874.465 181.054Z" fill="var(--color-illustrationInterface070)"/>
+</g>
+<defs>
+<clipPath id="clip0_3523_104054">
+<rect width="1490" height="838" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site/public/static/illustrations/components/card-composable/usage/do-2.svg b/site/public/static/illustrations/components/card-composable/usage/do-2.svg
new file mode 100644
index 0000000000..44ee598903
--- /dev/null
+++ b/site/public/static/illustrations/components/card-composable/usage/do-2.svg
@@ -0,0 +1,82 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3519_104123)">
+<path d="M0 0H1490V838H0V0Z" fill="var(--color-illustrationBackground010)"/>
+<path d="M80 144C80 137.373 85.3726 132 92 132H458C464.627 132 470 137.373 470 144V329C470 335.627 464.627 341 458 341H92C85.3726 341 80 335.627 80 329V144Z" fill="var(--color-illustrationInterface030)"/>
+<g clip-path="url(#clip1_3519_104123)">
+<rect x="80" y="594.682" width="102.002" height="60" rx="8" fill="var(--color-illustrationInterface060)"/>
+<path d="M105.387 624.685C106.171 624.825 106.836 625.238 107.382 625.924C107.928 626.61 108.201 627.387 108.201 628.255C108.201 628.997 108.005 629.669 107.613 630.271C107.235 630.859 106.682 631.328 105.954 631.678C105.226 632.014 104.379 632.182 103.413 632.182H97.575V617.587H103.14C104.134 617.587 104.988 617.755 105.702 618.091C106.416 618.427 106.955 618.882 107.319 619.456C107.683 620.016 107.865 620.646 107.865 621.346C107.865 622.186 107.641 622.886 107.193 623.446C106.745 624.006 106.143 624.419 105.387 624.685ZM99.969 623.719H102.93C103.714 623.719 104.323 623.544 104.757 623.194C105.205 622.83 105.429 622.312 105.429 621.64C105.429 620.982 105.205 620.471 104.757 620.107C104.323 619.729 103.714 619.54 102.93 619.54H99.969V623.719ZM103.203 630.229C104.015 630.229 104.652 630.033 105.114 629.641C105.576 629.249 105.807 628.703 105.807 628.003C105.807 627.289 105.562 626.722 105.072 626.302C104.582 625.882 103.931 625.672 103.119 625.672H99.969V630.229H103.203ZM121.282 620.611V632.182H118.888V630.817C118.51 631.293 118.013 631.671 117.397 631.951C116.795 632.217 116.151 632.35 115.465 632.35C114.555 632.35 113.736 632.161 113.008 631.783C112.294 631.405 111.727 630.845 111.307 630.103C110.901 629.361 110.698 628.465 110.698 627.415V620.611H113.071V627.058C113.071 628.094 113.33 628.892 113.848 629.452C114.366 629.998 115.073 630.271 115.969 630.271C116.865 630.271 117.572 629.998 118.09 629.452C118.622 628.892 118.888 628.094 118.888 627.058V620.611H121.282ZM127.233 622.564V628.969C127.233 629.403 127.331 629.718 127.527 629.914C127.737 630.096 128.087 630.187 128.577 630.187H130.047V632.182H128.157C127.079 632.182 126.253 631.93 125.679 631.426C125.105 630.922 124.818 630.103 124.818 628.969V622.564H123.453V620.611H124.818V617.734H127.233V620.611H130.047V622.564H127.233ZM135.047 622.564V628.969C135.047 629.403 135.145 629.718 135.341 629.914C135.551 630.096 135.901 630.187 136.391 630.187H137.861V632.182H135.971C134.893 632.182 134.067 631.93 133.493 631.426C132.919 630.922 132.632 630.103 132.632 628.969V622.564H131.267V620.611H132.632V617.734H135.047V620.611H137.861V622.564H135.047ZM145.086 632.371C143.994 632.371 143.007 632.126 142.125 631.636C141.243 631.132 140.55 630.432 140.046 629.536C139.542 628.626 139.29 627.576 139.29 626.386C139.29 625.21 139.549 624.167 140.067 623.257C140.585 622.347 141.292 621.647 142.188 621.157C143.084 620.667 144.085 620.422 145.191 620.422C146.297 620.422 147.298 620.667 148.194 621.157C149.09 621.647 149.797 622.347 150.315 623.257C150.833 624.167 151.092 625.21 151.092 626.386C151.092 627.562 150.826 628.605 150.294 629.515C149.762 630.425 149.034 631.132 148.11 631.636C147.2 632.126 146.192 632.371 145.086 632.371ZM145.086 630.292C145.702 630.292 146.276 630.145 146.808 629.851C147.354 629.557 147.795 629.116 148.131 628.528C148.467 627.94 148.635 627.226 148.635 626.386C148.635 625.546 148.474 624.839 148.152 624.265C147.83 623.677 147.403 623.236 146.871 622.942C146.339 622.648 145.765 622.501 145.149 622.501C144.533 622.501 143.959 622.648 143.427 622.942C142.909 623.236 142.496 623.677 142.188 624.265C141.88 624.839 141.726 625.546 141.726 626.386C141.726 627.632 142.041 628.598 142.671 629.284C143.315 629.956 144.12 630.292 145.086 630.292ZM159.297 620.422C160.207 620.422 161.019 620.611 161.733 620.989C162.461 621.367 163.028 621.927 163.434 622.669C163.84 623.411 164.043 624.307 164.043 625.357V632.182H161.67V625.714C161.67 624.678 161.411 623.887 160.893 623.341C160.375 622.781 159.668 622.501 158.772 622.501C157.876 622.501 157.162 622.781 156.63 623.341C156.112 623.887 155.853 624.678 155.853 625.714V632.182H153.459V620.611H155.853V621.934C156.245 621.458 156.742 621.087 157.344 620.821C157.96 620.555 158.611 620.422 159.297 620.422Z" fill="var(--color-inkInverse)"/>
+</g>
+<rect x="80" y="515.586" width="373.988" height="11.8024" rx="5.90119" fill="var(--color-illustrationInterface030)"/>
+<rect x="80" y="542.879" width="189.576" height="11.8024" rx="5.90119" fill="var(--color-illustrationInterface030)"/>
+<g clip-path="url(#clip2_3519_104123)">
+<rect width="69.0015" height="40" transform="translate(80 381)" fill="var(--color-illustrationInterface060)"/>
+<path d="M102.164 393.905V395.858H95.969V400.163H100.799V402.116H95.969V408.5H93.575V393.905H102.164ZM106.777 392.96V408.5H104.383V392.96H106.777ZM109.122 402.662C109.122 401.5 109.36 400.471 109.836 399.575C110.326 398.679 110.984 397.986 111.81 397.496C112.65 396.992 113.574 396.74 114.582 396.74C115.492 396.74 116.283 396.922 116.955 397.286C117.641 397.636 118.187 398.077 118.593 398.609V396.929H121.008V408.5H118.593V406.778C118.187 407.324 117.634 407.779 116.934 408.143C116.234 408.507 115.436 408.689 114.54 408.689C113.546 408.689 112.636 408.437 111.81 407.933C110.984 407.415 110.326 406.701 109.836 405.791C109.36 404.867 109.122 403.824 109.122 402.662ZM118.593 402.704C118.593 401.906 118.425 401.213 118.089 400.625C117.767 400.037 117.34 399.589 116.808 399.281C116.276 398.973 115.702 398.819 115.086 398.819C114.47 398.819 113.896 398.973 113.364 399.281C112.832 399.575 112.398 400.016 112.062 400.604C111.74 401.178 111.579 401.864 111.579 402.662C111.579 403.46 111.74 404.16 112.062 404.762C112.398 405.364 112.832 405.826 113.364 406.148C113.91 406.456 114.484 406.61 115.086 406.61C115.702 406.61 116.276 406.456 116.808 406.148C117.34 405.84 117.767 405.392 118.089 404.804C118.425 404.202 118.593 403.502 118.593 402.704ZM128.814 396.74C129.71 396.74 130.501 396.922 131.187 397.286C131.887 397.636 132.433 398.077 132.825 398.609V396.929H135.24V408.689C135.24 409.753 135.016 410.698 134.568 411.524C134.12 412.364 133.469 413.022 132.615 413.498C131.775 413.974 130.767 414.212 129.591 414.212C128.023 414.212 126.721 413.841 125.685 413.099C124.649 412.371 124.061 411.377 123.921 410.117H126.294C126.476 410.719 126.861 411.202 127.449 411.566C128.051 411.944 128.765 412.133 129.591 412.133C130.557 412.133 131.334 411.839 131.922 411.251C132.524 410.663 132.825 409.809 132.825 408.689V406.757C132.419 407.303 131.866 407.765 131.166 408.143C130.48 408.507 129.696 408.689 128.814 408.689C127.806 408.689 126.882 408.437 126.042 407.933C125.216 407.415 124.558 406.701 124.068 405.791C123.592 404.867 123.354 403.824 123.354 402.662C123.354 401.5 123.592 400.471 124.068 399.575C124.558 398.679 125.216 397.986 126.042 397.496C126.882 396.992 127.806 396.74 128.814 396.74ZM132.825 402.704C132.825 401.906 132.657 401.213 132.321 400.625C131.999 400.037 131.572 399.589 131.04 399.281C130.508 398.973 129.934 398.819 129.318 398.819C128.702 398.819 128.128 398.973 127.596 399.281C127.064 399.575 126.63 400.016 126.294 400.604C125.972 401.178 125.811 401.864 125.811 402.662C125.811 403.46 125.972 404.16 126.294 404.762C126.63 405.364 127.064 405.826 127.596 406.148C128.142 406.456 128.716 406.61 129.318 406.61C129.934 406.61 130.508 406.456 131.04 406.148C131.572 405.84 131.999 405.392 132.321 404.804C132.657 404.202 132.825 403.502 132.825 402.704Z" fill="var(--color-inkInverse)"/>
+</g>
+<path d="M106.8 450.92V479H99.96V467.44H89.32V479H82.48V450.92H89.32V461.92H99.96V450.92H106.8ZM132.778 467.48C132.778 468.12 132.738 468.787 132.658 469.48H117.178C117.284 470.867 117.724 471.933 118.498 472.68C119.298 473.4 120.271 473.76 121.418 473.76C123.124 473.76 124.311 473.04 124.978 471.6H132.258C131.884 473.067 131.204 474.387 130.218 475.56C129.258 476.733 128.044 477.653 126.578 478.32C125.111 478.987 123.471 479.32 121.658 479.32C119.471 479.32 117.524 478.853 115.818 477.92C114.111 476.987 112.778 475.653 111.818 473.92C110.858 472.187 110.378 470.16 110.378 467.84C110.378 465.52 110.844 463.493 111.778 461.76C112.738 460.027 114.071 458.693 115.778 457.76C117.484 456.827 119.444 456.36 121.658 456.36C123.818 456.36 125.738 456.813 127.418 457.72C129.098 458.627 130.404 459.92 131.338 461.6C132.298 463.28 132.778 465.24 132.778 467.48ZM125.778 465.68C125.778 464.507 125.378 463.573 124.578 462.88C123.778 462.187 122.778 461.84 121.578 461.84C120.431 461.84 119.458 462.173 118.658 462.84C117.884 463.507 117.404 464.453 117.218 465.68H125.778ZM135.026 467.8C135.026 465.507 135.453 463.493 136.306 461.76C137.186 460.027 138.373 458.693 139.866 457.76C141.36 456.827 143.026 456.36 144.866 456.36C146.44 456.36 147.813 456.68 148.986 457.32C150.186 457.96 151.106 458.8 151.746 459.84V456.68H158.586V479H151.746V475.84C151.08 476.88 150.146 477.72 148.946 478.36C147.773 479 146.4 479.32 144.826 479.32C143.013 479.32 141.36 478.853 139.866 477.92C138.373 476.96 137.186 475.613 136.306 473.88C135.453 472.12 135.026 470.093 135.026 467.8ZM151.746 467.84C151.746 466.133 151.266 464.787 150.306 463.8C149.373 462.813 148.226 462.32 146.866 462.32C145.506 462.32 144.346 462.813 143.386 463.8C142.453 464.76 141.986 466.093 141.986 467.8C141.986 469.507 142.453 470.867 143.386 471.88C144.346 472.867 145.506 473.36 146.866 473.36C148.226 473.36 149.373 472.867 150.306 471.88C151.266 470.893 151.746 469.547 151.746 467.84ZM162.175 467.8C162.175 465.507 162.601 463.493 163.455 461.76C164.335 460.027 165.521 458.693 167.015 457.76C168.508 456.827 170.175 456.36 172.015 456.36C173.481 456.36 174.815 456.667 176.015 457.28C177.241 457.893 178.201 458.72 178.895 459.76V449.4H185.735V479H178.895V475.8C178.255 476.867 177.335 477.72 176.135 478.36C174.961 479 173.588 479.32 172.015 479.32C170.175 479.32 168.508 478.853 167.015 477.92C165.521 476.96 164.335 475.613 163.455 473.88C162.601 472.12 162.175 470.093 162.175 467.8ZM178.895 467.84C178.895 466.133 178.415 464.787 177.455 463.8C176.521 462.813 175.375 462.32 174.015 462.32C172.655 462.32 171.495 462.813 170.535 463.8C169.601 464.76 169.135 466.093 169.135 467.8C169.135 469.507 169.601 470.867 170.535 471.88C171.495 472.867 172.655 473.36 174.015 473.36C175.375 473.36 176.521 472.867 177.455 471.88C178.415 470.893 178.895 469.547 178.895 467.84ZM194.123 454.36C192.923 454.36 191.936 454.013 191.163 453.32C190.416 452.6 190.043 451.72 190.043 450.68C190.043 449.613 190.416 448.733 191.163 448.04C191.936 447.32 192.923 446.96 194.123 446.96C195.296 446.96 196.256 447.32 197.003 448.04C197.776 448.733 198.163 449.613 198.163 450.68C198.163 451.72 197.776 452.6 197.003 453.32C196.256 454.013 195.296 454.36 194.123 454.36ZM197.523 456.68V479H190.683V456.68H197.523ZM216.08 456.44C218.693 456.44 220.773 457.293 222.32 459C223.893 460.68 224.68 463 224.68 465.96V479H217.88V466.88C217.88 465.387 217.493 464.227 216.72 463.4C215.947 462.573 214.907 462.16 213.6 462.16C212.293 462.16 211.253 462.573 210.48 463.4C209.707 464.227 209.32 465.387 209.32 466.88V479H202.48V456.68H209.32V459.64C210.013 458.653 210.947 457.88 212.12 457.32C213.293 456.733 214.613 456.44 216.08 456.44ZM237.913 456.36C239.486 456.36 240.86 456.68 242.033 457.32C243.233 457.96 244.153 458.8 244.793 459.84V456.68H251.633V478.96C251.633 481.013 251.22 482.867 250.393 484.52C249.593 486.2 248.353 487.533 246.673 488.52C245.02 489.507 242.953 490 240.473 490C237.166 490 234.486 489.213 232.433 487.64C230.38 486.093 229.206 483.987 228.913 481.32H235.673C235.886 482.173 236.393 482.84 237.193 483.32C237.993 483.827 238.98 484.08 240.153 484.08C241.566 484.08 242.686 483.667 243.513 482.84C244.366 482.04 244.793 480.747 244.793 478.96V475.8C244.126 476.84 243.206 477.693 242.033 478.36C240.86 479 239.486 479.32 237.913 479.32C236.073 479.32 234.406 478.853 232.913 477.92C231.42 476.96 230.233 475.613 229.353 473.88C228.5 472.12 228.073 470.093 228.073 467.8C228.073 465.507 228.5 463.493 229.353 461.76C230.233 460.027 231.42 458.693 232.913 457.76C234.406 456.827 236.073 456.36 237.913 456.36ZM244.793 467.84C244.793 466.133 244.313 464.787 243.353 463.8C242.42 462.813 241.273 462.32 239.913 462.32C238.553 462.32 237.393 462.813 236.433 463.8C235.5 464.76 235.033 466.093 235.033 467.8C235.033 469.507 235.5 470.867 236.433 471.88C237.393 472.867 238.553 473.36 239.913 473.36C241.273 473.36 242.42 472.867 243.353 471.88C244.313 470.893 244.793 469.547 244.793 467.84Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M550 144C550 137.373 555.373 132 562 132H928C934.627 132 940 137.373 940 144V329C940 335.627 934.627 341 928 341H562C555.373 341 550 335.627 550 329V144Z" fill="var(--color-illustrationInterface030)"/>
+<g clip-path="url(#clip3_3519_104123)">
+<rect x="550" y="594.682" width="102.002" height="60" rx="8" fill="var(--color-illustrationInterface060)"/>
+<path d="M575.387 624.685C576.171 624.825 576.836 625.238 577.382 625.924C577.928 626.61 578.201 627.387 578.201 628.255C578.201 628.997 578.005 629.669 577.613 630.271C577.235 630.859 576.682 631.328 575.954 631.678C575.226 632.014 574.379 632.182 573.413 632.182H567.575L567.575 617.587H573.14C574.134 617.587 574.988 617.755 575.702 618.091C576.416 618.427 576.955 618.882 577.319 619.456C577.683 620.016 577.865 620.646 577.865 621.346C577.865 622.186 577.641 622.886 577.193 623.446C576.745 624.006 576.143 624.419 575.387 624.685ZM569.969 623.719H572.93C573.714 623.719 574.323 623.544 574.757 623.194C575.205 622.83 575.429 622.312 575.429 621.64C575.429 620.982 575.205 620.471 574.757 620.107C574.323 619.729 573.714 619.54 572.93 619.54H569.969V623.719ZM573.203 630.229C574.015 630.229 574.652 630.033 575.114 629.641C575.576 629.249 575.807 628.703 575.807 628.003C575.807 627.289 575.562 626.722 575.072 626.302C574.582 625.882 573.931 625.672 573.119 625.672H569.969V630.229H573.203ZM591.282 620.611V632.182H588.888V630.817C588.51 631.293 588.013 631.671 587.397 631.951C586.795 632.217 586.151 632.35 585.465 632.35C584.555 632.35 583.736 632.161 583.008 631.783C582.294 631.405 581.727 630.845 581.307 630.103C580.901 629.361 580.698 628.465 580.698 627.415V620.611H583.071V627.058C583.071 628.094 583.33 628.892 583.848 629.452C584.366 629.998 585.073 630.271 585.969 630.271C586.865 630.271 587.572 629.998 588.09 629.452C588.622 628.892 588.888 628.094 588.888 627.058V620.611H591.282ZM597.233 622.564V628.969C597.233 629.403 597.331 629.718 597.527 629.914C597.737 630.096 598.087 630.187 598.577 630.187H600.047V632.182H598.157C597.079 632.182 596.253 631.93 595.679 631.426C595.105 630.922 594.818 630.103 594.818 628.969V622.564H593.453V620.611H594.818V617.734H597.233V620.611H600.047V622.564H597.233ZM605.047 622.564V628.969C605.047 629.403 605.145 629.718 605.341 629.914C605.551 630.096 605.901 630.187 606.391 630.187H607.861V632.182H605.971C604.893 632.182 604.067 631.93 603.493 631.426C602.919 630.922 602.632 630.103 602.632 628.969V622.564H601.267V620.611H602.632V617.734H605.047V620.611H607.861V622.564H605.047ZM615.086 632.371C613.994 632.371 613.007 632.126 612.125 631.636C611.243 631.132 610.55 630.432 610.046 629.536C609.542 628.626 609.29 627.576 609.29 626.386C609.29 625.21 609.549 624.167 610.067 623.257C610.585 622.347 611.292 621.647 612.188 621.157C613.084 620.667 614.085 620.422 615.191 620.422C616.297 620.422 617.298 620.667 618.194 621.157C619.09 621.647 619.797 622.347 620.315 623.257C620.833 624.167 621.092 625.21 621.092 626.386C621.092 627.562 620.826 628.605 620.294 629.515C619.762 630.425 619.034 631.132 618.11 631.636C617.2 632.126 616.192 632.371 615.086 632.371ZM615.086 630.292C615.702 630.292 616.276 630.145 616.808 629.851C617.354 629.557 617.795 629.116 618.131 628.528C618.467 627.94 618.635 627.226 618.635 626.386C618.635 625.546 618.474 624.839 618.152 624.265C617.83 623.677 617.403 623.236 616.871 622.942C616.339 622.648 615.765 622.501 615.149 622.501C614.533 622.501 613.959 622.648 613.427 622.942C612.909 623.236 612.496 623.677 612.188 624.265C611.88 624.839 611.726 625.546 611.726 626.386C611.726 627.632 612.041 628.598 612.671 629.284C613.315 629.956 614.12 630.292 615.086 630.292ZM629.297 620.422C630.207 620.422 631.019 620.611 631.733 620.989C632.461 621.367 633.028 621.927 633.434 622.669C633.84 623.411 634.043 624.307 634.043 625.357V632.182H631.67V625.714C631.67 624.678 631.411 623.887 630.893 623.341C630.375 622.781 629.668 622.501 628.772 622.501C627.876 622.501 627.162 622.781 626.63 623.341C626.112 623.887 625.853 624.678 625.853 625.714V632.182H623.459V620.611H625.853V621.934C626.245 621.458 626.742 621.087 627.344 620.821C627.96 620.555 628.611 620.422 629.297 620.422Z" fill="var(--color-inkInverse)"/>
+</g>
+<rect x="550" y="515.586" width="373.988" height="11.8024" rx="5.90119" fill="var(--color-illustrationInterface030)"/>
+<rect x="550" y="542.879" width="189.576" height="11.8024" rx="5.90119" fill="var(--color-illustrationInterface030)"/>
+<g clip-path="url(#clip4_3519_104123)">
+<rect width="69.0015" height="40" transform="translate(550 381)" fill="var(--color-illustrationInterface060)"/>
+<path d="M572.164 393.905V395.858H565.969V400.163H570.799V402.116H565.969V408.5H563.575V393.905H572.164ZM576.777 392.96V408.5H574.383V392.96H576.777ZM579.122 402.662C579.122 401.5 579.36 400.471 579.836 399.575C580.326 398.679 580.984 397.986 581.81 397.496C582.65 396.992 583.574 396.74 584.582 396.74C585.492 396.74 586.283 396.922 586.955 397.286C587.641 397.636 588.187 398.077 588.593 398.609V396.929H591.008V408.5H588.593V406.778C588.187 407.324 587.634 407.779 586.934 408.143C586.234 408.507 585.436 408.689 584.54 408.689C583.546 408.689 582.636 408.437 581.81 407.933C580.984 407.415 580.326 406.701 579.836 405.791C579.36 404.867 579.122 403.824 579.122 402.662ZM588.593 402.704C588.593 401.906 588.425 401.213 588.089 400.625C587.767 400.037 587.34 399.589 586.808 399.281C586.276 398.973 585.702 398.819 585.086 398.819C584.47 398.819 583.896 398.973 583.364 399.281C582.832 399.575 582.398 400.016 582.062 400.604C581.74 401.178 581.579 401.864 581.579 402.662C581.579 403.46 581.74 404.16 582.062 404.762C582.398 405.364 582.832 405.826 583.364 406.148C583.91 406.456 584.484 406.61 585.086 406.61C585.702 406.61 586.276 406.456 586.808 406.148C587.34 405.84 587.767 405.392 588.089 404.804C588.425 404.202 588.593 403.502 588.593 402.704ZM598.814 396.74C599.71 396.74 600.501 396.922 601.187 397.286C601.887 397.636 602.433 398.077 602.825 398.609V396.929H605.24V408.689C605.24 409.753 605.016 410.698 604.568 411.524C604.12 412.364 603.469 413.022 602.615 413.498C601.775 413.974 600.767 414.212 599.591 414.212C598.023 414.212 596.721 413.841 595.685 413.099C594.649 412.371 594.061 411.377 593.921 410.117H596.294C596.476 410.719 596.861 411.202 597.449 411.566C598.051 411.944 598.765 412.133 599.591 412.133C600.557 412.133 601.334 411.839 601.922 411.251C602.524 410.663 602.825 409.809 602.825 408.689V406.757C602.419 407.303 601.866 407.765 601.166 408.143C600.48 408.507 599.696 408.689 598.814 408.689C597.806 408.689 596.882 408.437 596.042 407.933C595.216 407.415 594.558 406.701 594.068 405.791C593.592 404.867 593.354 403.824 593.354 402.662C593.354 401.5 593.592 400.471 594.068 399.575C594.558 398.679 595.216 397.986 596.042 397.496C596.882 396.992 597.806 396.74 598.814 396.74ZM602.825 402.704C602.825 401.906 602.657 401.213 602.321 400.625C601.999 400.037 601.572 399.589 601.04 399.281C600.508 398.973 599.934 398.819 599.318 398.819C598.702 398.819 598.128 398.973 597.596 399.281C597.064 399.575 596.63 400.016 596.294 400.604C595.972 401.178 595.811 401.864 595.811 402.662C595.811 403.46 595.972 404.16 596.294 404.762C596.63 405.364 597.064 405.826 597.596 406.148C598.142 406.456 598.716 406.61 599.318 406.61C599.934 406.61 600.508 406.456 601.04 406.148C601.572 405.84 601.999 405.392 602.321 404.804C602.657 404.202 602.825 403.502 602.825 402.704Z" fill="var(--color-inkInverse)"/>
+</g>
+<path d="M576.8 450.92V479H569.96V467.44H559.32V479H552.48V450.92H559.32V461.92H569.96V450.92H576.8ZM602.778 467.48C602.778 468.12 602.738 468.787 602.658 469.48H587.178C587.284 470.867 587.724 471.933 588.498 472.68C589.298 473.4 590.271 473.76 591.418 473.76C593.124 473.76 594.311 473.04 594.978 471.6H602.258C601.884 473.067 601.204 474.387 600.218 475.56C599.258 476.733 598.044 477.653 596.578 478.32C595.111 478.987 593.471 479.32 591.658 479.32C589.471 479.32 587.524 478.853 585.818 477.92C584.111 476.987 582.778 475.653 581.818 473.92C580.858 472.187 580.378 470.16 580.378 467.84C580.378 465.52 580.844 463.493 581.778 461.76C582.738 460.027 584.071 458.693 585.778 457.76C587.484 456.827 589.444 456.36 591.658 456.36C593.818 456.36 595.738 456.813 597.418 457.72C599.098 458.627 600.404 459.92 601.338 461.6C602.298 463.28 602.778 465.24 602.778 467.48ZM595.778 465.68C595.778 464.507 595.378 463.573 594.578 462.88C593.778 462.187 592.778 461.84 591.578 461.84C590.431 461.84 589.458 462.173 588.658 462.84C587.884 463.507 587.404 464.453 587.218 465.68H595.778ZM605.026 467.8C605.026 465.507 605.453 463.493 606.306 461.76C607.186 460.027 608.373 458.693 609.866 457.76C611.36 456.827 613.026 456.36 614.866 456.36C616.44 456.36 617.813 456.68 618.986 457.32C620.186 457.96 621.106 458.8 621.746 459.84V456.68H628.586V479H621.746V475.84C621.08 476.88 620.146 477.72 618.946 478.36C617.773 479 616.4 479.32 614.826 479.32C613.013 479.32 611.36 478.853 609.866 477.92C608.373 476.96 607.186 475.613 606.306 473.88C605.453 472.12 605.026 470.093 605.026 467.8ZM621.746 467.84C621.746 466.133 621.266 464.787 620.306 463.8C619.373 462.813 618.226 462.32 616.866 462.32C615.506 462.32 614.346 462.813 613.386 463.8C612.453 464.76 611.986 466.093 611.986 467.8C611.986 469.507 612.453 470.867 613.386 471.88C614.346 472.867 615.506 473.36 616.866 473.36C618.226 473.36 619.373 472.867 620.306 471.88C621.266 470.893 621.746 469.547 621.746 467.84ZM632.175 467.8C632.175 465.507 632.601 463.493 633.455 461.76C634.335 460.027 635.521 458.693 637.015 457.76C638.508 456.827 640.175 456.36 642.015 456.36C643.481 456.36 644.815 456.667 646.015 457.28C647.241 457.893 648.201 458.72 648.895 459.76V449.4H655.735V479H648.895V475.8C648.255 476.867 647.335 477.72 646.135 478.36C644.961 479 643.588 479.32 642.015 479.32C640.175 479.32 638.508 478.853 637.015 477.92C635.521 476.96 634.335 475.613 633.455 473.88C632.601 472.12 632.175 470.093 632.175 467.8ZM648.895 467.84C648.895 466.133 648.415 464.787 647.455 463.8C646.521 462.813 645.375 462.32 644.015 462.32C642.655 462.32 641.495 462.813 640.535 463.8C639.601 464.76 639.135 466.093 639.135 467.8C639.135 469.507 639.601 470.867 640.535 471.88C641.495 472.867 642.655 473.36 644.015 473.36C645.375 473.36 646.521 472.867 647.455 471.88C648.415 470.893 648.895 469.547 648.895 467.84ZM664.123 454.36C662.923 454.36 661.936 454.013 661.163 453.32C660.416 452.6 660.043 451.72 660.043 450.68C660.043 449.613 660.416 448.733 661.163 448.04C661.936 447.32 662.923 446.96 664.123 446.96C665.296 446.96 666.256 447.32 667.003 448.04C667.776 448.733 668.163 449.613 668.163 450.68C668.163 451.72 667.776 452.6 667.003 453.32C666.256 454.013 665.296 454.36 664.123 454.36ZM667.523 456.68V479H660.683V456.68H667.523ZM686.08 456.44C688.693 456.44 690.773 457.293 692.32 459C693.893 460.68 694.68 463 694.68 465.96V479H687.88V466.88C687.88 465.387 687.493 464.227 686.72 463.4C685.947 462.573 684.907 462.16 683.6 462.16C682.293 462.16 681.253 462.573 680.48 463.4C679.707 464.227 679.32 465.387 679.32 466.88V479H672.48V456.68H679.32V459.64C680.013 458.653 680.947 457.88 682.12 457.32C683.293 456.733 684.613 456.44 686.08 456.44ZM707.913 456.36C709.486 456.36 710.86 456.68 712.033 457.32C713.233 457.96 714.153 458.8 714.793 459.84V456.68H721.633V478.96C721.633 481.013 721.22 482.867 720.393 484.52C719.593 486.2 718.353 487.533 716.673 488.52C715.02 489.507 712.953 490 710.473 490C707.166 490 704.486 489.213 702.433 487.64C700.38 486.093 699.206 483.987 698.913 481.32H705.673C705.886 482.173 706.393 482.84 707.193 483.32C707.993 483.827 708.98 484.08 710.153 484.08C711.566 484.08 712.686 483.667 713.513 482.84C714.366 482.04 714.793 480.747 714.793 478.96V475.8C714.126 476.84 713.206 477.693 712.033 478.36C710.86 479 709.486 479.32 707.913 479.32C706.073 479.32 704.406 478.853 702.913 477.92C701.42 476.96 700.233 475.613 699.353 473.88C698.5 472.12 698.073 470.093 698.073 467.8C698.073 465.507 698.5 463.493 699.353 461.76C700.233 460.027 701.42 458.693 702.913 457.76C704.406 456.827 706.073 456.36 707.913 456.36ZM714.793 467.84C714.793 466.133 714.313 464.787 713.353 463.8C712.42 462.813 711.273 462.32 709.913 462.32C708.553 462.32 707.393 462.813 706.433 463.8C705.5 464.76 705.033 466.093 705.033 467.8C705.033 469.507 705.5 470.867 706.433 471.88C707.393 472.867 708.553 473.36 709.913 473.36C711.273 473.36 712.42 472.867 713.353 471.88C714.313 470.893 714.793 469.547 714.793 467.84Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M550 144C550 137.373 555.373 132 562 132H928C934.627 132 940 137.373 940 144V329C940 335.627 934.627 341 928 341H562C555.373 341 550 335.627 550 329V144Z" fill="var(--color-illustrationInterface030)"/>
+<g clip-path="url(#clip5_3519_104123)">
+<rect x="550" y="594.682" width="102.002" height="60" rx="8" fill="var(--color-illustrationInterface060)"/>
+<path d="M575.387 624.685C576.171 624.825 576.836 625.238 577.382 625.924C577.928 626.61 578.201 627.387 578.201 628.255C578.201 628.997 578.005 629.669 577.613 630.271C577.235 630.859 576.682 631.328 575.954 631.678C575.226 632.014 574.379 632.182 573.413 632.182H567.575L567.575 617.587H573.14C574.134 617.587 574.988 617.755 575.702 618.091C576.416 618.427 576.955 618.882 577.319 619.456C577.683 620.016 577.865 620.646 577.865 621.346C577.865 622.186 577.641 622.886 577.193 623.446C576.745 624.006 576.143 624.419 575.387 624.685ZM569.969 623.719H572.93C573.714 623.719 574.323 623.544 574.757 623.194C575.205 622.83 575.429 622.312 575.429 621.64C575.429 620.982 575.205 620.471 574.757 620.107C574.323 619.729 573.714 619.54 572.93 619.54H569.969V623.719ZM573.203 630.229C574.015 630.229 574.652 630.033 575.114 629.641C575.576 629.249 575.807 628.703 575.807 628.003C575.807 627.289 575.562 626.722 575.072 626.302C574.582 625.882 573.931 625.672 573.119 625.672H569.969V630.229H573.203ZM591.282 620.611V632.182H588.888V630.817C588.51 631.293 588.013 631.671 587.397 631.951C586.795 632.217 586.151 632.35 585.465 632.35C584.555 632.35 583.736 632.161 583.008 631.783C582.294 631.405 581.727 630.845 581.307 630.103C580.901 629.361 580.698 628.465 580.698 627.415V620.611H583.071V627.058C583.071 628.094 583.33 628.892 583.848 629.452C584.366 629.998 585.073 630.271 585.969 630.271C586.865 630.271 587.572 629.998 588.09 629.452C588.622 628.892 588.888 628.094 588.888 627.058V620.611H591.282ZM597.233 622.564V628.969C597.233 629.403 597.331 629.718 597.527 629.914C597.737 630.096 598.087 630.187 598.577 630.187H600.047V632.182H598.157C597.079 632.182 596.253 631.93 595.679 631.426C595.105 630.922 594.818 630.103 594.818 628.969V622.564H593.453V620.611H594.818V617.734H597.233V620.611H600.047V622.564H597.233ZM605.047 622.564V628.969C605.047 629.403 605.145 629.718 605.341 629.914C605.551 630.096 605.901 630.187 606.391 630.187H607.861V632.182H605.971C604.893 632.182 604.067 631.93 603.493 631.426C602.919 630.922 602.632 630.103 602.632 628.969V622.564H601.267V620.611H602.632V617.734H605.047V620.611H607.861V622.564H605.047ZM615.086 632.371C613.994 632.371 613.007 632.126 612.125 631.636C611.243 631.132 610.55 630.432 610.046 629.536C609.542 628.626 609.29 627.576 609.29 626.386C609.29 625.21 609.549 624.167 610.067 623.257C610.585 622.347 611.292 621.647 612.188 621.157C613.084 620.667 614.085 620.422 615.191 620.422C616.297 620.422 617.298 620.667 618.194 621.157C619.09 621.647 619.797 622.347 620.315 623.257C620.833 624.167 621.092 625.21 621.092 626.386C621.092 627.562 620.826 628.605 620.294 629.515C619.762 630.425 619.034 631.132 618.11 631.636C617.2 632.126 616.192 632.371 615.086 632.371ZM615.086 630.292C615.702 630.292 616.276 630.145 616.808 629.851C617.354 629.557 617.795 629.116 618.131 628.528C618.467 627.94 618.635 627.226 618.635 626.386C618.635 625.546 618.474 624.839 618.152 624.265C617.83 623.677 617.403 623.236 616.871 622.942C616.339 622.648 615.765 622.501 615.149 622.501C614.533 622.501 613.959 622.648 613.427 622.942C612.909 623.236 612.496 623.677 612.188 624.265C611.88 624.839 611.726 625.546 611.726 626.386C611.726 627.632 612.041 628.598 612.671 629.284C613.315 629.956 614.12 630.292 615.086 630.292ZM629.297 620.422C630.207 620.422 631.019 620.611 631.733 620.989C632.461 621.367 633.028 621.927 633.434 622.669C633.84 623.411 634.043 624.307 634.043 625.357V632.182H631.67V625.714C631.67 624.678 631.411 623.887 630.893 623.341C630.375 622.781 629.668 622.501 628.772 622.501C627.876 622.501 627.162 622.781 626.63 623.341C626.112 623.887 625.853 624.678 625.853 625.714V632.182H623.459V620.611H625.853V621.934C626.245 621.458 626.742 621.087 627.344 620.821C627.96 620.555 628.611 620.422 629.297 620.422Z" fill="var(--color-inkInverse)"/>
+</g>
+<rect x="550" y="515.586" width="373.988" height="11.8024" rx="5.90119" fill="var(--color-illustrationInterface030)"/>
+<rect x="550" y="542.879" width="189.576" height="11.8024" rx="5.90119" fill="var(--color-illustrationInterface030)"/>
+<g clip-path="url(#clip6_3519_104123)">
+<rect width="69.0015" height="40" transform="translate(550 381)" fill="var(--color-illustrationInterface060)"/>
+<path d="M572.164 393.905V395.858H565.969V400.163H570.799V402.116H565.969V408.5H563.575V393.905H572.164ZM576.777 392.96V408.5H574.383V392.96H576.777ZM579.122 402.662C579.122 401.5 579.36 400.471 579.836 399.575C580.326 398.679 580.984 397.986 581.81 397.496C582.65 396.992 583.574 396.74 584.582 396.74C585.492 396.74 586.283 396.922 586.955 397.286C587.641 397.636 588.187 398.077 588.593 398.609V396.929H591.008V408.5H588.593V406.778C588.187 407.324 587.634 407.779 586.934 408.143C586.234 408.507 585.436 408.689 584.54 408.689C583.546 408.689 582.636 408.437 581.81 407.933C580.984 407.415 580.326 406.701 579.836 405.791C579.36 404.867 579.122 403.824 579.122 402.662ZM588.593 402.704C588.593 401.906 588.425 401.213 588.089 400.625C587.767 400.037 587.34 399.589 586.808 399.281C586.276 398.973 585.702 398.819 585.086 398.819C584.47 398.819 583.896 398.973 583.364 399.281C582.832 399.575 582.398 400.016 582.062 400.604C581.74 401.178 581.579 401.864 581.579 402.662C581.579 403.46 581.74 404.16 582.062 404.762C582.398 405.364 582.832 405.826 583.364 406.148C583.91 406.456 584.484 406.61 585.086 406.61C585.702 406.61 586.276 406.456 586.808 406.148C587.34 405.84 587.767 405.392 588.089 404.804C588.425 404.202 588.593 403.502 588.593 402.704ZM598.814 396.74C599.71 396.74 600.501 396.922 601.187 397.286C601.887 397.636 602.433 398.077 602.825 398.609V396.929H605.24V408.689C605.24 409.753 605.016 410.698 604.568 411.524C604.12 412.364 603.469 413.022 602.615 413.498C601.775 413.974 600.767 414.212 599.591 414.212C598.023 414.212 596.721 413.841 595.685 413.099C594.649 412.371 594.061 411.377 593.921 410.117H596.294C596.476 410.719 596.861 411.202 597.449 411.566C598.051 411.944 598.765 412.133 599.591 412.133C600.557 412.133 601.334 411.839 601.922 411.251C602.524 410.663 602.825 409.809 602.825 408.689V406.757C602.419 407.303 601.866 407.765 601.166 408.143C600.48 408.507 599.696 408.689 598.814 408.689C597.806 408.689 596.882 408.437 596.042 407.933C595.216 407.415 594.558 406.701 594.068 405.791C593.592 404.867 593.354 403.824 593.354 402.662C593.354 401.5 593.592 400.471 594.068 399.575C594.558 398.679 595.216 397.986 596.042 397.496C596.882 396.992 597.806 396.74 598.814 396.74ZM602.825 402.704C602.825 401.906 602.657 401.213 602.321 400.625C601.999 400.037 601.572 399.589 601.04 399.281C600.508 398.973 599.934 398.819 599.318 398.819C598.702 398.819 598.128 398.973 597.596 399.281C597.064 399.575 596.63 400.016 596.294 400.604C595.972 401.178 595.811 401.864 595.811 402.662C595.811 403.46 595.972 404.16 596.294 404.762C596.63 405.364 597.064 405.826 597.596 406.148C598.142 406.456 598.716 406.61 599.318 406.61C599.934 406.61 600.508 406.456 601.04 406.148C601.572 405.84 601.999 405.392 602.321 404.804C602.657 404.202 602.825 403.502 602.825 402.704Z" fill="var(--color-inkInverse)"/>
+</g>
+<path d="M576.8 450.92V479H569.96V467.44H559.32V479H552.48V450.92H559.32V461.92H569.96V450.92H576.8ZM602.778 467.48C602.778 468.12 602.738 468.787 602.658 469.48H587.178C587.284 470.867 587.724 471.933 588.498 472.68C589.298 473.4 590.271 473.76 591.418 473.76C593.124 473.76 594.311 473.04 594.978 471.6H602.258C601.884 473.067 601.204 474.387 600.218 475.56C599.258 476.733 598.044 477.653 596.578 478.32C595.111 478.987 593.471 479.32 591.658 479.32C589.471 479.32 587.524 478.853 585.818 477.92C584.111 476.987 582.778 475.653 581.818 473.92C580.858 472.187 580.378 470.16 580.378 467.84C580.378 465.52 580.844 463.493 581.778 461.76C582.738 460.027 584.071 458.693 585.778 457.76C587.484 456.827 589.444 456.36 591.658 456.36C593.818 456.36 595.738 456.813 597.418 457.72C599.098 458.627 600.404 459.92 601.338 461.6C602.298 463.28 602.778 465.24 602.778 467.48ZM595.778 465.68C595.778 464.507 595.378 463.573 594.578 462.88C593.778 462.187 592.778 461.84 591.578 461.84C590.431 461.84 589.458 462.173 588.658 462.84C587.884 463.507 587.404 464.453 587.218 465.68H595.778ZM605.026 467.8C605.026 465.507 605.453 463.493 606.306 461.76C607.186 460.027 608.373 458.693 609.866 457.76C611.36 456.827 613.026 456.36 614.866 456.36C616.44 456.36 617.813 456.68 618.986 457.32C620.186 457.96 621.106 458.8 621.746 459.84V456.68H628.586V479H621.746V475.84C621.08 476.88 620.146 477.72 618.946 478.36C617.773 479 616.4 479.32 614.826 479.32C613.013 479.32 611.36 478.853 609.866 477.92C608.373 476.96 607.186 475.613 606.306 473.88C605.453 472.12 605.026 470.093 605.026 467.8ZM621.746 467.84C621.746 466.133 621.266 464.787 620.306 463.8C619.373 462.813 618.226 462.32 616.866 462.32C615.506 462.32 614.346 462.813 613.386 463.8C612.453 464.76 611.986 466.093 611.986 467.8C611.986 469.507 612.453 470.867 613.386 471.88C614.346 472.867 615.506 473.36 616.866 473.36C618.226 473.36 619.373 472.867 620.306 471.88C621.266 470.893 621.746 469.547 621.746 467.84ZM632.175 467.8C632.175 465.507 632.601 463.493 633.455 461.76C634.335 460.027 635.521 458.693 637.015 457.76C638.508 456.827 640.175 456.36 642.015 456.36C643.481 456.36 644.815 456.667 646.015 457.28C647.241 457.893 648.201 458.72 648.895 459.76V449.4H655.735V479H648.895V475.8C648.255 476.867 647.335 477.72 646.135 478.36C644.961 479 643.588 479.32 642.015 479.32C640.175 479.32 638.508 478.853 637.015 477.92C635.521 476.96 634.335 475.613 633.455 473.88C632.601 472.12 632.175 470.093 632.175 467.8ZM648.895 467.84C648.895 466.133 648.415 464.787 647.455 463.8C646.521 462.813 645.375 462.32 644.015 462.32C642.655 462.32 641.495 462.813 640.535 463.8C639.601 464.76 639.135 466.093 639.135 467.8C639.135 469.507 639.601 470.867 640.535 471.88C641.495 472.867 642.655 473.36 644.015 473.36C645.375 473.36 646.521 472.867 647.455 471.88C648.415 470.893 648.895 469.547 648.895 467.84ZM664.123 454.36C662.923 454.36 661.936 454.013 661.163 453.32C660.416 452.6 660.043 451.72 660.043 450.68C660.043 449.613 660.416 448.733 661.163 448.04C661.936 447.32 662.923 446.96 664.123 446.96C665.296 446.96 666.256 447.32 667.003 448.04C667.776 448.733 668.163 449.613 668.163 450.68C668.163 451.72 667.776 452.6 667.003 453.32C666.256 454.013 665.296 454.36 664.123 454.36ZM667.523 456.68V479H660.683V456.68H667.523ZM686.08 456.44C688.693 456.44 690.773 457.293 692.32 459C693.893 460.68 694.68 463 694.68 465.96V479H687.88V466.88C687.88 465.387 687.493 464.227 686.72 463.4C685.947 462.573 684.907 462.16 683.6 462.16C682.293 462.16 681.253 462.573 680.48 463.4C679.707 464.227 679.32 465.387 679.32 466.88V479H672.48V456.68H679.32V459.64C680.013 458.653 680.947 457.88 682.12 457.32C683.293 456.733 684.613 456.44 686.08 456.44ZM707.913 456.36C709.486 456.36 710.86 456.68 712.033 457.32C713.233 457.96 714.153 458.8 714.793 459.84V456.68H721.633V478.96C721.633 481.013 721.22 482.867 720.393 484.52C719.593 486.2 718.353 487.533 716.673 488.52C715.02 489.507 712.953 490 710.473 490C707.166 490 704.486 489.213 702.433 487.64C700.38 486.093 699.206 483.987 698.913 481.32H705.673C705.886 482.173 706.393 482.84 707.193 483.32C707.993 483.827 708.98 484.08 710.153 484.08C711.566 484.08 712.686 483.667 713.513 482.84C714.366 482.04 714.793 480.747 714.793 478.96V475.8C714.126 476.84 713.206 477.693 712.033 478.36C710.86 479 709.486 479.32 707.913 479.32C706.073 479.32 704.406 478.853 702.913 477.92C701.42 476.96 700.233 475.613 699.353 473.88C698.5 472.12 698.073 470.093 698.073 467.8C698.073 465.507 698.5 463.493 699.353 461.76C700.233 460.027 701.42 458.693 702.913 457.76C704.406 456.827 706.073 456.36 707.913 456.36ZM714.793 467.84C714.793 466.133 714.313 464.787 713.353 463.8C712.42 462.813 711.273 462.32 709.913 462.32C708.553 462.32 707.393 462.813 706.433 463.8C705.5 464.76 705.033 466.093 705.033 467.8C705.033 469.507 705.5 470.867 706.433 471.88C707.393 472.867 708.553 473.36 709.913 473.36C711.273 473.36 712.42 472.867 713.353 471.88C714.313 470.893 714.793 469.547 714.793 467.84Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M1020 144C1020 137.373 1025.37 132 1032 132H1398C1404.63 132 1410 137.373 1410 144V329C1410 335.627 1404.63 341 1398 341H1032C1025.37 341 1020 335.627 1020 329V144Z" fill="var(--color-illustrationInterface030)"/>
+<g clip-path="url(#clip7_3519_104123)">
+<rect x="1020" y="594.682" width="102.002" height="60" rx="8" fill="var(--color-illustrationInterface060)"/>
+<path d="M1045.39 624.685C1046.17 624.825 1046.84 625.238 1047.38 625.924C1047.93 626.61 1048.2 627.387 1048.2 628.255C1048.2 628.997 1048 629.669 1047.61 630.271C1047.23 630.859 1046.68 631.328 1045.95 631.678C1045.23 632.014 1044.38 632.182 1043.41 632.182H1037.57V617.587H1043.14C1044.13 617.587 1044.99 617.755 1045.7 618.091C1046.42 618.427 1046.95 618.882 1047.32 619.456C1047.68 620.016 1047.86 620.646 1047.86 621.346C1047.86 622.186 1047.64 622.886 1047.19 623.446C1046.74 624.006 1046.14 624.419 1045.39 624.685ZM1039.97 623.719H1042.93C1043.71 623.719 1044.32 623.544 1044.76 623.194C1045.2 622.83 1045.43 622.312 1045.43 621.64C1045.43 620.982 1045.2 620.471 1044.76 620.107C1044.32 619.729 1043.71 619.54 1042.93 619.54H1039.97V623.719ZM1043.2 630.229C1044.01 630.229 1044.65 630.033 1045.11 629.641C1045.58 629.249 1045.81 628.703 1045.81 628.003C1045.81 627.289 1045.56 626.722 1045.07 626.302C1044.58 625.882 1043.93 625.672 1043.12 625.672H1039.97V630.229H1043.2ZM1061.28 620.611V632.182H1058.89V630.817C1058.51 631.293 1058.01 631.671 1057.4 631.951C1056.79 632.217 1056.15 632.35 1055.46 632.35C1054.55 632.35 1053.74 632.161 1053.01 631.783C1052.29 631.405 1051.73 630.845 1051.31 630.103C1050.9 629.361 1050.7 628.465 1050.7 627.415V620.611H1053.07V627.058C1053.07 628.094 1053.33 628.892 1053.85 629.452C1054.37 629.998 1055.07 630.271 1055.97 630.271C1056.86 630.271 1057.57 629.998 1058.09 629.452C1058.62 628.892 1058.89 628.094 1058.89 627.058V620.611H1061.28ZM1067.23 622.564V628.969C1067.23 629.403 1067.33 629.718 1067.53 629.914C1067.74 630.096 1068.09 630.187 1068.58 630.187H1070.05V632.182H1068.16C1067.08 632.182 1066.25 631.93 1065.68 631.426C1065.11 630.922 1064.82 630.103 1064.82 628.969V622.564H1063.45V620.611H1064.82V617.734H1067.23V620.611H1070.05V622.564H1067.23ZM1075.05 622.564V628.969C1075.05 629.403 1075.14 629.718 1075.34 629.914C1075.55 630.096 1075.9 630.187 1076.39 630.187H1077.86V632.182H1075.97C1074.89 632.182 1074.07 631.93 1073.49 631.426C1072.92 630.922 1072.63 630.103 1072.63 628.969V622.564H1071.27V620.611H1072.63V617.734H1075.05V620.611H1077.86V622.564H1075.05ZM1085.09 632.371C1083.99 632.371 1083.01 632.126 1082.13 631.636C1081.24 631.132 1080.55 630.432 1080.05 629.536C1079.54 628.626 1079.29 627.576 1079.29 626.386C1079.29 625.21 1079.55 624.167 1080.07 623.257C1080.59 622.347 1081.29 621.647 1082.19 621.157C1083.08 620.667 1084.09 620.422 1085.19 620.422C1086.3 620.422 1087.3 620.667 1088.19 621.157C1089.09 621.647 1089.8 622.347 1090.32 623.257C1090.83 624.167 1091.09 625.21 1091.09 626.386C1091.09 627.562 1090.83 628.605 1090.29 629.515C1089.76 630.425 1089.03 631.132 1088.11 631.636C1087.2 632.126 1086.19 632.371 1085.09 632.371ZM1085.09 630.292C1085.7 630.292 1086.28 630.145 1086.81 629.851C1087.35 629.557 1087.8 629.116 1088.13 628.528C1088.47 627.94 1088.64 627.226 1088.64 626.386C1088.64 625.546 1088.47 624.839 1088.15 624.265C1087.83 623.677 1087.4 623.236 1086.87 622.942C1086.34 622.648 1085.77 622.501 1085.15 622.501C1084.53 622.501 1083.96 622.648 1083.43 622.942C1082.91 623.236 1082.5 623.677 1082.19 624.265C1081.88 624.839 1081.73 625.546 1081.73 626.386C1081.73 627.632 1082.04 628.598 1082.67 629.284C1083.32 629.956 1084.12 630.292 1085.09 630.292ZM1099.3 620.422C1100.21 620.422 1101.02 620.611 1101.73 620.989C1102.46 621.367 1103.03 621.927 1103.43 622.669C1103.84 623.411 1104.04 624.307 1104.04 625.357V632.182H1101.67V625.714C1101.67 624.678 1101.41 623.887 1100.89 623.341C1100.37 622.781 1099.67 622.501 1098.77 622.501C1097.88 622.501 1097.16 622.781 1096.63 623.341C1096.11 623.887 1095.85 624.678 1095.85 625.714V632.182H1093.46V620.611H1095.85V621.934C1096.24 621.458 1096.74 621.087 1097.34 620.821C1097.96 620.555 1098.61 620.422 1099.3 620.422Z" fill="var(--color-inkInverse)"/>
+</g>
+<rect x="1020" y="515.586" width="373.988" height="11.8024" rx="5.90119" fill="var(--color-illustrationInterface030)"/>
+<rect x="1020" y="542.879" width="189.576" height="11.8024" rx="5.90119" fill="var(--color-illustrationInterface030)"/>
+<g clip-path="url(#clip8_3519_104123)">
+<rect width="69.0015" height="40" transform="translate(1020 381)" fill="var(--color-illustrationInterface060)"/>
+<path d="M1042.16 393.905V395.858H1035.97V400.163H1040.8V402.116H1035.97V408.5H1033.57V393.905H1042.16ZM1046.78 392.96V408.5H1044.38V392.96H1046.78ZM1049.12 402.662C1049.12 401.5 1049.36 400.471 1049.84 399.575C1050.33 398.679 1050.98 397.986 1051.81 397.496C1052.65 396.992 1053.57 396.74 1054.58 396.74C1055.49 396.74 1056.28 396.922 1056.95 397.286C1057.64 397.636 1058.19 398.077 1058.59 398.609V396.929H1061.01V408.5H1058.59V406.778C1058.19 407.324 1057.63 407.779 1056.93 408.143C1056.23 408.507 1055.44 408.689 1054.54 408.689C1053.55 408.689 1052.64 408.437 1051.81 407.933C1050.98 407.415 1050.33 406.701 1049.84 405.791C1049.36 404.867 1049.12 403.824 1049.12 402.662ZM1058.59 402.704C1058.59 401.906 1058.42 401.213 1058.09 400.625C1057.77 400.037 1057.34 399.589 1056.81 399.281C1056.28 398.973 1055.7 398.819 1055.09 398.819C1054.47 398.819 1053.9 398.973 1053.36 399.281C1052.83 399.575 1052.4 400.016 1052.06 400.604C1051.74 401.178 1051.58 401.864 1051.58 402.662C1051.58 403.46 1051.74 404.16 1052.06 404.762C1052.4 405.364 1052.83 405.826 1053.36 406.148C1053.91 406.456 1054.48 406.61 1055.09 406.61C1055.7 406.61 1056.28 406.456 1056.81 406.148C1057.34 405.84 1057.77 405.392 1058.09 404.804C1058.42 404.202 1058.59 403.502 1058.59 402.704ZM1068.81 396.74C1069.71 396.74 1070.5 396.922 1071.19 397.286C1071.89 397.636 1072.43 398.077 1072.83 398.609V396.929H1075.24V408.689C1075.24 409.753 1075.02 410.698 1074.57 411.524C1074.12 412.364 1073.47 413.022 1072.62 413.498C1071.78 413.974 1070.77 414.212 1069.59 414.212C1068.02 414.212 1066.72 413.841 1065.69 413.099C1064.65 412.371 1064.06 411.377 1063.92 410.117H1066.29C1066.48 410.719 1066.86 411.202 1067.45 411.566C1068.05 411.944 1068.77 412.133 1069.59 412.133C1070.56 412.133 1071.33 411.839 1071.92 411.251C1072.52 410.663 1072.83 409.809 1072.83 408.689V406.757C1072.42 407.303 1071.87 407.765 1071.17 408.143C1070.48 408.507 1069.7 408.689 1068.81 408.689C1067.81 408.689 1066.88 408.437 1066.04 407.933C1065.22 407.415 1064.56 406.701 1064.07 405.791C1063.59 404.867 1063.35 403.824 1063.35 402.662C1063.35 401.5 1063.59 400.471 1064.07 399.575C1064.56 398.679 1065.22 397.986 1066.04 397.496C1066.88 396.992 1067.81 396.74 1068.81 396.74ZM1072.83 402.704C1072.83 401.906 1072.66 401.213 1072.32 400.625C1072 400.037 1071.57 399.589 1071.04 399.281C1070.51 398.973 1069.93 398.819 1069.32 398.819C1068.7 398.819 1068.13 398.973 1067.6 399.281C1067.06 399.575 1066.63 400.016 1066.29 400.604C1065.97 401.178 1065.81 401.864 1065.81 402.662C1065.81 403.46 1065.97 404.16 1066.29 404.762C1066.63 405.364 1067.06 405.826 1067.6 406.148C1068.14 406.456 1068.72 406.61 1069.32 406.61C1069.93 406.61 1070.51 406.456 1071.04 406.148C1071.57 405.84 1072 405.392 1072.32 404.804C1072.66 404.202 1072.83 403.502 1072.83 402.704Z" fill="var(--color-inkInverse)"/>
+</g>
+<path d="M1046.8 450.92V479H1039.96V467.44H1029.32V479H1022.48V450.92H1029.32V461.92H1039.96V450.92H1046.8ZM1072.78 467.48C1072.78 468.12 1072.74 468.787 1072.66 469.48H1057.18C1057.28 470.867 1057.72 471.933 1058.5 472.68C1059.3 473.4 1060.27 473.76 1061.42 473.76C1063.12 473.76 1064.31 473.04 1064.98 471.6H1072.26C1071.88 473.067 1071.2 474.387 1070.22 475.56C1069.26 476.733 1068.04 477.653 1066.58 478.32C1065.11 478.987 1063.47 479.32 1061.66 479.32C1059.47 479.32 1057.52 478.853 1055.82 477.92C1054.11 476.987 1052.78 475.653 1051.82 473.92C1050.86 472.187 1050.38 470.16 1050.38 467.84C1050.38 465.52 1050.84 463.493 1051.78 461.76C1052.74 460.027 1054.07 458.693 1055.78 457.76C1057.48 456.827 1059.44 456.36 1061.66 456.36C1063.82 456.36 1065.74 456.813 1067.42 457.72C1069.1 458.627 1070.4 459.92 1071.34 461.6C1072.3 463.28 1072.78 465.24 1072.78 467.48ZM1065.78 465.68C1065.78 464.507 1065.38 463.573 1064.58 462.88C1063.78 462.187 1062.78 461.84 1061.58 461.84C1060.43 461.84 1059.46 462.173 1058.66 462.84C1057.88 463.507 1057.4 464.453 1057.22 465.68H1065.78ZM1075.03 467.8C1075.03 465.507 1075.45 463.493 1076.31 461.76C1077.19 460.027 1078.37 458.693 1079.87 457.76C1081.36 456.827 1083.03 456.36 1084.87 456.36C1086.44 456.36 1087.81 456.68 1088.99 457.32C1090.19 457.96 1091.11 458.8 1091.75 459.84V456.68H1098.59V479H1091.75V475.84C1091.08 476.88 1090.15 477.72 1088.95 478.36C1087.77 479 1086.4 479.32 1084.83 479.32C1083.01 479.32 1081.36 478.853 1079.87 477.92C1078.37 476.96 1077.19 475.613 1076.31 473.88C1075.45 472.12 1075.03 470.093 1075.03 467.8ZM1091.75 467.84C1091.75 466.133 1091.27 464.787 1090.31 463.8C1089.37 462.813 1088.23 462.32 1086.87 462.32C1085.51 462.32 1084.35 462.813 1083.39 463.8C1082.45 464.76 1081.99 466.093 1081.99 467.8C1081.99 469.507 1082.45 470.867 1083.39 471.88C1084.35 472.867 1085.51 473.36 1086.87 473.36C1088.23 473.36 1089.37 472.867 1090.31 471.88C1091.27 470.893 1091.75 469.547 1091.75 467.84ZM1102.17 467.8C1102.17 465.507 1102.6 463.493 1103.45 461.76C1104.33 460.027 1105.52 458.693 1107.01 457.76C1108.51 456.827 1110.17 456.36 1112.01 456.36C1113.48 456.36 1114.81 456.667 1116.01 457.28C1117.24 457.893 1118.2 458.72 1118.89 459.76V449.4H1125.73V479H1118.89V475.8C1118.25 476.867 1117.33 477.72 1116.13 478.36C1114.96 479 1113.59 479.32 1112.01 479.32C1110.17 479.32 1108.51 478.853 1107.01 477.92C1105.52 476.96 1104.33 475.613 1103.45 473.88C1102.6 472.12 1102.17 470.093 1102.17 467.8ZM1118.89 467.84C1118.89 466.133 1118.41 464.787 1117.45 463.8C1116.52 462.813 1115.37 462.32 1114.01 462.32C1112.65 462.32 1111.49 462.813 1110.53 463.8C1109.6 464.76 1109.13 466.093 1109.13 467.8C1109.13 469.507 1109.6 470.867 1110.53 471.88C1111.49 472.867 1112.65 473.36 1114.01 473.36C1115.37 473.36 1116.52 472.867 1117.45 471.88C1118.41 470.893 1118.89 469.547 1118.89 467.84ZM1134.12 454.36C1132.92 454.36 1131.94 454.013 1131.16 453.32C1130.42 452.6 1130.04 451.72 1130.04 450.68C1130.04 449.613 1130.42 448.733 1131.16 448.04C1131.94 447.32 1132.92 446.96 1134.12 446.96C1135.3 446.96 1136.26 447.32 1137 448.04C1137.78 448.733 1138.16 449.613 1138.16 450.68C1138.16 451.72 1137.78 452.6 1137 453.32C1136.26 454.013 1135.3 454.36 1134.12 454.36ZM1137.52 456.68V479H1130.68V456.68H1137.52ZM1156.08 456.44C1158.69 456.44 1160.77 457.293 1162.32 459C1163.89 460.68 1164.68 463 1164.68 465.96V479H1157.88V466.88C1157.88 465.387 1157.49 464.227 1156.72 463.4C1155.95 462.573 1154.91 462.16 1153.6 462.16C1152.29 462.16 1151.25 462.573 1150.48 463.4C1149.71 464.227 1149.32 465.387 1149.32 466.88V479H1142.48V456.68H1149.32V459.64C1150.01 458.653 1150.95 457.88 1152.12 457.32C1153.29 456.733 1154.61 456.44 1156.08 456.44ZM1177.91 456.36C1179.49 456.36 1180.86 456.68 1182.03 457.32C1183.23 457.96 1184.15 458.8 1184.79 459.84V456.68H1191.63V478.96C1191.63 481.013 1191.22 482.867 1190.39 484.52C1189.59 486.2 1188.35 487.533 1186.67 488.52C1185.02 489.507 1182.95 490 1180.47 490C1177.17 490 1174.49 489.213 1172.43 487.64C1170.38 486.093 1169.21 483.987 1168.91 481.32H1175.67C1175.89 482.173 1176.39 482.84 1177.19 483.32C1177.99 483.827 1178.98 484.08 1180.15 484.08C1181.57 484.08 1182.69 483.667 1183.51 482.84C1184.37 482.04 1184.79 480.747 1184.79 478.96V475.8C1184.13 476.84 1183.21 477.693 1182.03 478.36C1180.86 479 1179.49 479.32 1177.91 479.32C1176.07 479.32 1174.41 478.853 1172.91 477.92C1171.42 476.96 1170.23 475.613 1169.35 473.88C1168.5 472.12 1168.07 470.093 1168.07 467.8C1168.07 465.507 1168.5 463.493 1169.35 461.76C1170.23 460.027 1171.42 458.693 1172.91 457.76C1174.41 456.827 1176.07 456.36 1177.91 456.36ZM1184.79 467.84C1184.79 466.133 1184.31 464.787 1183.35 463.8C1182.42 462.813 1181.27 462.32 1179.91 462.32C1178.55 462.32 1177.39 462.813 1176.43 463.8C1175.5 464.76 1175.03 466.093 1175.03 467.8C1175.03 469.507 1175.5 470.867 1176.43 471.88C1177.39 472.867 1178.55 473.36 1179.91 473.36C1181.27 473.36 1182.42 472.867 1183.35 471.88C1184.31 470.893 1184.79 469.547 1184.79 467.84Z" fill="var(--color-illustrationInterface060)"/>
+</g>
+<defs>
+<clipPath id="clip0_3519_104123">
+<rect width="1490" height="838" fill="white"/>
+</clipPath>
+<clipPath id="clip1_3519_104123">
+<rect width="102.002" height="60" fill="white" transform="translate(80 594.682)"/>
+</clipPath>
+<clipPath id="clip2_3519_104123">
+<rect width="69.0015" height="40" fill="white" transform="translate(80 381)"/>
+</clipPath>
+<clipPath id="clip3_3519_104123">
+<rect width="102.002" height="60" fill="white" transform="translate(550 594.682)"/>
+</clipPath>
+<clipPath id="clip4_3519_104123">
+<rect width="69.0015" height="40" fill="white" transform="translate(550 381)"/>
+</clipPath>
+<clipPath id="clip5_3519_104123">
+<rect width="102.002" height="60" fill="white" transform="translate(550 594.682)"/>
+</clipPath>
+<clipPath id="clip6_3519_104123">
+<rect width="69.0015" height="40" fill="white" transform="translate(550 381)"/>
+</clipPath>
+<clipPath id="clip7_3519_104123">
+<rect width="102.002" height="60" fill="white" transform="translate(1020 594.682)"/>
+</clipPath>
+<clipPath id="clip8_3519_104123">
+<rect width="69.0015" height="40" fill="white" transform="translate(1020 381)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site/public/static/illustrations/components/card-composable/usage/do-3.svg b/site/public/static/illustrations/components/card-composable/usage/do-3.svg
new file mode 100644
index 0000000000..ce240d3584
--- /dev/null
+++ b/site/public/static/illustrations/components/card-composable/usage/do-3.svg
@@ -0,0 +1,51 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3519_104100)">
+<path d="M0 0H1490V838H0V0Z" fill="var(--color-illustrationBackground010)"/>
+<path d="M479 136C479 129.373 484.373 124 491 124H996C1002.63 124 1008 129.373 1008 136V396C1008 402.627 1002.63 408 996 408H491C484.373 408 479 402.627 479 396V136Z" fill="var(--color-illustrationInterface030)"/>
+<rect x="479" y="625" width="507" height="16" rx="8" fill="var(--color-illustrationInterface030)"/>
+<rect x="479" y="662" width="507" height="16" rx="8" fill="var(--color-illustrationInterface030)"/>
+<rect x="479" y="588" width="507" height="16" rx="8" fill="var(--color-illustrationInterface030)"/>
+<rect x="479" y="699" width="257" height="16" rx="8" fill="var(--color-illustrationInterface030)"/>
+<path d="M491.64 487.28C489.587 487.28 487.747 486.947 486.12 486.28C484.493 485.613 483.187 484.627 482.2 483.32C481.24 482.013 480.733 480.44 480.68 478.6H487.96C488.067 479.64 488.427 480.44 489.04 481C489.653 481.533 490.453 481.8 491.44 481.8C492.453 481.8 493.253 481.573 493.84 481.12C494.427 480.64 494.72 479.987 494.72 479.16C494.72 478.467 494.48 477.893 494 477.44C493.547 476.987 492.973 476.613 492.28 476.32C491.613 476.027 490.653 475.693 489.4 475.32C487.587 474.76 486.107 474.2 484.96 473.64C483.813 473.08 482.827 472.253 482 471.16C481.173 470.067 480.76 468.64 480.76 466.88C480.76 464.267 481.707 462.227 483.6 460.76C485.493 459.267 487.96 458.52 491 458.52C494.093 458.52 496.587 459.267 498.48 460.76C500.373 462.227 501.387 464.28 501.52 466.92H494.12C494.067 466.013 493.733 465.307 493.12 464.8C492.507 464.267 491.72 464 490.76 464C489.933 464 489.267 464.227 488.76 464.68C488.253 465.107 488 465.733 488 466.56C488 467.467 488.427 468.173 489.28 468.68C490.133 469.187 491.467 469.733 493.28 470.32C495.093 470.933 496.56 471.52 497.68 472.08C498.827 472.64 499.813 473.453 500.64 474.52C501.467 475.587 501.88 476.96 501.88 478.64C501.88 480.24 501.467 481.693 500.64 483C499.84 484.307 498.667 485.347 497.12 486.12C495.573 486.893 493.747 487.28 491.64 487.28Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M519.809 464.44C522.369 464.44 524.423 465.293 525.969 467C527.516 468.68 528.289 471 528.289 473.96V487H521.489V474.88C521.489 473.387 521.103 472.227 520.329 471.4C519.556 470.573 518.516 470.16 517.209 470.16C515.903 470.16 514.863 470.573 514.089 471.4C513.316 472.227 512.929 473.387 512.929 474.88V487H506.089V457.4H512.929V467.68C513.623 466.693 514.569 465.907 515.769 465.32C516.969 464.733 518.316 464.44 519.809 464.44Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M543.203 487.32C541.016 487.32 539.043 486.853 537.283 485.92C535.549 484.987 534.176 483.653 533.163 481.92C532.176 480.187 531.683 478.16 531.683 475.84C531.683 473.547 532.189 471.533 533.203 469.8C534.216 468.04 535.603 466.693 537.363 465.76C539.123 464.827 541.096 464.36 543.283 464.36C545.469 464.36 547.443 464.827 549.203 465.76C550.963 466.693 552.349 468.04 553.363 469.8C554.376 471.533 554.883 473.547 554.883 475.84C554.883 478.133 554.363 480.16 553.323 481.92C552.309 483.653 550.909 484.987 549.123 485.92C547.363 486.853 545.389 487.32 543.203 487.32ZM543.203 481.4C544.509 481.4 545.616 480.92 546.523 479.96C547.456 479 547.923 477.627 547.923 475.84C547.923 474.053 547.469 472.68 546.563 471.72C545.683 470.76 544.589 470.28 543.283 470.28C541.949 470.28 540.843 470.76 539.963 471.72C539.083 472.653 538.643 474.027 538.643 475.84C538.643 477.627 539.069 479 539.923 479.96C540.803 480.92 541.896 481.4 543.203 481.4Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M565.351 468.4C566.151 467.173 567.151 466.213 568.351 465.52C569.551 464.8 570.885 464.44 572.351 464.44V471.68H570.471C568.765 471.68 567.485 472.053 566.631 472.8C565.778 473.52 565.351 474.8 565.351 476.64V487H558.511V464.68H565.351V468.4Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M588.061 481.2V487H584.581C582.101 487 580.167 486.4 578.781 485.2C577.394 483.973 576.701 481.987 576.701 479.24V470.36H573.981V464.68H576.701V459.24H583.541V464.68H588.021V470.36H583.541V479.32C583.541 479.987 583.701 480.467 584.021 480.76C584.341 481.053 584.874 481.2 585.621 481.2H588.061Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M614.067 464.44C616.627 464.44 618.681 465.293 620.227 467C621.774 468.68 622.547 471 622.547 473.96V487H615.747V474.88C615.747 473.387 615.361 472.227 614.587 471.4C613.814 470.573 612.774 470.16 611.467 470.16C610.161 470.16 609.121 470.573 608.347 471.4C607.574 472.227 607.187 473.387 607.187 474.88V487H600.347V457.4H607.187V467.68C607.881 466.693 608.827 465.907 610.027 465.32C611.227 464.733 612.574 464.44 614.067 464.44Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M648.34 475.48C648.34 476.12 648.3 476.787 648.22 477.48H632.74C632.847 478.867 633.287 479.933 634.06 480.68C634.86 481.4 635.834 481.76 636.98 481.76C638.687 481.76 639.874 481.04 640.54 479.6H647.82C647.447 481.067 646.767 482.387 645.78 483.56C644.82 484.733 643.607 485.653 642.14 486.32C640.674 486.987 639.034 487.32 637.22 487.32C635.034 487.32 633.087 486.853 631.38 485.92C629.674 484.987 628.34 483.653 627.38 481.92C626.42 480.187 625.94 478.16 625.94 475.84C625.94 473.52 626.407 471.493 627.34 469.76C628.3 468.027 629.634 466.693 631.34 465.76C633.047 464.827 635.007 464.36 637.22 464.36C639.38 464.36 641.3 464.813 642.98 465.72C644.66 466.627 645.967 467.92 646.9 469.6C647.86 471.28 648.34 473.24 648.34 475.48ZM641.34 473.68C641.34 472.507 640.94 471.573 640.14 470.88C639.34 470.187 638.34 469.84 637.14 469.84C635.994 469.84 635.02 470.173 634.22 470.84C633.447 471.507 632.967 472.453 632.78 473.68H641.34Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M650.589 475.8C650.589 473.507 651.016 471.493 651.869 469.76C652.749 468.027 653.935 466.693 655.429 465.76C656.922 464.827 658.589 464.36 660.429 464.36C662.002 464.36 663.376 464.68 664.549 465.32C665.749 465.96 666.669 466.8 667.309 467.84V464.68H674.149V487H667.309V483.84C666.642 484.88 665.709 485.72 664.509 486.36C663.336 487 661.962 487.32 660.389 487.32C658.576 487.32 656.922 486.853 655.429 485.92C653.935 484.96 652.749 483.613 651.869 481.88C651.016 480.12 650.589 478.093 650.589 475.8ZM667.309 475.84C667.309 474.133 666.829 472.787 665.869 471.8C664.936 470.813 663.789 470.32 662.429 470.32C661.069 470.32 659.909 470.813 658.949 471.8C658.016 472.76 657.549 474.093 657.549 475.8C657.549 477.507 658.016 478.867 658.949 479.88C659.909 480.867 661.069 481.36 662.429 481.36C663.789 481.36 664.936 480.867 665.869 479.88C666.829 478.893 667.309 477.547 667.309 475.84Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M677.737 475.8C677.737 473.507 678.164 471.493 679.017 469.76C679.897 468.027 681.084 466.693 682.577 465.76C684.071 464.827 685.737 464.36 687.577 464.36C689.044 464.36 690.377 464.667 691.577 465.28C692.804 465.893 693.764 466.72 694.457 467.76V457.4H701.297V487H694.457V483.8C693.817 484.867 692.897 485.72 691.697 486.36C690.524 487 689.151 487.32 687.577 487.32C685.737 487.32 684.071 486.853 682.577 485.92C681.084 484.96 679.897 483.613 679.017 481.88C678.164 480.12 677.737 478.093 677.737 475.8ZM694.457 475.84C694.457 474.133 693.977 472.787 693.017 471.8C692.084 470.813 690.937 470.32 689.577 470.32C688.217 470.32 687.057 470.813 686.097 471.8C685.164 472.76 684.697 474.093 684.697 475.8C684.697 477.507 685.164 478.867 686.097 479.88C687.057 480.867 688.217 481.36 689.577 481.36C690.937 481.36 692.084 480.867 693.017 479.88C693.977 478.893 694.457 477.547 694.457 475.84Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M709.686 462.36C708.486 462.36 707.499 462.013 706.726 461.32C705.979 460.6 705.606 459.72 705.606 458.68C705.606 457.613 705.979 456.733 706.726 456.04C707.499 455.32 708.486 454.96 709.686 454.96C710.859 454.96 711.819 455.32 712.566 456.04C713.339 456.733 713.726 457.613 713.726 458.68C713.726 459.72 713.339 460.6 712.566 461.32C711.819 462.013 710.859 462.36 709.686 462.36ZM713.086 464.68V487H706.246V464.68H713.086Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M731.643 464.44C734.256 464.44 736.336 465.293 737.883 467C739.456 468.68 740.243 471 740.243 473.96V487H733.443V474.88C733.443 473.387 733.056 472.227 732.283 471.4C731.509 470.573 730.469 470.16 729.163 470.16C727.856 470.16 726.816 470.573 726.043 471.4C725.269 472.227 724.883 473.387 724.883 474.88V487H718.043V464.68H724.883V467.64C725.576 466.653 726.509 465.88 727.683 465.32C728.856 464.733 730.176 464.44 731.643 464.44Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M753.476 464.36C755.049 464.36 756.422 464.68 757.596 465.32C758.796 465.96 759.716 466.8 760.356 467.84V464.68H767.196V486.96C767.196 489.013 766.782 490.867 765.956 492.52C765.156 494.2 763.916 495.533 762.236 496.52C760.582 497.507 758.516 498 756.036 498C752.729 498 750.049 497.213 747.996 495.64C745.942 494.093 744.769 491.987 744.476 489.32H751.236C751.449 490.173 751.956 490.84 752.756 491.32C753.556 491.827 754.542 492.08 755.716 492.08C757.129 492.08 758.249 491.667 759.076 490.84C759.929 490.04 760.356 488.747 760.356 486.96V483.8C759.689 484.84 758.769 485.693 757.596 486.36C756.422 487 755.049 487.32 753.476 487.32C751.636 487.32 749.969 486.853 748.476 485.92C746.982 484.96 745.796 483.613 744.916 481.88C744.062 480.12 743.636 478.093 743.636 475.8C743.636 473.507 744.062 471.493 744.916 469.76C745.796 468.027 746.982 466.693 748.476 465.76C749.969 464.827 751.636 464.36 753.476 464.36ZM760.356 475.84C760.356 474.133 759.876 472.787 758.916 471.8C757.982 470.813 756.836 470.32 755.476 470.32C754.116 470.32 752.956 470.813 751.996 471.8C751.062 472.76 750.596 474.093 750.596 475.8C750.596 477.507 751.062 478.867 751.996 479.88C752.956 480.867 754.116 481.36 755.476 481.36C756.836 481.36 757.982 480.867 758.916 479.88C759.876 478.893 760.356 477.547 760.356 475.84Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M779.261 475.8C779.261 473.507 779.687 471.493 780.541 469.76C781.421 468.027 782.607 466.693 784.101 465.76C785.594 464.827 787.261 464.36 789.101 464.36C790.567 464.36 791.901 464.667 793.101 465.28C794.327 465.893 795.287 466.72 795.981 467.76V457.4H802.821V487H795.981V483.8C795.341 484.867 794.421 485.72 793.221 486.36C792.047 487 790.674 487.32 789.101 487.32C787.261 487.32 785.594 486.853 784.101 485.92C782.607 484.96 781.421 483.613 780.541 481.88C779.687 480.12 779.261 478.093 779.261 475.8ZM795.981 475.84C795.981 474.133 795.501 472.787 794.541 471.8C793.607 470.813 792.461 470.32 791.101 470.32C789.741 470.32 788.581 470.813 787.621 471.8C786.687 472.76 786.221 474.093 786.221 475.8C786.221 477.507 786.687 478.867 787.621 479.88C788.581 480.867 789.741 481.36 791.101 481.36C792.461 481.36 793.607 480.867 794.541 479.88C795.501 478.893 795.981 477.547 795.981 475.84Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M828.809 475.48C828.809 476.12 828.769 476.787 828.689 477.48H813.209C813.316 478.867 813.756 479.933 814.529 480.68C815.329 481.4 816.302 481.76 817.449 481.76C819.156 481.76 820.342 481.04 821.009 479.6H828.289C827.916 481.067 827.236 482.387 826.249 483.56C825.289 484.733 824.076 485.653 822.609 486.32C821.142 486.987 819.502 487.32 817.689 487.32C815.502 487.32 813.556 486.853 811.849 485.92C810.142 484.987 808.809 483.653 807.849 481.92C806.889 480.187 806.409 478.16 806.409 475.84C806.409 473.52 806.876 471.493 807.809 469.76C808.769 468.027 810.102 466.693 811.809 465.76C813.516 464.827 815.476 464.36 817.689 464.36C819.849 464.36 821.769 464.813 823.449 465.72C825.129 466.627 826.436 467.92 827.369 469.6C828.329 471.28 828.809 473.24 828.809 475.48ZM821.809 473.68C821.809 472.507 821.409 471.573 820.609 470.88C819.809 470.187 818.809 469.84 817.609 469.84C816.462 469.84 815.489 470.173 814.689 470.84C813.916 471.507 813.436 472.453 813.249 473.68H821.809Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M841.498 487.32C839.551 487.32 837.818 486.987 836.298 486.32C834.778 485.653 833.578 484.747 832.698 483.6C831.818 482.427 831.324 481.12 831.218 479.68H837.978C838.058 480.453 838.418 481.08 839.058 481.56C839.698 482.04 840.484 482.28 841.418 482.28C842.271 482.28 842.924 482.12 843.378 481.8C843.858 481.453 844.098 481.013 844.098 480.48C844.098 479.84 843.764 479.373 843.098 479.08C842.431 478.76 841.351 478.413 839.858 478.04C838.258 477.667 836.924 477.28 835.858 476.88C834.791 476.453 833.871 475.8 833.098 474.92C832.324 474.013 831.938 472.8 831.938 471.28C831.938 470 832.284 468.84 832.978 467.8C833.698 466.733 834.738 465.893 836.098 465.28C837.484 464.667 839.124 464.36 841.018 464.36C843.818 464.36 846.018 465.053 847.618 466.44C849.244 467.827 850.178 469.667 850.418 471.96H844.098C843.991 471.187 843.644 470.573 843.058 470.12C842.498 469.667 841.751 469.44 840.818 469.44C840.018 469.44 839.404 469.6 838.978 469.92C838.551 470.213 838.338 470.627 838.338 471.16C838.338 471.8 838.671 472.28 839.338 472.6C840.031 472.92 841.098 473.24 842.538 473.56C844.191 473.987 845.538 474.413 846.578 474.84C847.618 475.24 848.524 475.907 849.298 476.84C850.098 477.747 850.511 478.973 850.538 480.52C850.538 481.827 850.164 483 849.418 484.04C848.698 485.053 847.644 485.853 846.258 486.44C844.898 487.027 843.311 487.32 841.498 487.32Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M853.362 475.84C853.362 473.52 853.829 471.493 854.762 469.76C855.722 468.027 857.042 466.693 858.722 465.76C860.429 464.827 862.376 464.36 864.562 464.36C867.362 464.36 869.696 465.093 871.562 466.56C873.456 468.027 874.696 470.093 875.282 472.76H868.002C867.389 471.053 866.202 470.2 864.442 470.2C863.189 470.2 862.189 470.693 861.442 471.68C860.696 472.64 860.322 474.027 860.322 475.84C860.322 477.653 860.696 479.053 861.442 480.04C862.189 481 863.189 481.48 864.442 481.48C866.202 481.48 867.389 480.627 868.002 478.92H875.282C874.696 481.533 873.456 483.587 871.562 485.08C869.669 486.573 867.336 487.32 864.562 487.32C862.376 487.32 860.429 486.853 858.722 485.92C857.042 484.987 855.722 483.653 854.762 481.92C853.829 480.187 853.362 478.16 853.362 475.84Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M885.781 468.4C886.581 467.173 887.581 466.213 888.781 465.52C889.981 464.8 891.314 464.44 892.781 464.44V471.68H890.901C889.194 471.68 887.914 472.053 887.061 472.8C886.208 473.52 885.781 474.8 885.781 476.64V487H878.941V464.68H885.781V468.4Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M899.49 462.36C898.29 462.36 897.304 462.013 896.53 461.32C895.784 460.6 895.41 459.72 895.41 458.68C895.41 457.613 895.784 456.733 896.53 456.04C897.304 455.32 898.29 454.96 899.49 454.96C900.664 454.96 901.624 455.32 902.37 456.04C903.144 456.733 903.53 457.613 903.53 458.68C903.53 459.72 903.144 460.6 902.37 461.32C901.624 462.013 900.664 462.36 899.49 462.36ZM902.89 464.68V487H896.05V464.68H902.89Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M914.687 467.84C915.327 466.8 916.247 465.96 917.447 465.32C918.647 464.68 920.021 464.36 921.567 464.36C923.407 464.36 925.074 464.827 926.567 465.76C928.061 466.693 929.234 468.027 930.087 469.76C930.967 471.493 931.407 473.507 931.407 475.8C931.407 478.093 930.967 480.12 930.087 481.88C929.234 483.613 928.061 484.96 926.567 485.92C925.074 486.853 923.407 487.32 921.567 487.32C919.994 487.32 918.621 487.013 917.447 486.4C916.274 485.76 915.354 484.92 914.687 483.88V487H907.847V457.4H914.687V467.84ZM924.447 475.8C924.447 474.093 923.967 472.76 923.007 471.8C922.074 470.813 920.914 470.32 919.527 470.32C918.167 470.32 917.007 470.813 916.047 471.8C915.114 472.787 914.647 474.133 914.647 475.84C914.647 477.547 915.114 478.893 916.047 479.88C917.007 480.867 918.167 481.36 919.527 481.36C920.887 481.36 922.047 480.867 923.007 479.88C923.967 478.867 924.447 477.507 924.447 475.8Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M938.436 462.36C937.236 462.36 936.249 462.013 935.476 461.32C934.729 460.6 934.356 459.72 934.356 458.68C934.356 457.613 934.729 456.733 935.476 456.04C936.249 455.32 937.236 454.96 938.436 454.96C939.609 454.96 940.569 455.32 941.316 456.04C942.089 456.733 942.476 457.613 942.476 458.68C942.476 459.72 942.089 460.6 941.316 461.32C940.569 462.013 939.609 462.36 938.436 462.36ZM941.836 464.68V487H934.996V464.68H941.836Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M960.393 464.44C963.006 464.44 965.086 465.293 966.633 467C968.206 468.68 968.993 471 968.993 473.96V487H962.193V474.88C962.193 473.387 961.806 472.227 961.033 471.4C960.259 470.573 959.219 470.16 957.913 470.16C956.606 470.16 955.566 470.573 954.793 471.4C954.019 472.227 953.633 473.387 953.633 474.88V487H946.793V464.68H953.633V467.64C954.326 466.653 955.259 465.88 956.433 465.32C957.606 464.733 958.926 464.44 960.393 464.44Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M982.226 464.36C983.799 464.36 985.172 464.68 986.346 465.32C987.546 465.96 988.466 466.8 989.106 467.84V464.68H995.946V486.96C995.946 489.013 995.532 490.867 994.706 492.52C993.906 494.2 992.666 495.533 990.986 496.52C989.332 497.507 987.266 498 984.786 498C981.479 498 978.799 497.213 976.746 495.64C974.692 494.093 973.519 491.987 973.226 489.32H979.986C980.199 490.173 980.706 490.84 981.506 491.32C982.306 491.827 983.292 492.08 984.466 492.08C985.879 492.08 986.999 491.667 987.826 490.84C988.679 490.04 989.106 488.747 989.106 486.96V483.8C988.439 484.84 987.519 485.693 986.346 486.36C985.172 487 983.799 487.32 982.226 487.32C980.386 487.32 978.719 486.853 977.226 485.92C975.732 484.96 974.546 483.613 973.666 481.88C972.812 480.12 972.386 478.093 972.386 475.8C972.386 473.507 972.812 471.493 973.666 469.76C974.546 468.027 975.732 466.693 977.226 465.76C978.719 464.827 980.386 464.36 982.226 464.36ZM989.106 475.84C989.106 474.133 988.626 472.787 987.666 471.8C986.732 470.813 985.586 470.32 984.226 470.32C982.866 470.32 981.706 470.813 980.746 471.8C979.812 472.76 979.346 474.093 979.346 475.8C979.346 477.507 979.812 478.867 980.746 479.88C981.706 480.867 982.866 481.36 984.226 481.36C985.586 481.36 986.732 480.867 987.666 479.88C988.626 478.893 989.106 477.547 989.106 475.84Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M493.92 531.2V537H490.44C487.96 537 486.027 536.4 484.64 535.2C483.253 533.973 482.56 531.987 482.56 529.24V520.36H479.84V514.68H482.56V509.24H489.4V514.68H493.88V520.36H489.4V529.32C489.4 529.987 489.56 530.467 489.88 530.76C490.2 531.053 490.733 531.2 491.48 531.2H493.92Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M511.45 514.44C514.01 514.44 516.063 515.293 517.61 517C519.157 518.68 519.93 521 519.93 523.96V537H513.13V524.88C513.13 523.387 512.743 522.227 511.97 521.4C511.197 520.573 510.157 520.16 508.85 520.16C507.543 520.16 506.503 520.573 505.73 521.4C504.957 522.227 504.57 523.387 504.57 524.88V537H497.73V507.4H504.57V517.68C505.263 516.693 506.21 515.907 507.41 515.32C508.61 514.733 509.957 514.44 511.45 514.44Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M545.723 525.48C545.723 526.12 545.683 526.787 545.603 527.48H530.123C530.23 528.867 530.67 529.933 531.443 530.68C532.243 531.4 533.217 531.76 534.363 531.76C536.07 531.76 537.257 531.04 537.923 529.6H545.203C544.83 531.067 544.15 532.387 543.163 533.56C542.203 534.733 540.99 535.653 539.523 536.32C538.057 536.987 536.417 537.32 534.603 537.32C532.417 537.32 530.47 536.853 528.763 535.92C527.057 534.987 525.723 533.653 524.763 531.92C523.803 530.187 523.323 528.16 523.323 525.84C523.323 523.52 523.79 521.493 524.723 519.76C525.683 518.027 527.017 516.693 528.723 515.76C530.43 514.827 532.39 514.36 534.603 514.36C536.763 514.36 538.683 514.813 540.363 515.72C542.043 516.627 543.35 517.92 544.283 519.6C545.243 521.28 545.723 523.24 545.723 525.48ZM538.723 523.68C538.723 522.507 538.323 521.573 537.523 520.88C536.723 520.187 535.723 519.84 534.523 519.84C533.377 519.84 532.403 520.173 531.603 520.84C530.83 521.507 530.35 522.453 530.163 523.68H538.723Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M586.288 514.44C589.062 514.44 591.262 515.28 592.888 516.96C594.542 518.64 595.368 520.973 595.368 523.96V537H588.568V524.88C588.568 523.44 588.182 522.333 587.408 521.56C586.662 520.76 585.622 520.36 584.288 520.36C582.955 520.36 581.902 520.76 581.128 521.56C580.382 522.333 580.008 523.44 580.008 524.88V537H573.208V524.88C573.208 523.44 572.822 522.333 572.048 521.56C571.302 520.76 570.262 520.36 568.928 520.36C567.595 520.36 566.542 520.76 565.768 521.56C565.022 522.333 564.648 523.44 564.648 524.88V537H557.808V514.68H564.648V517.48C565.342 516.547 566.248 515.813 567.368 515.28C568.488 514.72 569.755 514.44 571.168 514.44C572.848 514.44 574.342 514.8 575.648 515.52C576.982 516.24 578.022 517.267 578.768 518.6C579.542 517.373 580.595 516.373 581.928 515.6C583.262 514.827 584.715 514.44 586.288 514.44Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M598.792 525.8C598.792 523.507 599.219 521.493 600.072 519.76C600.952 518.027 602.139 516.693 603.632 515.76C605.125 514.827 606.792 514.36 608.632 514.36C610.205 514.36 611.579 514.68 612.752 515.32C613.952 515.96 614.872 516.8 615.512 517.84V514.68H622.352V537H615.512V533.84C614.845 534.88 613.912 535.72 612.712 536.36C611.539 537 610.165 537.32 608.592 537.32C606.779 537.32 605.125 536.853 603.632 535.92C602.139 534.96 600.952 533.613 600.072 531.88C599.219 530.12 598.792 528.093 598.792 525.8ZM615.512 525.84C615.512 524.133 615.032 522.787 614.072 521.8C613.139 520.813 611.992 520.32 610.632 520.32C609.272 520.32 608.112 520.813 607.152 521.8C606.219 522.76 605.752 524.093 605.752 525.8C605.752 527.507 606.219 528.867 607.152 529.88C608.112 530.867 609.272 531.36 610.632 531.36C611.992 531.36 613.139 530.867 614.072 529.88C615.032 528.893 615.512 527.547 615.512 525.84Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M630.74 512.36C629.54 512.36 628.554 512.013 627.78 511.32C627.034 510.6 626.66 509.72 626.66 508.68C626.66 507.613 627.034 506.733 627.78 506.04C628.554 505.32 629.54 504.96 630.74 504.96C631.914 504.96 632.874 505.32 633.62 506.04C634.394 506.733 634.78 507.613 634.78 508.68C634.78 509.72 634.394 510.6 633.62 511.32C632.874 512.013 631.914 512.36 630.74 512.36ZM634.14 514.68V537H627.3V514.68H634.14Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M652.697 514.44C655.311 514.44 657.391 515.293 658.937 517C660.511 518.68 661.297 521 661.297 523.96V537H654.497V524.88C654.497 523.387 654.111 522.227 653.337 521.4C652.564 520.573 651.524 520.16 650.217 520.16C648.911 520.16 647.871 520.573 647.097 521.4C646.324 522.227 645.937 523.387 645.937 524.88V537H639.097V514.68H645.937V517.64C646.631 516.653 647.564 515.88 648.737 515.32C649.911 514.733 651.231 514.44 652.697 514.44Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M673.167 525.84C673.167 523.52 673.634 521.493 674.567 519.76C675.527 518.027 676.847 516.693 678.527 515.76C680.234 514.827 682.18 514.36 684.367 514.36C687.167 514.36 689.5 515.093 691.367 516.56C693.26 518.027 694.5 520.093 695.087 522.76H687.807C687.194 521.053 686.007 520.2 684.247 520.2C682.994 520.2 681.994 520.693 681.247 521.68C680.5 522.64 680.127 524.027 680.127 525.84C680.127 527.653 680.5 529.053 681.247 530.04C681.994 531 682.994 531.48 684.247 531.48C686.007 531.48 687.194 530.627 687.807 528.92H695.087C694.5 531.533 693.26 533.587 691.367 535.08C689.474 536.573 687.14 537.32 684.367 537.32C682.18 537.32 680.234 536.853 678.527 535.92C676.847 534.987 675.527 533.653 674.567 531.92C673.634 530.187 673.167 528.16 673.167 525.84Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M708.906 537.32C706.719 537.32 704.746 536.853 702.986 535.92C701.252 534.987 699.879 533.653 698.866 531.92C697.879 530.187 697.386 528.16 697.386 525.84C697.386 523.547 697.892 521.533 698.906 519.8C699.919 518.04 701.306 516.693 703.066 515.76C704.826 514.827 706.799 514.36 708.986 514.36C711.172 514.36 713.146 514.827 714.906 515.76C716.666 516.693 718.052 518.04 719.066 519.8C720.079 521.533 720.586 523.547 720.586 525.84C720.586 528.133 720.066 530.16 719.026 531.92C718.012 533.653 716.612 534.987 714.826 535.92C713.066 536.853 711.092 537.32 708.906 537.32ZM708.906 531.4C710.212 531.4 711.319 530.92 712.226 529.96C713.159 529 713.626 527.627 713.626 525.84C713.626 524.053 713.172 522.68 712.266 521.72C711.386 520.76 710.292 520.28 708.986 520.28C707.652 520.28 706.546 520.76 705.666 521.72C704.786 522.653 704.346 524.027 704.346 525.84C704.346 527.627 704.772 529 705.626 529.96C706.506 530.92 707.599 531.4 708.906 531.4Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M737.814 514.44C740.428 514.44 742.508 515.293 744.054 517C745.628 518.68 746.414 521 746.414 523.96V537H739.614V524.88C739.614 523.387 739.228 522.227 738.454 521.4C737.681 520.573 736.641 520.16 735.334 520.16C734.028 520.16 732.988 520.573 732.214 521.4C731.441 522.227 731.054 523.387 731.054 524.88V537H724.214V514.68H731.054V517.64C731.748 516.653 732.681 515.88 733.854 515.32C735.028 514.733 736.348 514.44 737.814 514.44Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M763.608 531.2V537H760.128C757.648 537 755.714 536.4 754.328 535.2C752.941 533.973 752.248 531.987 752.248 529.24V520.36H749.528V514.68H752.248V509.24H759.088V514.68H763.568V520.36H759.088V529.32C759.088 529.987 759.248 530.467 759.568 530.76C759.888 531.053 760.421 531.2 761.168 531.2H763.608Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M788.458 525.48C788.458 526.12 788.418 526.787 788.338 527.48H772.858C772.964 528.867 773.404 529.933 774.178 530.68C774.978 531.4 775.951 531.76 777.098 531.76C778.804 531.76 779.991 531.04 780.658 529.6H787.938C787.564 531.067 786.884 532.387 785.898 533.56C784.938 534.733 783.724 535.653 782.258 536.32C780.791 536.987 779.151 537.32 777.338 537.32C775.151 537.32 773.204 536.853 771.498 535.92C769.791 534.987 768.458 533.653 767.498 531.92C766.538 530.187 766.058 528.16 766.058 525.84C766.058 523.52 766.524 521.493 767.458 519.76C768.418 518.027 769.751 516.693 771.458 515.76C773.164 514.827 775.124 514.36 777.338 514.36C779.498 514.36 781.418 514.813 783.098 515.72C784.778 516.627 786.084 517.92 787.018 519.6C787.978 521.28 788.458 523.24 788.458 525.48ZM781.458 523.68C781.458 522.507 781.058 521.573 780.258 520.88C779.458 520.187 778.458 519.84 777.258 519.84C776.111 519.84 775.138 520.173 774.338 520.84C773.564 521.507 773.084 522.453 772.898 523.68H781.458Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M805.666 514.44C808.279 514.44 810.359 515.293 811.906 517C813.479 518.68 814.266 521 814.266 523.96V537H807.466V524.88C807.466 523.387 807.079 522.227 806.306 521.4C805.533 520.573 804.493 520.16 803.186 520.16C801.879 520.16 800.839 520.573 800.066 521.4C799.293 522.227 798.906 523.387 798.906 524.88V537H792.066V514.68H798.906V517.64C799.599 516.653 800.533 515.88 801.706 515.32C802.879 514.733 804.199 514.44 805.666 514.44Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M831.459 531.2V537H827.979C825.499 537 823.566 536.4 822.179 535.2C820.792 533.973 820.099 531.987 820.099 529.24V520.36H817.379V514.68H820.099V509.24H826.939V514.68H831.419V520.36H826.939V529.32C826.939 529.987 827.099 530.467 827.419 530.76C827.739 531.053 828.272 531.2 829.019 531.2H831.459Z" fill="var(--color-illustrationInterface060)"/>
+</g>
+<defs>
+<clipPath id="clip0_3519_104100">
+<rect width="1490" height="838" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site/public/static/illustrations/components/card-composable/usage/dont-1.svg b/site/public/static/illustrations/components/card-composable/usage/dont-1.svg
new file mode 100644
index 0000000000..881efca247
--- /dev/null
+++ b/site/public/static/illustrations/components/card-composable/usage/dont-1.svg
@@ -0,0 +1,52 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3521_104059)">
+<path d="M0 0H1490V838H0V0Z" fill="var(--color-illustrationBackground010)"/>
+<path d="M505 82C505 75.3726 510.373 70 517 70H973C979.627 70 985 75.3726 985 82V756C985 762.627 979.627 768 973 768H517C510.373 768 505 762.627 505 756V82Z" fill="var(--color-illustrationInterface010)"/>
+<path d="M539 199.5C539 194.253 543.04 190 548.023 190H823.977C828.96 190 833 194.253 833 199.5C833 204.747 828.96 209 823.977 209H548.023C543.04 209 539 204.747 539 199.5Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M539 237.5C539 232.253 543.974 228 550.11 228H889.89C896.026 228 901 232.253 901 237.5C901 242.747 896.026 247 889.89 247H550.11C543.974 247 539 242.747 539 237.5Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M539 277C539 272.029 543.039 268 548.021 268H722.979C727.961 268 732 272.029 732 277C732 281.971 727.961 286 722.979 286H548.021C543.039 286 539 281.971 539 277Z" fill="var(--color-illustrationInterface060)"/>
+<rect x="539" y="318" width="397.741" height="12.552" rx="6.27599" fill="var(--color-illustrationInterface030)"/>
+<rect x="539" y="346.553" width="397.741" height="12.552" rx="6.27599" fill="var(--color-illustrationInterface030)"/>
+<rect x="539" y="375.104" width="397.741" height="12.552" rx="6.27599" fill="var(--color-illustrationInterface030)"/>
+<rect x="539" y="403.656" width="397.741" height="12.552" rx="6.27599" fill="var(--color-illustrationInterface030)"/>
+<rect x="539" y="432.207" width="397.741" height="12.552" rx="6.27599" fill="var(--color-illustrationInterface030)"/>
+<rect x="539" y="460.76" width="397.741" height="12.552" rx="6.27599" fill="var(--color-illustrationInterface030)"/>
+<rect x="539" y="489.312" width="397.741" height="12.552" rx="6.27599" fill="var(--color-illustrationInterface030)"/>
+<rect x="539" y="517.863" width="397.741" height="12.552" rx="6.27599" fill="var(--color-illustrationInterface030)"/>
+<rect x="539" y="546.416" width="201.616" height="12.552" rx="6.27599" fill="var(--color-illustrationInterface030)"/>
+<g clip-path="url(#clip1_3521_104059)">
+<rect width="65.6666" height="40" transform="translate(539 118)" fill="var(--color-illustrationInterface060)"/>
+<path d="M559.589 130.318V132.271H553.394V136.576H558.224V138.529H553.394V144.913H551V130.318H559.589Z" fill="var(--color-inkInverse)"/>
+<path d="M564.202 129.373V144.913H561.808V129.373H564.202Z" fill="var(--color-inkInverse)"/>
+<path d="M566.547 139.075C566.547 137.913 566.785 136.884 567.261 135.988C567.751 135.092 568.409 134.399 569.235 133.909C570.075 133.405 570.999 133.153 572.007 133.153C572.917 133.153 573.708 133.335 574.38 133.699C575.066 134.049 575.612 134.49 576.018 135.022V133.342H578.433V144.913H576.018V143.191C575.612 143.737 575.059 144.192 574.359 144.556C573.659 144.92 572.861 145.102 571.965 145.102C570.971 145.102 570.061 144.85 569.235 144.346C568.409 143.828 567.751 143.114 567.261 142.204C566.785 141.28 566.547 140.237 566.547 139.075ZM576.018 139.117C576.018 138.319 575.85 137.626 575.514 137.038C575.192 136.45 574.765 136.002 574.233 135.694C573.701 135.386 573.127 135.232 572.511 135.232C571.895 135.232 571.321 135.386 570.789 135.694C570.257 135.988 569.823 136.429 569.487 137.017C569.165 137.591 569.004 138.277 569.004 139.075C569.004 139.873 569.165 140.573 569.487 141.175C569.823 141.777 570.257 142.239 570.789 142.561C571.335 142.869 571.909 143.023 572.511 143.023C573.127 143.023 573.701 142.869 574.233 142.561C574.765 142.253 575.192 141.805 575.514 141.217C575.85 140.615 576.018 139.915 576.018 139.117Z" fill="var(--color-inkInverse)"/>
+<path d="M586.239 133.153C587.135 133.153 587.926 133.335 588.612 133.699C589.312 134.049 589.858 134.49 590.25 135.022V133.342H592.665V145.102C592.665 146.166 592.441 147.111 591.993 147.937C591.545 148.777 590.894 149.435 590.04 149.911C589.2 150.387 588.192 150.625 587.016 150.625C585.448 150.625 584.146 150.254 583.11 149.512C582.074 148.784 581.486 147.79 581.346 146.53H583.719C583.901 147.132 584.286 147.615 584.874 147.979C585.476 148.357 586.19 148.546 587.016 148.546C587.982 148.546 588.759 148.252 589.347 147.664C589.949 147.076 590.25 146.222 590.25 145.102V143.17C589.844 143.716 589.291 144.178 588.591 144.556C587.905 144.92 587.121 145.102 586.239 145.102C585.231 145.102 584.307 144.85 583.467 144.346C582.641 143.828 581.983 143.114 581.493 142.204C581.017 141.28 580.779 140.237 580.779 139.075C580.779 137.913 581.017 136.884 581.493 135.988C581.983 135.092 582.641 134.399 583.467 133.909C584.307 133.405 585.231 133.153 586.239 133.153ZM590.25 139.117C590.25 138.319 590.082 137.626 589.746 137.038C589.424 136.45 588.997 136.002 588.465 135.694C587.933 135.386 587.359 135.232 586.743 135.232C586.127 135.232 585.553 135.386 585.021 135.694C584.489 135.988 584.055 136.429 583.719 137.017C583.397 137.591 583.236 138.277 583.236 139.075C583.236 139.873 583.397 140.573 583.719 141.175C584.055 141.777 584.489 142.239 585.021 142.561C585.567 142.869 586.141 143.023 586.743 143.023C587.359 143.023 587.933 142.869 588.465 142.561C588.997 142.253 589.424 141.805 589.746 141.217C590.082 140.615 590.25 139.915 590.25 139.117Z" fill="var(--color-inkInverse)"/>
+</g>
+<rect x="539" y="670.969" width="102.002" height="60" rx="8" fill="var(--color-illustrationInterface060)"/>
+<path d="M564.387 700.971C565.171 701.111 565.836 701.524 566.382 702.21C566.928 702.896 567.201 703.673 567.201 704.541C567.201 705.283 567.005 705.955 566.613 706.557C566.235 707.145 565.682 707.614 564.954 707.964C564.226 708.3 563.379 708.468 562.413 708.468H556.575V693.873H562.14C563.134 693.873 563.988 694.041 564.702 694.377C565.416 694.713 565.955 695.168 566.319 695.742C566.683 696.302 566.865 696.932 566.865 697.632C566.865 698.472 566.641 699.172 566.193 699.732C565.745 700.292 565.143 700.705 564.387 700.971ZM558.969 700.005H561.93C562.714 700.005 563.323 699.83 563.757 699.48C564.205 699.116 564.429 698.598 564.429 697.926C564.429 697.268 564.205 696.757 563.757 696.393C563.323 696.015 562.714 695.826 561.93 695.826H558.969V700.005ZM562.203 706.515C563.015 706.515 563.652 706.319 564.114 705.927C564.576 705.535 564.807 704.989 564.807 704.289C564.807 703.575 564.562 703.008 564.072 702.588C563.582 702.168 562.931 701.958 562.119 701.958H558.969V706.515H562.203Z" fill="var(--color-inkInverse)"/>
+<path d="M580.281 696.897V708.468H577.887V707.103C577.509 707.579 577.012 707.957 576.396 708.237C575.794 708.503 575.15 708.636 574.464 708.636C573.554 708.636 572.735 708.447 572.007 708.069C571.293 707.691 570.726 707.131 570.306 706.389C569.9 705.647 569.697 704.751 569.697 703.701V696.897H572.07V703.344C572.07 704.38 572.329 705.178 572.847 705.738C573.365 706.284 574.072 706.557 574.968 706.557C575.864 706.557 576.571 706.284 577.089 705.738C577.621 705.178 577.887 704.38 577.887 703.344V696.897H580.281Z" fill="var(--color-inkInverse)"/>
+<path d="M586.233 698.85V705.255C586.233 705.689 586.331 706.004 586.527 706.2C586.737 706.382 587.087 706.473 587.577 706.473H589.047V708.468H587.157C586.079 708.468 585.253 708.216 584.679 707.712C584.105 707.208 583.818 706.389 583.818 705.255V698.85H582.453V696.897H583.818V694.02H586.233V696.897H589.047V698.85H586.233Z" fill="var(--color-inkInverse)"/>
+<path d="M594.047 698.85V705.255C594.047 705.689 594.145 706.004 594.341 706.2C594.551 706.382 594.901 706.473 595.391 706.473H596.861V708.468H594.971C593.893 708.468 593.067 708.216 592.493 707.712C591.919 707.208 591.632 706.389 591.632 705.255V698.85H590.267V696.897H591.632V694.02H594.047V696.897H596.861V698.85H594.047Z" fill="var(--color-inkInverse)"/>
+<path d="M604.086 708.657C602.994 708.657 602.007 708.412 601.125 707.922C600.243 707.418 599.55 706.718 599.046 705.822C598.542 704.912 598.29 703.862 598.29 702.672C598.29 701.496 598.549 700.453 599.067 699.543C599.585 698.633 600.292 697.933 601.188 697.443C602.084 696.953 603.085 696.708 604.191 696.708C605.297 696.708 606.298 696.953 607.194 697.443C608.09 697.933 608.797 698.633 609.315 699.543C609.833 700.453 610.092 701.496 610.092 702.672C610.092 703.848 609.826 704.891 609.294 705.801C608.762 706.711 608.034 707.418 607.11 707.922C606.2 708.412 605.192 708.657 604.086 708.657ZM604.086 706.578C604.702 706.578 605.276 706.431 605.808 706.137C606.354 705.843 606.795 705.402 607.131 704.814C607.467 704.226 607.635 703.512 607.635 702.672C607.635 701.832 607.474 701.125 607.152 700.551C606.83 699.963 606.403 699.522 605.871 699.228C605.339 698.934 604.765 698.787 604.149 698.787C603.533 698.787 602.959 698.934 602.427 699.228C601.909 699.522 601.496 699.963 601.188 700.551C600.88 701.125 600.726 701.832 600.726 702.672C600.726 703.918 601.041 704.884 601.671 705.57C602.315 706.242 603.12 706.578 604.086 706.578Z" fill="var(--color-inkInverse)"/>
+<path d="M618.297 696.708C619.207 696.708 620.019 696.897 620.733 697.275C621.461 697.653 622.028 698.213 622.434 698.955C622.84 699.697 623.043 700.593 623.043 701.643V708.468H620.67V702C620.67 700.964 620.411 700.173 619.893 699.627C619.375 699.067 618.668 698.787 617.772 698.787C616.876 698.787 616.162 699.067 615.63 699.627C615.112 700.173 614.853 700.964 614.853 702V708.468H612.459V696.897H614.853V698.22C615.245 697.744 615.742 697.373 616.344 697.107C616.96 696.841 617.611 696.708 618.297 696.708Z" fill="var(--color-inkInverse)"/>
+<path d="M569.185 599V600.953H565.3V613.595H562.906V600.953H559V599H569.185Z" fill="var(--color-illustrationInterface100)"/>
+<path d="M570.812 607.757C570.812 606.595 571.05 605.566 571.526 604.67C572.016 603.774 572.674 603.081 573.5 602.591C574.34 602.087 575.264 601.835 576.272 601.835C577.182 601.835 577.973 602.017 578.645 602.381C579.331 602.731 579.877 603.172 580.283 603.704V602.024H582.698V613.595H580.283V611.873C579.877 612.419 579.324 612.874 578.624 613.238C577.924 613.602 577.126 613.784 576.23 613.784C575.236 613.784 574.326 613.532 573.5 613.028C572.674 612.51 572.016 611.796 571.526 610.886C571.05 609.962 570.812 608.919 570.812 607.757ZM580.283 607.799C580.283 607.001 580.115 606.308 579.779 605.72C579.457 605.132 579.03 604.684 578.498 604.376C577.966 604.068 577.392 603.914 576.776 603.914C576.16 603.914 575.586 604.068 575.054 604.376C574.522 604.67 574.088 605.111 573.752 605.699C573.43 606.273 573.269 606.959 573.269 607.757C573.269 608.555 573.43 609.255 573.752 609.857C574.088 610.459 574.522 610.921 575.054 611.243C575.6 611.551 576.174 611.705 576.776 611.705C577.392 611.705 577.966 611.551 578.498 611.243C579.03 610.935 579.457 610.487 579.779 609.899C580.115 609.297 580.283 608.597 580.283 607.799Z" fill="var(--color-illustrationInterface100)"/>
+<path d="M590.504 601.835C591.4 601.835 592.191 602.017 592.877 602.381C593.577 602.731 594.123 603.172 594.515 603.704V602.024H596.93V613.784C596.93 614.848 596.706 615.793 596.258 616.619C595.81 617.459 595.159 618.117 594.305 618.593C593.465 619.069 592.457 619.307 591.281 619.307C589.713 619.307 588.411 618.936 587.375 618.194C586.339 617.466 585.751 616.472 585.611 615.212H587.984C588.166 615.814 588.551 616.297 589.139 616.661C589.741 617.039 590.455 617.228 591.281 617.228C592.247 617.228 593.024 616.934 593.612 616.346C594.214 615.758 594.515 614.904 594.515 613.784V611.852C594.109 612.398 593.556 612.86 592.856 613.238C592.17 613.602 591.386 613.784 590.504 613.784C589.496 613.784 588.572 613.532 587.732 613.028C586.906 612.51 586.248 611.796 585.758 610.886C585.282 609.962 585.044 608.919 585.044 607.757C585.044 606.595 585.282 605.566 585.758 604.67C586.248 603.774 586.906 603.081 587.732 602.591C588.572 602.087 589.496 601.835 590.504 601.835ZM594.515 607.799C594.515 607.001 594.347 606.308 594.011 605.72C593.689 605.132 593.262 604.684 592.73 604.376C592.198 604.068 591.624 603.914 591.008 603.914C590.392 603.914 589.818 604.068 589.286 604.376C588.754 604.67 588.32 605.111 587.984 605.699C587.662 606.273 587.501 606.959 587.501 607.757C587.501 608.555 587.662 609.255 587.984 609.857C588.32 610.459 588.754 610.921 589.286 611.243C589.832 611.551 590.406 611.705 591.008 611.705C591.624 611.705 592.198 611.551 592.73 611.243C593.262 610.935 593.689 610.487 594.011 609.899C594.347 609.297 594.515 608.597 594.515 607.799Z" fill="var(--color-illustrationInterface100)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M620 586H540V627H620V586ZM539 585V628H621V585H539Z" fill="var(--color-illustrationInterface100)"/>
+<path d="M659.185 599V600.953H655.3V613.595H652.906V600.953H649V599H659.185Z" fill="var(--color-illustrationInterface100)"/>
+<path d="M660.812 607.757C660.812 606.595 661.05 605.566 661.526 604.67C662.016 603.774 662.674 603.081 663.5 602.591C664.34 602.087 665.264 601.835 666.272 601.835C667.182 601.835 667.973 602.017 668.645 602.381C669.331 602.731 669.877 603.172 670.283 603.704V602.024H672.698V613.595H670.283V611.873C669.877 612.419 669.324 612.874 668.624 613.238C667.924 613.602 667.126 613.784 666.23 613.784C665.236 613.784 664.326 613.532 663.5 613.028C662.674 612.51 662.016 611.796 661.526 610.886C661.05 609.962 660.812 608.919 660.812 607.757ZM670.283 607.799C670.283 607.001 670.115 606.308 669.779 605.72C669.457 605.132 669.03 604.684 668.498 604.376C667.966 604.068 667.392 603.914 666.776 603.914C666.16 603.914 665.586 604.068 665.054 604.376C664.522 604.67 664.088 605.111 663.752 605.699C663.43 606.273 663.269 606.959 663.269 607.757C663.269 608.555 663.43 609.255 663.752 609.857C664.088 610.459 664.522 610.921 665.054 611.243C665.6 611.551 666.174 611.705 666.776 611.705C667.392 611.705 667.966 611.551 668.498 611.243C669.03 610.935 669.457 610.487 669.779 609.899C670.115 609.297 670.283 608.597 670.283 607.799Z" fill="var(--color-illustrationInterface100)"/>
+<path d="M680.504 601.835C681.4 601.835 682.191 602.017 682.877 602.381C683.577 602.731 684.123 603.172 684.515 603.704V602.024H686.93V613.784C686.93 614.848 686.706 615.793 686.258 616.619C685.81 617.459 685.159 618.117 684.305 618.593C683.465 619.069 682.457 619.307 681.281 619.307C679.713 619.307 678.411 618.936 677.375 618.194C676.339 617.466 675.751 616.472 675.611 615.212H677.984C678.166 615.814 678.551 616.297 679.139 616.661C679.741 617.039 680.455 617.228 681.281 617.228C682.247 617.228 683.024 616.934 683.612 616.346C684.214 615.758 684.515 614.904 684.515 613.784V611.852C684.109 612.398 683.556 612.86 682.856 613.238C682.17 613.602 681.386 613.784 680.504 613.784C679.496 613.784 678.572 613.532 677.732 613.028C676.906 612.51 676.248 611.796 675.758 610.886C675.282 609.962 675.044 608.919 675.044 607.757C675.044 606.595 675.282 605.566 675.758 604.67C676.248 603.774 676.906 603.081 677.732 602.591C678.572 602.087 679.496 601.835 680.504 601.835ZM684.515 607.799C684.515 607.001 684.347 606.308 684.011 605.72C683.689 605.132 683.262 604.684 682.73 604.376C682.198 604.068 681.624 603.914 681.008 603.914C680.392 603.914 679.818 604.068 679.286 604.376C678.754 604.67 678.32 605.111 677.984 605.699C677.662 606.273 677.501 606.959 677.501 607.757C677.501 608.555 677.662 609.255 677.984 609.857C678.32 610.459 678.754 610.921 679.286 611.243C679.832 611.551 680.406 611.705 681.008 611.705C681.624 611.705 682.198 611.551 682.73 611.243C683.262 610.935 683.689 610.487 684.011 609.899C684.347 609.297 684.515 608.597 684.515 607.799Z" fill="var(--color-illustrationInterface100)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M710 586H630V627H710V586ZM629 585V628H711V585H629Z" fill="var(--color-illustrationInterface100)"/>
+<path d="M749.185 599V600.953H745.3V613.595H742.906V600.953H739V599H749.185Z" fill="var(--color-illustrationInterface100)"/>
+<path d="M750.812 607.757C750.812 606.595 751.05 605.566 751.526 604.67C752.016 603.774 752.674 603.081 753.5 602.591C754.34 602.087 755.264 601.835 756.272 601.835C757.182 601.835 757.973 602.017 758.645 602.381C759.331 602.731 759.877 603.172 760.283 603.704V602.024H762.698V613.595H760.283V611.873C759.877 612.419 759.324 612.874 758.624 613.238C757.924 613.602 757.126 613.784 756.23 613.784C755.236 613.784 754.326 613.532 753.5 613.028C752.674 612.51 752.016 611.796 751.526 610.886C751.05 609.962 750.812 608.919 750.812 607.757ZM760.283 607.799C760.283 607.001 760.115 606.308 759.779 605.72C759.457 605.132 759.03 604.684 758.498 604.376C757.966 604.068 757.392 603.914 756.776 603.914C756.16 603.914 755.586 604.068 755.054 604.376C754.522 604.67 754.088 605.111 753.752 605.699C753.43 606.273 753.269 606.959 753.269 607.757C753.269 608.555 753.43 609.255 753.752 609.857C754.088 610.459 754.522 610.921 755.054 611.243C755.6 611.551 756.174 611.705 756.776 611.705C757.392 611.705 757.966 611.551 758.498 611.243C759.03 610.935 759.457 610.487 759.779 609.899C760.115 609.297 760.283 608.597 760.283 607.799Z" fill="var(--color-illustrationInterface100)"/>
+<path d="M770.504 601.835C771.4 601.835 772.191 602.017 772.877 602.381C773.577 602.731 774.123 603.172 774.515 603.704V602.024H776.93V613.784C776.93 614.848 776.706 615.793 776.258 616.619C775.81 617.459 775.159 618.117 774.305 618.593C773.465 619.069 772.457 619.307 771.281 619.307C769.713 619.307 768.411 618.936 767.375 618.194C766.339 617.466 765.751 616.472 765.611 615.212H767.984C768.166 615.814 768.551 616.297 769.139 616.661C769.741 617.039 770.455 617.228 771.281 617.228C772.247 617.228 773.024 616.934 773.612 616.346C774.214 615.758 774.515 614.904 774.515 613.784V611.852C774.109 612.398 773.556 612.86 772.856 613.238C772.17 613.602 771.386 613.784 770.504 613.784C769.496 613.784 768.572 613.532 767.732 613.028C766.906 612.51 766.248 611.796 765.758 610.886C765.282 609.962 765.044 608.919 765.044 607.757C765.044 606.595 765.282 605.566 765.758 604.67C766.248 603.774 766.906 603.081 767.732 602.591C768.572 602.087 769.496 601.835 770.504 601.835ZM774.515 607.799C774.515 607.001 774.347 606.308 774.011 605.72C773.689 605.132 773.262 604.684 772.73 604.376C772.198 604.068 771.624 603.914 771.008 603.914C770.392 603.914 769.818 604.068 769.286 604.376C768.754 604.67 768.32 605.111 767.984 605.699C767.662 606.273 767.501 606.959 767.501 607.757C767.501 608.555 767.662 609.255 767.984 609.857C768.32 610.459 768.754 610.921 769.286 611.243C769.832 611.551 770.406 611.705 771.008 611.705C771.624 611.705 772.198 611.551 772.73 611.243C773.262 610.935 773.689 610.487 774.011 609.899C774.347 609.297 774.515 608.597 774.515 607.799Z" fill="var(--color-illustrationInterface100)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M800 586H720V627H800V586ZM719 585V628H801V585H719Z" fill="var(--color-illustrationInterface100)"/>
+</g>
+<defs>
+<clipPath id="clip0_3521_104059">
+<rect width="1490" height="838" fill="white"/>
+</clipPath>
+<clipPath id="clip1_3521_104059">
+<rect width="65.6666" height="40" fill="white" transform="translate(539 118)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site/public/static/illustrations/components/card-composable/usage/dont-2.svg b/site/public/static/illustrations/components/card-composable/usage/dont-2.svg
new file mode 100644
index 0000000000..4cf07c6600
--- /dev/null
+++ b/site/public/static/illustrations/components/card-composable/usage/dont-2.svg
@@ -0,0 +1,35 @@
+<svg id="nksvg" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3522_113612)">
+<path d="M0 0H1490V838H0V0Z" fill="var(--color-illustrationBackground010)"/>
+<rect x="95" y="121" width="400" height="508" rx="12" fill="var(--color-illustrationInterface010)"/>
+<rect x="127.227" y="508.482" width="333.391" height="12.0115" rx="6.00574" fill="var(--color-illustrationInterface030)"/>
+<rect x="127.227" y="536.508" width="333.391" height="12.0115" rx="6.00574" fill="var(--color-illustrationInterface030)"/>
+<rect x="127.227" y="480.453" width="333.391" height="12.0115" rx="6.00574" fill="var(--color-illustrationInterface030)"/>
+<rect x="127.227" y="564.533" width="168.704" height="12.0115" rx="6.00574" fill="var(--color-illustrationInterface030)"/>
+<path d="M127.514 394.564C127.514 388.944 132.096 384.389 137.749 384.389H450.739C456.391 384.389 460.973 388.944 460.973 394.564C460.973 400.183 456.391 404.739 450.739 404.739H137.749C132.096 404.739 127.514 400.183 127.514 394.564Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M127.514 438.279C127.514 432.659 132.087 428.104 137.728 428.104H335.826C341.467 428.104 346.04 432.659 346.04 438.279C346.04 443.898 341.467 448.454 335.826 448.454H137.728C132.087 448.454 127.514 443.898 127.514 438.279Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M95 133C95 126.373 100.373 121 107 121H482.584C489.211 121 494.584 126.373 494.584 133V334.832H95V133Z" fill="var(--color-illustrationInterface030)"/>
+<rect x="545" y="121" width="400" height="596" rx="12" fill="var(--color-illustrationInterface010)"/>
+<rect x="577.227" y="523.439" width="333.391" height="12.0115" rx="6.00574" fill="var(--color-illustrationInterface030)"/>
+<rect x="577.227" y="551.451" width="333.391" height="12.0115" rx="6.00574" fill="var(--color-illustrationInterface030)"/>
+<rect x="577.227" y="579.463" width="333.391" height="12.0115" rx="6.00574" fill="var(--color-illustrationInterface030)"/>
+<rect x="577.227" y="607.475" width="333.391" height="12.0115" rx="6.00574" fill="var(--color-illustrationInterface030)"/>
+<rect x="577.227" y="635.486" width="168.704" height="12.0115" rx="6.00574" fill="var(--color-illustrationInterface030)"/>
+<path d="M577.514 394.564C577.514 388.944 582.096 384.389 587.749 384.389H900.739C906.391 384.389 910.973 388.944 910.973 394.564C910.973 400.183 906.391 404.739 900.739 404.739H587.749C582.096 404.739 577.514 400.183 577.514 394.564Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M577.514 437.913C577.514 432.294 582.096 427.738 587.749 427.738H900.739C906.391 427.738 910.973 432.294 910.973 437.913C910.973 443.533 906.391 448.088 900.739 448.088H587.749C582.096 448.088 577.514 443.533 577.514 437.913Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M577.514 481.265C577.514 475.645 582.087 471.09 587.728 471.09H785.826C791.467 471.09 796.04 475.645 796.04 481.265C796.04 486.884 791.467 491.44 785.826 491.44H587.728C582.087 491.44 577.514 486.884 577.514 481.265Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M545 133C545 126.373 550.373 121 557 121H932.584C939.211 121 944.584 126.373 944.584 133V334.832H545V133Z" fill="var(--color-illustrationInterface030)"/>
+<rect x="995" y="121" width="400" height="472" rx="12" fill="var(--color-illustrationInterface010)"/>
+<rect x="1027.23" y="464.768" width="333.391" height="12.0115" rx="6.00574" fill="var(--color-illustrationInterface030)"/>
+<rect x="1027.23" y="492.793" width="333.391" height="12.0115" rx="6.00574" fill="var(--color-illustrationInterface030)"/>
+<rect x="1027.23" y="436.738" width="333.391" height="12.0115" rx="6.00574" fill="var(--color-illustrationInterface030)"/>
+<rect x="1027.23" y="520.818" width="168.704" height="12.0115" rx="6.00574" fill="var(--color-illustrationInterface030)"/>
+<path d="M1027.51 394.564C1027.51 388.944 1032.1 384.389 1037.75 384.389H1350.74C1356.39 384.389 1360.97 388.944 1360.97 394.564C1360.97 400.183 1356.39 404.739 1350.74 404.739H1037.75C1032.1 404.739 1027.51 400.183 1027.51 394.564Z" fill="var(--color-illustrationInterface060)"/>
+<path d="M995 133C995 126.373 1000.37 121 1007 121H1382.58C1389.21 121 1394.58 126.373 1394.58 133V334.832H995V133Z" fill="var(--color-illustrationInterface030)"/>
+</g>
+<defs>
+<clipPath id="clip0_3522_113612">
+<rect width="1490" height="838" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site/routes.ts b/site/routes.ts
index d5d305afa5..a652964168 100644
--- a/site/routes.ts
+++ b/site/routes.ts
@@ -581,6 +581,14 @@ export const routes = [
               'Contain preview content and actions about a single subject.',
             illustration: 'components/hero-card-illustration',
           },
+          {
+            title: 'Card Composable',
+            page: true,
+            id: '/components/card-composable',
+            description:
+              'Cards contain preview content and actions relating to a specific subject.',
+            illustration: 'components/hero-card-illustration',
+          },
           {
             title: 'Divider',
             page: true,