{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"LogoRectangleGrid Component","siteUrl":"https://xrpl.org","llmstxt":{"hide":false,"title":"XRPL Developer Portal & Documentation","description":"Explore XRP Ledger documentation, blogs, and other blockchain developer resources needed to start building and integrating with the ledger.","details":{"content":"XRP Ledger concepts, use cases, tutorials, references, and other blockchain developer resources. Also, stay up to date with release announcements and more through the XRPL Blog."},"sections":[{"title":"Introduction","description":"A high-level introduction to the XRP Ledger.","includeFiles":["docs/introduction/**/*.*","about/faq.md"],"excludeFiles":["docs/introduction/index.md"]},{"title":"Use Cases","description":"Real-world applications and business scenarios for the XRP Ledger.","includeFiles":["docs/use-cases/**/*.*"],"excludeFiles":["docs/use-cases/index.md","docs/use-cases/defi/index.md"]},{"title":"Agentic Transactions","description":"XRPL AI Starter Kit to help autonomous agents discover, set up, and execute agentic transactions on the XRP Ledger.","includeFiles":["docs/agents/**/*.*"]},{"title":"Concepts","description":"Core concepts including accounts, tokens, transactions, consensus, and more.","includeFiles":["docs/concepts/**/*.*"],"excludeFiles":["docs/concepts/index.md","docs/concepts/decentralized-storage/index.md","docs/concepts/payment-types/index.md"]},{"title":"Tutorials","description":"Step-by-step guides for building on the XRP Ledger in JavaScript, Python, Go, and more.","includeFiles":["docs/tutorials/**/*.*"]},{"title":"References","description":"Protocol specification, transaction types, ledger entries, and API methods.","includeFiles":["docs/references/**/*.*"],"excludeFiles":["docs/references/xrp-api.md","docs/references/data-api.md","docs/references/protocol/index.md","docs/references/protocol/ledger-data/ledger-entry-types/index.md","docs/references/protocol/transactions/index.md","docs/references/protocol/transactions/types/index.md","docs/references/http-websocket-apis/api-conventions/index.md","docs/references/http-websocket-apis/public-api-methods/*/index.md","docs/references/http-websocket-apis/admin-api-methods/*/index.md"]},{"title":"Infrastructure","description":"Install, configure, and troubleshoot xrpld and Clio servers.","includeFiles":["docs/infrastructure/**/*.*"],"excludeFiles":["docs/infrastructure/index.md","docs/infrastructure/*/index.md","docs/infrastructure/installation/build-run-xrpld-in-reporting-mode.md","docs/infrastructure/configuration/data-retention/index.md","docs/infrastructure/configuration/server-modes/index.md"]},{"title":"Blog (2023+)","description":"Recent XRPL Blog posts (showing 2023 and newer).","includeFiles":["blog/2023/**/*.*","blog/2024/**/*.*","blog/2025/**/*.*","blog/2026/**/*.*"]},{"title":"Resources","description":"Developer resources and contribution guidelines.","includeFiles":["resources/**/*.*"]}]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"logorectanglegrid-component","__idx":0},"children":["LogoRectangleGrid Component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A responsive grid pattern for displaying company/partner logos with rectangle tiles and dynamic alignment based on tile count. Built on top of the TileLogo component, featuring 9:5 aspect ratio rectangle tiles with 2 color variants and full dark mode support."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"features","__idx":1},"children":["Features"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["2 Color Variants"]},": Gray and Green backgrounds"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Dynamic Alignment"]},": Grid alignment changes based on logo count (1-3: right, 4: left, 5-9: right, 9+: left)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Responsive Grid"]},": Automatically adapts from 2 columns (mobile) to 3 columns (tablet) to 4 columns (desktop)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Required Header"]},": Heading is required, description is optional"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Clickable Logos"]},": Support for optional links on individual logos"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Dark Mode Support"]},": Full light and dark mode compatibility"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Rectangle Tiles"]},": Maintains 9:5 aspect ratio at all breakpoints"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Grid Integration"]},": Built-in PageGrid wrapper with standard container support"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"responsive-behavior","__idx":2},"children":["Responsive Behavior"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component automatically adapts its grid layout based on viewport width:"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Breakpoint"},"children":["Breakpoint"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Columns"},"children":["Columns"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Gap"},"children":["Gap"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Tile Aspect Ratio"},"children":["Tile Aspect Ratio"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Mobile (< 768px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["2"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["8px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["9:5"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Tablet (768px - 1023px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["3"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["8px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["9:5"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Desktop (≥ 1024px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["4"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["8px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["9:5"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"dynamic-alignment","__idx":3},"children":["Dynamic Alignment"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The grid alignment changes based on the number of logos:"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Logo Count"},"children":["Logo Count"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Alignment"},"children":["Alignment"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Offset"},"children":["Offset"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["1-3"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Right"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["4 columns"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["4"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Left"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["0 columns"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["5-9"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Right"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["4 columns"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["9+"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Left"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["0 columns"]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This creates a visually balanced layout that adapts to different content volumes."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"color-variants","__idx":4},"children":["Color Variants"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The LogoRectangleGrid pattern uses two color variants that map directly to TileLogo component variants:"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"LogoRectangleGrid Variant"},"children":["LogoRectangleGrid Variant"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"TileLogo Variant"},"children":["TileLogo Variant"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["gray"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["neutral"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Subtle, professional appearance for general partner showcases"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["green"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["green"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Highlights featured or primary partners"]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Colors are managed by the TileLogo component and automatically adapt between light and dark modes with proper hover states and animations."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"props-api","__idx":5},"children":["Props API"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"interface LogoItem {\n  /** Logo image source URL */\n  logo: string;\n  /** Alt text for the logo image */\n  alt: string;\n  /** Optional link URL - makes the logo clickable */\n  href?: string;\n  /** Optional click handler - makes the logo a button */\n  onClick?: () => void;\n  /** Disabled state */\n  disabled?: boolean;\n}\n\ninterface LogoRectangleGridProps {\n  /** Color variant - determines background color */\n  variant?: 'gray' | 'green';\n  /** Heading text (required) */\n  heading: string;\n  /** Optional description text */\n  description?: string;\n  /** Array of logo items to display in the grid */\n  logos: LogoItem[];\n  /** Additional CSS classes */\n  className?: string;\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Note"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["LogoItem"]}," extends ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TileLogoProps"]}," from the TileLogo component. The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["variant"]}," property is NOT included in individual logo items - it's controlled at the component level via the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["LogoRectangleGridProps.variant"]}," prop, which applies to all tiles in the grid."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"default-values","__idx":6},"children":["Default Values"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["variant"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'gray'"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["description"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["undefined"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["className"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["''"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"required-props","__idx":7},"children":["Required Props"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["heading"]},": Heading text (required)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["logos"]},": Array of logo items (required)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"usage-examples","__idx":8},"children":["Usage Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-usage-with-gray-variant","__idx":9},"children":["Basic Usage with Gray Variant"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"import { LogoRectangleGrid } from 'shared/sections/LogoRectangleGrid';\n\n<LogoRectangleGrid\n  variant=\"gray\"\n  heading=\"Developer tools & APIs\"\n  logos={[\n    { logo: \"/img/logos/company1.svg\", alt: \"Company 1\" },\n    { logo: \"/img/logos/company2.svg\", alt: \"Company 2\" },\n    { logo: \"/img/logos/company3.svg\", alt: \"Company 3\" },\n    { logo: \"/img/logos/company4.svg\", alt: \"Company 4\" }\n  ]}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-description","__idx":10},"children":["With Description"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<LogoRectangleGrid\n  variant=\"green\"\n  heading=\"Developer tools & APIs\"\n  description=\"Streamline development and build powerful RWA tokenization solutions with XRP Ledger's comprehensive developer toolset.\"\n  logos={[\n    { logo: \"/img/logos/tool1.svg\", alt: \"Tool 1\" },\n    { logo: \"/img/logos/tool2.svg\", alt: \"Tool 2\" },\n    { logo: \"/img/logos/tool3.svg\", alt: \"Tool 3\" },\n    { logo: \"/img/logos/tool4.svg\", alt: \"Tool 4\" },\n    { logo: \"/img/logos/tool5.svg\", alt: \"Tool 5\" },\n    { logo: \"/img/logos/tool6.svg\", alt: \"Tool 6\" },\n    { logo: \"/img/logos/tool7.svg\", alt: \"Tool 7\" },\n    { logo: \"/img/logos/tool8.svg\", alt: \"Tool 8\" }\n  ]}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-clickable-logos","__idx":11},"children":["With Clickable Logos"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<LogoRectangleGrid\n  variant=\"gray\"\n  heading=\"Our Partners\"\n  description=\"Leading companies building on XRPL.\"\n  logos={[\n    {\n      logo: \"/img/logos/partner1.svg\",\n      alt: \"Partner 1\",\n      href: \"https://partner1.com\"\n    },\n    {\n      logo: \"/img/logos/partner2.svg\",\n      alt: \"Partner 2\",\n      href: \"https://partner2.com\"\n    }\n  ]}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-button-handlers","__idx":12},"children":["With Button Handlers"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<LogoRectangleGrid\n  variant=\"green\"\n  heading=\"Interactive Partners\"\n  description=\"Click any logo to learn more.\"\n  logos={[\n    {\n      logo: \"/img/logos/partner1.svg\",\n      alt: \"Partner 1\",\n      onClick: () => openModal('partner1')\n    },\n    {\n      logo: \"/img/logos/partner2.svg\",\n      alt: \"Partner 2\",\n      onClick: () => openModal('partner2')\n    }\n  ]}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-disabled-state","__idx":13},"children":["With Disabled State"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<LogoRectangleGrid\n  variant=\"gray\"\n  heading=\"Coming Soon\"\n  description=\"New partners joining the ecosystem.\"\n  logos={[\n    {\n      logo: \"/img/logos/partner1.svg\",\n      alt: \"Partner 1\",\n      href: \"/partners/partner1\"\n    },\n    {\n      logo: \"/img/logos/coming-soon.svg\",\n      alt: \"Coming Soon\",\n      disabled: true\n    }\n  ]}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"heading-only-no-description","__idx":14},"children":["Heading Only (No Description)"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<LogoRectangleGrid\n  variant=\"gray\"\n  heading=\"Ecosystem Members\"\n  logos={[\n    { logo: \"/img/logos/sponsor1.svg\", alt: \"Sponsor 1\" },\n    { logo: \"/img/logos/sponsor2.svg\", alt: \"Sponsor 2\" },\n    { logo: \"/img/logos/sponsor3.svg\", alt: \"Sponsor 3\" },\n    { logo: \"/img/logos/sponsor4.svg\", alt: \"Sponsor 4\" }\n  ]}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"demonstrating-alignment-logic","__idx":15},"children":["Demonstrating Alignment Logic"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"// 1-3 logos: Right-aligned\n<LogoRectangleGrid\n  variant=\"green\"\n  heading=\"Featured Partners\"\n  logos={[\n    { logo: \"/img/logos/partner1.svg\", alt: \"Partner 1\" },\n    { logo: \"/img/logos/partner2.svg\", alt: \"Partner 2\" }\n  ]}\n/>\n\n// 4 logos: Left-aligned\n<LogoRectangleGrid\n  variant=\"gray\"\n  heading=\"Core Technologies\"\n  logos={[\n    { logo: \"/img/logos/tech1.svg\", alt: \"Tech 1\" },\n    { logo: \"/img/logos/tech2.svg\", alt: \"Tech 2\" },\n    { logo: \"/img/logos/tech3.svg\", alt: \"Tech 3\" },\n    { logo: \"/img/logos/tech4.svg\", alt: \"Tech 4\" }\n  ]}\n/>\n\n// 5-9 logos: Right-aligned\n<LogoRectangleGrid\n  variant=\"green\"\n  heading=\"Developer Tools\"\n  logos={[\n    { logo: \"/img/logos/tool1.svg\", alt: \"Tool 1\" },\n    { logo: \"/img/logos/tool2.svg\", alt: \"Tool 2\" },\n    { logo: \"/img/logos/tool3.svg\", alt: \"Tool 3\" },\n    { logo: \"/img/logos/tool4.svg\", alt: \"Tool 4\" },\n    { logo: \"/img/logos/tool5.svg\", alt: \"Tool 5\" },\n    { logo: \"/img/logos/tool6.svg\", alt: \"Tool 6\" }\n  ]}\n/>\n\n// 9+ logos: Left-aligned\n<LogoRectangleGrid\n  variant=\"gray\"\n  heading=\"Partner Ecosystem\"\n  logos={[\n    // ... 12 logos\n  ]}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"important-implementation-details","__idx":16},"children":["Important Implementation Details"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"logo-image-requirements","__idx":17},"children":["Logo Image Requirements"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For best results, logo images should:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Be SVG format for crisp scaling"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Have transparent backgrounds"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Be reasonably sized (width: 150-250px recommended for 9:5 aspect ratio)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use monochrome or simple color schemes"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Have consistent visual weight across all logos"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"grid-behavior","__idx":18},"children":["Grid Behavior"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The grid uses PageGridCol components for responsive layout"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Each tile uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["span={{ base: 2, md: 2, lg: 3 }}"]}," (2 cols on mobile out of 4, 2 cols on tablet out of 6, 3 cols on desktop out of 12)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["This creates 2 columns on mobile, 3 columns on tablet, and 4 columns on desktop"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Tiles maintain a 9:5 aspect ratio using the TileLogo rectangle shape"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Gaps between tiles are handled by PageGrid's built-in gutter system"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Grid automatically wraps to new rows as needed"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Grid alignment changes dynamically based on logo count"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"alignment-logic-implementation","__idx":19},"children":["Alignment Logic Implementation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The alignment is controlled by the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["alignRight"]}," variable:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const logoCount = logos.length;\nconst alignRight = \n  (logoCount >= 1 && logoCount <= 3) || \n  (logoCount >= 5 && logoCount <= 9);\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["alignRight"]}," is true:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Grid container spans 8 columns on desktop (lg breakpoint)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Grid container has 4-column offset on desktop (pushes content right)"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["alignRight"]}," is false:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Grid container spans full width"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Grid container has 0 offset (content aligns left)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"clickable-logo-behavior","__idx":20},"children":["Clickable Logo Behavior"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Logo tiles leverage the TileLogo component's interactive capabilities:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["With ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["href"]}," property"]},": Renders as a link (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<a>"]}," tag) with window shade hover animation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["With ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onClick"]}," property"]},": Renders as a button with the same interactive states"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["With ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["disabled"]}," property"]},": Prevents interaction and applies disabled styling"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Interactive states"]},": Default, Hover, Focused, Pressed, and Disabled"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Animation"]},": Window shade effect that wipes from bottom to top on hover"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["All tiles automatically maintain focus states for keyboard accessibility"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"styling","__idx":21},"children":["Styling"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"bem-class-structure","__idx":22},"children":["BEM Class Structure"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"scss","header":{"controls":{"copy":{}}},"source":".bds-logo-rectangle-grid                  // Base component\n.bds-logo-rectangle-grid--gray            // Gray variant (maps to TileLogo 'neutral')\n.bds-logo-rectangle-grid--green           // Green variant (maps to TileLogo 'green')\n.bds-logo-rectangle-grid__header          // Header section container\n.bds-logo-rectangle-grid__text            // Text content container\n","lang":"scss"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Note"]},": Individual logo tiles are rendered using the TileLogo component with its own BEM structure (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-tile-logo"]},") and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shape=\"rectangle\""]},". Grid layout is handled by PageGridRow and PageGridCol components."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"typography-tokens","__idx":23},"children":["Typography Tokens"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Heading"]},": Uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["heading-md"]}," type token (Tobias Light font)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Desktop: 40px / 46px line-height / -1px letter-spacing"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Tablet: 36px / 45px line-height / -0.5px letter-spacing"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Mobile: 32px / 40px line-height / 0px letter-spacing"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Description"]},": Uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["body-l"]}," type token (Booton Light font)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Desktop: 18px / 26.1px line-height / -0.5px letter-spacing"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Tablet: 18px / 26.1px line-height / -0.5px letter-spacing"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Mobile: 18px / 26.1px line-height / -0.5px letter-spacing"]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"color-tokens","__idx":24},"children":["Color Tokens"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["All colors are sourced from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles/_colors.scss"]},":"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"scss","header":{"controls":{"copy":{}}},"source":"// Tile backgrounds\n$gray-200     // Gray variant (light mode)\n$gray-700     // Gray variant (dark mode)\n$green-200    // Green variant (light mode)\n$green-300    // Green variant (dark mode)\n","lang":"scss"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"accessibility","__idx":25},"children":["Accessibility"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Semantic HTML structure with proper heading hierarchy"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["All logos include descriptive alt text"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Clickable logos have proper link semantics"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Keyboard navigation support with visible focus states"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Color contrast meets WCAG AA standards in all variants"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"best-practices","__idx":26},"children":["Best Practices"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"when-to-use-each-variant","__idx":27},"children":["When to Use Each Variant"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Gray"]},": General-purpose logo grids, subtle integration"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Green"]},": Featured partnerships, brand-focused sections"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"content-guidelines","__idx":28},"children":["Content Guidelines"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Heading"]},": Required, keep concise (1-2 lines preferred), use sentence case"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Description"]},": Optional, provide context (2-3 lines max), complete sentences"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Logo Count"]},": Consider the alignment logic when choosing how many logos to display"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Alt Text"]},": Use company/product names, not generic \"logo\""]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"logo-preparation","__idx":29},"children":["Logo Preparation"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Consistent Sizing"]},": Ensure all logos have similar visual weight"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Format"]},": Use SVG for scalability and crisp rendering"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Background"]},": Transparent backgrounds work best"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Aspect Ratio"]},": Rectangle tiles work well with horizontal logos"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Padding"]},": Include minimal internal padding in the SVG itself"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"performance","__idx":30},"children":["Performance"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use optimized SVG files (run through SVGO or similar)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Consider lazy loading for grids with many logos"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Provide appropriate alt text for all images"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["width"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["height"]}," attributes on img tags when possible"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"technical-implementation","__idx":31},"children":["Technical Implementation"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Grid System"]},": Uses PageGridCol with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["span={{ base: 2, md: 2, lg: 3 }}"]}," for responsive layout"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Tile Rendering"]},": Leverages TileLogo component with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shape=\"rectangle\""]}," for all logo tiles"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Variant Mapping"]},": LogoRectangleGrid 'gray' → TileLogo 'neutral', LogoRectangleGrid 'green' → TileLogo 'green'"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Interactive States"]},": TileLogo handles href (links), onClick (buttons), and disabled states"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Aspect Ratio"]},": Rectangle tiles maintained by TileLogo with CSS ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["aspect-ratio: 9/5"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Animations"]},": Window shade hover effect managed by TileLogo component"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Dynamic Alignment"]},": Grid alignment controlled by conditional offset based on logo count"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"files","__idx":32},"children":["Files"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["LogoRectangleGrid.tsx"]}," - Component implementation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["LogoRectangleGrid.scss"]}," - Styles with color variants and responsive breakpoints"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["index.ts"]}," - Barrel exports"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["README.md"]}," - This documentation"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"related-components","__idx":33},"children":["Related Components"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["TileLogo"]},": Core component used to render individual logo tiles with interactive states and rectangle shape"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["LogoSquareGrid"]},": Similar pattern but with square tiles instead of rectangle tiles"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["PageGrid"]},": Used internally for responsive grid structure and standard container support"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"design-references","__idx":34},"children":["Design References"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Figma Design"]},": ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://www.figma.com/design/gaTsImoTRsiRXAGzbGKcCd/Section-Logo---Rectangle-Grid?node-id=1-2"},"children":["Section Logo - Rectangle Grid"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Showcase Page"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/about/logo-rectangle-grid-showcase.page.tsx"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Component Location"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shared/sections/LogoRectangleGrid/"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"version-history","__idx":35},"children":["Version History"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["January 2026"]},": Initial implementation",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Figma design alignment with 2 color variants"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Responsive grid with 2/3/4 column layout"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Dynamic alignment based on logo count"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Required header section with optional description"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Clickable logo support"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Rectangle tiles with 9:5 aspect ratio"]}]}]}]}]},"headings":[{"value":"LogoRectangleGrid Component","id":"logorectanglegrid-component","depth":1},{"value":"Features","id":"features","depth":2},{"value":"Responsive Behavior","id":"responsive-behavior","depth":2},{"value":"Dynamic Alignment","id":"dynamic-alignment","depth":2},{"value":"Color Variants","id":"color-variants","depth":2},{"value":"Props API","id":"props-api","depth":2},{"value":"Default Values","id":"default-values","depth":3},{"value":"Required Props","id":"required-props","depth":3},{"value":"Usage Examples","id":"usage-examples","depth":2},{"value":"Basic Usage with Gray Variant","id":"basic-usage-with-gray-variant","depth":3},{"value":"With Description","id":"with-description","depth":3},{"value":"With Clickable Logos","id":"with-clickable-logos","depth":3},{"value":"With Button Handlers","id":"with-button-handlers","depth":3},{"value":"With Disabled State","id":"with-disabled-state","depth":3},{"value":"Heading Only (No Description)","id":"heading-only-no-description","depth":3},{"value":"Demonstrating Alignment Logic","id":"demonstrating-alignment-logic","depth":3},{"value":"Important Implementation Details","id":"important-implementation-details","depth":2},{"value":"Logo Image Requirements","id":"logo-image-requirements","depth":3},{"value":"Grid Behavior","id":"grid-behavior","depth":3},{"value":"Alignment Logic Implementation","id":"alignment-logic-implementation","depth":3},{"value":"Clickable Logo Behavior","id":"clickable-logo-behavior","depth":3},{"value":"Styling","id":"styling","depth":2},{"value":"BEM Class Structure","id":"bem-class-structure","depth":3},{"value":"Typography Tokens","id":"typography-tokens","depth":3},{"value":"Color Tokens","id":"color-tokens","depth":3},{"value":"Accessibility","id":"accessibility","depth":2},{"value":"Best Practices","id":"best-practices","depth":2},{"value":"When to Use Each Variant","id":"when-to-use-each-variant","depth":3},{"value":"Content Guidelines","id":"content-guidelines","depth":3},{"value":"Logo Preparation","id":"logo-preparation","depth":3},{"value":"Performance","id":"performance","depth":3},{"value":"Technical Implementation","id":"technical-implementation","depth":3},{"value":"Files","id":"files","depth":2},{"value":"Related Components","id":"related-components","depth":2},{"value":"Design References","id":"design-references","depth":2},{"value":"Version History","id":"version-history","depth":2}],"frontmatter":{"seo":{"title":"LogoRectangleGrid Component"}},"editPage":{"to":"https://github.com/XRPLF/xrpl-dev-portal/tree/master/shared/sections/LogoRectangleGrid/README.md"},"lastModified":"2026-02-23T23:00:18.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/es-es/shared/sections/logorectanglegrid/readme","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}