Docs: Card.iOS renamed to Module and Figma embeds relinked. (#3819)

Co-authored-by: Ravi Lingineni <rlingineni@pinterest.com>

docs/docs-components/siteIndex.ts

@@ -78,15 +78,15 @@ const siteIndex: readonly [siteIndexType, ...siteIndexType[]] = [
       'Button',
       'ButtonGroup',
       'ButtonToggle',
-      {
-        sectionName: 'Card',
-        pages: ['Card', 'Card.Header', 'Card.Boards', 'Card.Pins'],
-      },
       'Checkbox',
       'Icon',
       'IconButton',
       'IconButtonFloating',
       'ListAction',
+      {
+        sectionName: 'Module',
+        pages: ['Module', 'Module.Header', 'Module.Boards', 'Module.Pins'],
+      },
       'SearchField',
       'SearchGuide',
       'Sheet',

docs/markdown/ios/module/module.boards.md

@@ -0,0 +1,57 @@
+---
+title: Module.Boards
+description: Module.Boards is a preview block that utilizes two of the Board and Section components to present a collection of imagery.
+fullwidth: true
+---
+
+<ImgContainer src="https://i.pinimg.com/originals/76/6a/bf/766abf51e7086e0e7b2dddefc7e94f75.png" alt="Example of a Module container with a Module.Boards preview that contains two Module.Boards representations." noPadding color="background-elevation-accent"/>
+
+## Usage guidelines
+
+<TwoCol>
+<Group>
+<Do title="When to use"/>
+- To suggest boards containing content that a Pinner might like based on their engagement, interests, boards, demographic information, or other signals
+- To suggest boards created by another user (e.g. Pinner, company, brand)
+- To suggest boards featuring a Pin(s) the user has saved/looked at
+
+</Group>
+<Group>
+<Dont title="When not to use" />
+- When showing any content that is not contained within Module.Boards
+</Group>
+</TwoCol>
+
+## Best practices
+
+- Always show two boards or sections per Module. More or less than two will display inconsistently within Module.
+- Use any variations of the Board and Section component besides CTAs. Board CTAs can interfere with the selection of Module itself.
+
+## Accessibility
+
+People use Apple’s accessibility features, such as reduced transparency, VoiceOver, and increased text size, to personalize how they interact with their devices. Supporting these personalizations ensures that everyone has a great user experience. See Apple’s Human Interface Guidelines and documentation about accessibility for iOS:
+
+[Accessible design on iOS](https://developer.apple.com/design/human-interface-guidelines/accessibility/overview/introduction/)
+[Accessible development on iOS](https://developer.apple.com/accessibility/ios/)
+
+## Design tokens
+
+<iframe style={{border:0}} width="100%" height="178" src="https://embed.figma.com/design/8fiEKQVsofnGjzhxteLOyL/Module.iOS-docs-embeds?node-id=1-5851&embed-host=share" allowFullScreen></iframe>
+
+## Anatomy
+
+<iframe style={{border:0}} width="100%" height="312" src="https://embed.figma.com/design/8fiEKQVsofnGjzhxteLOyL/Module.iOS-docs-embeds?node-id=1-5629&embed-host=share" allowFullScreen></iframe>
+1. Board one
+2. Board two
+
+## Variants
+
+The Module.Boards preview block accepts all Board and Sections variants except for CTAs. Optional elements include: lock icon, plus icon, pretext, Module.Boards name, collaborators and subtext.
+
+## Dark mode
+
+<iframe style={{border:0}} width="100%" height="312" width="800" height="312" src="https://embed.figma.com/design/8fiEKQVsofnGjzhxteLOyL/Module.iOS-docs-embeds?node-id=1-6033&embed-host=share" allowFullScreen></iframe>
+
+## Scrolling
+
+<iframe style={{border:0}} width="100%" height="312" width="800" height="312" src="https://embed.figma.com/design/8fiEKQVsofnGjzhxteLOyL/Module.iOS-docs-embeds?node-id=1-5945&embed-host=share" allowFullScreen></iframe>