{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"LogoSquareGrid 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":"logosquaregrid-component","__idx":0},"children":["LogoSquareGrid Component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A responsive grid pattern for displaying company/partner logos with an optional header section. Built on top of the TileLogo component, featuring square tiles arranged in a responsive grid 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":["Responsive Grid"]},": Automatically adapts from 2 columns (mobile) to 4 columns (tablet/desktop)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Optional Header"]},": Includes heading, description, and action buttons"]},{"$$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":["Square Tiles"]},": Maintains perfect square 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 Size"},"children":["Tile Size"]}]}]},{"$$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":["~183px"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Tablet (768px - 1023px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["4"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["8px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["~178px"]}]},{"$$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":["~298px"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"color-variants","__idx":3},"children":["Color Variants"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The LogoSquareGrid 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":"LogoSquareGrid Variant"},"children":["LogoSquareGrid 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":4},"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 LogoSquareGridProps {\n  /** Color variant - determines background color */\n  variant?: 'gray' | 'green';\n  /** Optional heading text */\n  heading?: string;\n  /** Optional description text */\n  description?: string;\n  /** Button configurations (1-2 buttons supported) */\n  buttons?: ButtonConfig[];\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":["LogoSquareGridProps.variant"]}," prop, which applies to all tiles in the grid."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"default-values","__idx":5},"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":["heading"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["undefined"]}]},{"$$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":["buttons"]},": ",{"$$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":"buttonconfig","__idx":6},"children":["ButtonConfig"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Imported from the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/ja/shared/patterns/buttongroup/readme"},"children":["ButtonGroup pattern"]},"."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"interface ButtonConfig {\n  label: string;        // Button text\n  href?: string;        // Link destination\n  onClick?: () => void; // Click handler\n}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A maximum of 2 buttons is supported. ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ButtonGroup"]}," assigns emphasis by count: a"," ","lone button renders ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["strong"]},"; with two, the first is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["strong"]}," and the second"," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["subtle"]},"."]},{"$$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":["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 { LogoSquareGrid } from 'shared/sections/LogoSquareGrid';\n\n<LogoSquareGrid\n  variant=\"gray\"\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-header-section","__idx":10},"children":["With Header Section"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<LogoSquareGrid\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  buttons={[\n    { label: \"View Documentation\", href: \"/docs\" },\n    { label: \"Explore Tools\", href: \"/tools\" }\n  ]}\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":"<LogoSquareGrid\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":"<LogoSquareGrid\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":"<LogoSquareGrid\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":"without-header-logo-grid-only","__idx":14},"children":["Without Header (Logo Grid Only)"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<LogoSquareGrid\n  variant=\"gray\"\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":"with-single-button","__idx":15},"children":["With Single Button"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<LogoSquareGrid\n  variant=\"green\"\n  heading=\"Featured Integrations\"\n  description=\"Connect with leading platforms and services.\"\n  buttons={[{ label: \"See All Integrations\", href: \"/integrations\" }]}\n  logos={[\n    { logo: \"/img/logos/integration1.svg\", alt: \"Integration 1\" },\n    { logo: \"/img/logos/integration2.svg\", alt: \"Integration 2\" }\n  ]}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-click-handler","__idx":16},"children":["With Click Handler"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<LogoSquareGrid\n  variant=\"gray\"\n  heading=\"Developer Resources\"\n  description=\"Access comprehensive tools and libraries.\"\n  buttons={[\n    {\n      label: \"Get Started\",\n      onClick: () => console.log('Primary clicked')\n    },\n    {\n      label: \"Learn More\",\n      href: \"/learn\"\n    }\n  ]}\n  logos={[\n    { logo: \"/img/logos/resource1.svg\", alt: \"Resource 1\" }\n  ]}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"important-implementation-details","__idx":17},"children":["Important Implementation Details"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"logo-image-requirements","__idx":18},"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: 120-200px recommended)"]},{"$$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":19},"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, lg: 3 }}"]}," (2 cols on mobile out of 4, 3 cols on desktop out of 12)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Tiles maintain a 1:1 aspect ratio using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["aspect-ratio: 1"]}]},{"$$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":"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":3,"id":"header-section-logic","__idx":21},"children":["Header Section Logic"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The header section only renders if at least one of the following is provided:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["heading"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["description"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buttons"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"button-styling","__idx":22},"children":["Button Styling"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Buttons use the green color scheme"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Buttons stack vertically on mobile, horizontal on tablet+"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Button spacing: 8px gap on mobile, 4px gap on tablet+"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Button layout is handled by the shared ButtonGroup component"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"styling","__idx":23},"children":["Styling"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"bem-class-structure","__idx":24},"children":["BEM Class Structure"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"scss","header":{"controls":{"copy":{}}},"source":".bds-logo-square-grid                  // Base component\n.bds-logo-square-grid--gray            // Gray variant (maps to TileLogo 'neutral')\n.bds-logo-square-grid--green           // Green variant (maps to TileLogo 'green')\n.bds-logo-square-grid__header          // Header section container\n.bds-logo-square-grid__text            // Text content container\n.bds-logo-square-grid__heading         // Heading element\n.bds-logo-square-grid__description     // Description element\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"]},"). Grid layout is handled by PageGridRow and PageGridCol components. Button layout is handled by the ButtonGroup component (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-button-group"]},")."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"typography-tokens","__idx":25},"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":26},"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":27},"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":["ARIA labels provided through Button component"]},{"$$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":28},"children":["Best Practices"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"when-to-use-each-variant","__idx":29},"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":30},"children":["Content Guidelines"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Heading"]},": Keep concise (1 line preferred), use sentence case"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Description"]},": Provide context (2-3 lines max), complete sentences"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Logo Count"]},": Aim for multiples of 4 for visual balance on desktop"]},{"$$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":31},"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":["Color"]},": Consider providing light/dark variants if needed"]},{"$$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":32},"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":33},"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, lg: 3 }}"]}," for responsive layout (2 cols mobile, 4 cols desktop)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Tile Rendering"]},": Leverages TileLogo component for all logo tiles"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Variant Mapping"]},": LogoSquareGrid 'gray' → TileLogo 'neutral', LogoSquareGrid '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"]},": Square tiles maintained by TileLogo with CSS ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["aspect-ratio: 1"]}]},{"$$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":["Button Layout"]},": Uses shared ButtonGroup component with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["gap=\"small\""]}," (4px on tablet+)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"files","__idx":34},"children":["Files"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["LogoSquareGrid.tsx"]}," - Component implementation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["LogoSquareGrid.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":35},"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"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["ButtonGroup"]},": Shared pattern used for responsive button layout in the header"]},{"$$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":36},"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/ThBcoYLNKsBGw3r9g1L6Z8/Pattern-Logo---Square-Grid?node-id=1-2"},"children":["Pattern Logo - Square Grid"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Showcase Page"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/about/logo-square-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/LogoSquareGrid/"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"version-history","__idx":37},"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/4 column layout"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Optional header section with buttons"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Clickable logo support"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Refactored to use shared ButtonGroup component for button layout"]}]}]}]}]},"headings":[{"value":"LogoSquareGrid Component","id":"logosquaregrid-component","depth":1},{"value":"Features","id":"features","depth":2},{"value":"Responsive Behavior","id":"responsive-behavior","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":"ButtonConfig","id":"buttonconfig","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 Header Section","id":"with-header-section","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":"Without Header (Logo Grid Only)","id":"without-header-logo-grid-only","depth":3},{"value":"With Single Button","id":"with-single-button","depth":3},{"value":"With Click Handler","id":"with-click-handler","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":"Clickable Logo Behavior","id":"clickable-logo-behavior","depth":3},{"value":"Header Section Logic","id":"header-section-logic","depth":3},{"value":"Button Styling","id":"button-styling","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":"LogoSquareGrid Component"}},"editPage":{"to":"https://github.com/XRPLF/xrpl-dev-portal/tree/master/shared/sections/LogoSquareGrid/README.md"},"lastModified":"2026-08-25T04:24:09.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/ja/shared/sections/logosquaregrid/readme","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}