{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"TileLogo Component - Usage Guidelines","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":"tilelogo-component---usage-guidelines","__idx":0},"children":["TileLogo Component - Usage Guidelines"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TileLogo"]}," is a tile/card component designed to display brand logos with interactive states. It supports two shape variants (Square and Rectangle), two color variants (Neutral and Green), and responsive sizing that adapts to different breakpoints."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Use TileLogo when:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Displaying partner or ecosystem brand logos"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Creating logo grids or showcases"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Highlighting integrations or collaborations"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Building clickable logo galleries"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Creating featured partner banners"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Don't use TileLogo for:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Feature cards with text content (use CardOffgrid)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Navigation items (use navigation components)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Image galleries (use gallery components)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Non-interactive logo displays (use simple image elements)"]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"shape-variants","__idx":2},"children":["Shape Variants"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"square-shape-default","__idx":3},"children":["Square Shape (Default)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Aspect Ratio:"]}," 1:1 (maintains square proportions)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Use Cases:"]}," Logo grids, partner showcases, general logo displays"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Responsive Padding:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["SM: 36px vertical / 20px horizontal"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["MD: 40px vertical / 24px horizontal"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["LG: 72px vertical / 48px horizontal"]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"rectangle-shape","__idx":4},"children":["Rectangle Shape"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Height:"]}," Fixed height with full width"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Use Cases:"]}," Horizontal layouts, featured partner banners, wide logo displays"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Responsive Sizing:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["SM: 96px height, 2 columns width"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["MD: 96px height, 4 columns width"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["LG: 160px height, 4 columns width"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Responsive Padding:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["SM/MD: 20px vertical / 36px horizontal"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["LG: 32px vertical / 64px horizontal"]}]}]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"color-variants","__idx":5},"children":["Color Variants"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"neutral-variant-default","__idx":6},"children":["Neutral Variant (Default)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use for general partner showcases and standard logo displays. Provides a subtle, professional appearance."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Best for:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Standard partner logos"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["General logo grids"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Non-featured content"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"green-variant","__idx":7},"children":["Green Variant"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use to highlight featured or primary partners. Creates visual hierarchy and draws attention."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Best for:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Featured partners"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Primary integrations"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Important collaborations"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Creating visual emphasis"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"theme-and-interactive-colors","__idx":8},"children":["Theme and interactive colors"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Tiles are styled for ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["light mode"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["html.light"]},") and ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["dark mode"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["html.dark"]},"). Hover uses a bottom-to-top “window shade” overlay; ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["focus-visible"]}," matches the hover overlay color; ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["pressed"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":active"]},") uses the active fill."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Neutral"]}]},{"$$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":"State"},"children":["State"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Light mode"},"children":["Light mode"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Dark mode"},"children":["Dark mode"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Default (tile background)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Gray 200"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Gray 500"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Hover / focus overlay"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Gray 300"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Gray 400"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Pressed overlay"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Gray 400"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Gray pressed token (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#56595E"]},")"]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Green"]}]},{"$$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":"State"},"children":["State"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Light mode"},"children":["Light mode"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Dark mode"},"children":["Dark mode"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Default (tile background)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Green 200"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Green 300"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Hover / focus overlay"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Green 300"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Green 200"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Pressed overlay"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Green 400"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Green 400"]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["On viewports ≤991px, the wipe animation is disabled and hover / focus-visible use a solid full overlay immediately. Values follow ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TileLogo.scss"]}," (for example, dark-mode green uses green-200 for that overlay, matching desktop hover—not green-400 pressed)."]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"component-api","__idx":9},"children":["Component API"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"interface TileLogoProps {\n  /** Shape variant: 'square' (default) or 'rectangle' */\n  shape?: 'square' | 'rectangle';\n  \n  /** Color variant: 'neutral' (default) or 'green' */\n  variant?: 'neutral' | 'green';\n  \n  /** Logo image source (URL or path) */\n  logo: string;\n  \n  /** Alt text for accessibility */\n  alt: string;\n  \n  /** Click handler - renders as <button> */\n  onClick?: () => void;\n  \n  /** Link destination - renders as <a> */\n  href?: string;\n  \n  /** Disabled state - prevents interaction */\n  disabled?: boolean;\n  \n  /** Additional CSS classes */\n  className?: string;\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"usage-examples","__idx":10},"children":["Usage Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-usage-with-link","__idx":11},"children":["Basic Usage with Link"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<TileLogo\n  variant=\"neutral\"\n  logo=\"/logos/partner-logo.svg\"\n  alt=\"Partner Name\"\n  href=\"/partners/partner-name\"\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"square-shape-with-click-handler","__idx":12},"children":["Square Shape with Click Handler"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<TileLogo\n  shape=\"square\"\n  variant=\"green\"\n  logo=\"/logos/featured-logo.svg\"\n  alt=\"Featured Partner\"\n  onClick={() => openPartnerModal('featured')}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"rectangle-shape-for-banners","__idx":13},"children":["Rectangle Shape for Banners"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<TileLogo\n  shape=\"rectangle\"\n  variant=\"neutral\"\n  logo=\"/logos/partner-logo.svg\"\n  alt=\"Partner Banner\"\n  href=\"/partners/partner-name\"\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"logo-grid-with-mixed-variants","__idx":14},"children":["Logo Grid with Mixed Variants"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<PageGrid>\n  <PageGridRow>\n    {partners.map((partner) => (\n      <PageGridCol key={partner.id} span={{ base: 4, sm: 4, lg: 3 }}>\n        <TileLogo\n          shape=\"square\"\n          variant={partner.featured ? 'green' : 'neutral'}\n          logo={partner.logo}\n          alt={partner.name}\n          href={partner.url}\n        />\n      </PageGridCol>\n    ))}\n  </PageGridRow>\n</PageGrid>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"rectangle-banner-layout","__idx":15},"children":["Rectangle Banner Layout"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<PageGrid>\n  <PageGridRow>\n    <PageGridCol span={{ base: 4, sm: 8, lg: 12 }}>\n      <div className=\"d-flex flex-column gap-4\">\n        <TileLogo\n          shape=\"rectangle\"\n          variant=\"green\"\n          logo=\"/logos/featured-partner.svg\"\n          alt=\"Featured Partner\"\n          href=\"/partners/featured\"\n        />\n        <TileLogo\n          shape=\"rectangle\"\n          variant=\"neutral\"\n          logo=\"/logos/partner.svg\"\n          alt=\"Partner\"\n          href=\"/partners/partner\"\n        />\n      </div>\n    </PageGridCol>\n  </PageGridRow>\n</PageGrid>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"best-practices","__idx":16},"children":["Best Practices"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"choosing-the-right-shape","__idx":17},"children":["Choosing the Right Shape"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Use Square"]}," when:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Creating grid layouts"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Displaying multiple logos in equal-sized tiles"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Maintaining consistent visual rhythm"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Logo aspect ratios vary significantly"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Use Rectangle"]}," when:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Creating horizontal banner layouts"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Displaying logos in a single column"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Need wider display area for horizontal logos"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Creating featured partner sections"]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"choosing-the-right-color-variant","__idx":18},"children":["Choosing the Right Color Variant"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Use Neutral"]}," for:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Standard partner showcases"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["General logo grids"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Non-featured content"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Maintaining visual balance"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Use Green"]}," for:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Featured or primary partners"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Creating visual hierarchy"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Highlighting important integrations"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Drawing user attention"]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"logo-image-guidelines","__idx":19},"children":["Logo Image Guidelines"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Format:"]}," Use SVG when possible for crisp rendering at all sizes"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Aspect Ratio:"]}," Logos should fit within the padded bounding box"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Size:"]}," Logo size is variable (designer recommendation) - ensure logos scale appropriately"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Contrast:"]}," Ensure logos have sufficient contrast with background colors"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Alt Text:"]}," Always provide meaningful, descriptive alt text"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"layout-recommendations","__idx":20},"children":["Layout Recommendations"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Square Grids:"]}," Use PageGrid with responsive column spans (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["span={{ base: 4, sm: 4, lg: 3 }}"]},")"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Rectangle Layouts:"]}," Use full-width containers (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["span={{ base: 4, sm: 8, lg: 12 }}"]},")"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Spacing:"]}," Use PageGrid's built-in gap spacing for consistent layouts"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Responsive:"]}," Let the component handle responsive sizing automatically"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"interaction-patterns","__idx":21},"children":["Interaction Patterns"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Links vs Buttons:"]}," Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["href"]}," for navigation, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onClick"]}," for actions (modals, dropdowns)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Disabled State:"]}," Use for \"coming soon\" partners or unavailable content"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Accessibility:"]}," Always provide meaningful alt text and ensure keyboard navigation works"]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"accessibility-considerations","__idx":22},"children":["Accessibility Considerations"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"semantic-html","__idx":23},"children":["Semantic HTML"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component automatically renders as:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<a>"]}," when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["href"]}," is provided"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<button>"]}," when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onClick"]}," is provided or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["disabled"]}," is true"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"keyboard-navigation","__idx":24},"children":["Keyboard Navigation"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Tab:"]}," Navigates to the tile"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Enter/Space:"]}," Activates the tile (for buttons)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Focus Ring:"]}," Visible 2px border appears on keyboard focus"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"screen-readers","__idx":25},"children":["Screen Readers"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Always provide meaningful ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["alt"]}," text describing the partner/brand"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Disabled tiles communicate their state via ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["aria-disabled"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Links include proper ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["href"]}," attributes for navigation context"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"color-contrast","__idx":26},"children":["Color Contrast"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["All component states meet WCAG AA contrast requirements"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Ensure logo images have sufficient contrast with background colors"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Test in both light and dark modes"]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"design-references","__idx":27},"children":["Design References"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Square SM:"]}," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://www.figma.com/design/12qdRGujqX7DWuY8IYmAnh/Tile---Logo?node-id=4047-907&m=dev"},"children":["Figma - Square SM"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Square MD:"]}," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://www.figma.com/design/12qdRGujqX7DWuY8IYmAnh/Tile---Logo?node-id=4047-819&m=dev"},"children":["Figma - Square MD"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Square LG:"]}," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://www.figma.com/design/12qdRGujqX7DWuY8IYmAnh/Tile---Logo?node-id=4047-495&m=dev"},"children":["Figma - Square LG"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Rectangle SM:"]}," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://www.figma.com/design/12qdRGujqX7DWuY8IYmAnh/Tile---Logo?node-id=4049-1350&m=dev"},"children":["Figma - Rectangle SM"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Rectangle MD:"]}," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://www.figma.com/design/12qdRGujqX7DWuY8IYmAnh/Tile---Logo?node-id=4049-1329&m=dev"},"children":["Figma - Rectangle MD"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Rectangle LG:"]}," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://www.figma.com/design/12qdRGujqX7DWuY8IYmAnh/Tile---Logo?node-id=4049-1309&m=dev"},"children":["Figma - Rectangle LG"]}]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"common-patterns","__idx":28},"children":["Common Patterns"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"partner-showcase-grid","__idx":29},"children":["Partner Showcase Grid"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<PageGrid>\n  <PageGridRow>\n    {partners.map((partner) => (\n      <PageGridCol key={partner.id} span={{ base: 4, sm: 4, lg: 3 }}>\n        <TileLogo\n          shape=\"square\"\n          variant=\"neutral\"\n          logo={partner.logo}\n          alt={partner.name}\n          href={`/partners/${partner.slug}`}\n        />\n      </PageGridCol>\n    ))}\n  </PageGridRow>\n</PageGrid>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"featured-partners-section","__idx":30},"children":["Featured Partners Section"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<PageGrid>\n  <PageGridRow>\n    <PageGridCol span={12}>\n      <h2>Featured Partners</h2>\n      <PageGridRow>\n        {featuredPartners.map((partner) => (\n          <PageGridCol key={partner.id} span={{ base: 4, sm: 4, lg: 3 }}>\n            <TileLogo\n              shape=\"square\"\n              variant=\"green\"\n              logo={partner.logo}\n              alt={partner.name}\n              href={`/partners/${partner.slug}`}\n            />\n          </PageGridCol>\n        ))}\n      </PageGridRow>\n    </PageGridCol>\n  </PageGridRow>\n</PageGrid>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"partner-banner-list","__idx":31},"children":["Partner Banner List"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<PageGrid>\n  <PageGridRow>\n    <PageGridCol span={{ base: 4, sm: 8, lg: 12 }}>\n      <div className=\"d-flex flex-column gap-4\">\n        {partners.map((partner) => (\n          <TileLogo\n            key={partner.id}\n            shape=\"rectangle\"\n            variant={partner.featured ? 'green' : 'neutral'}\n            logo={partner.logo}\n            alt={partner.name}\n            href={`/partners/${partner.slug}`}\n          />\n        ))}\n      </div>\n    </PageGridCol>\n  </PageGridRow>\n</PageGrid>\n","lang":"tsx"},"children":[]}]},"headings":[{"value":"TileLogo Component - Usage Guidelines","id":"tilelogo-component---usage-guidelines","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"Shape Variants","id":"shape-variants","depth":2},{"value":"Square Shape (Default)","id":"square-shape-default","depth":3},{"value":"Rectangle Shape","id":"rectangle-shape","depth":3},{"value":"Color Variants","id":"color-variants","depth":2},{"value":"Neutral Variant (Default)","id":"neutral-variant-default","depth":3},{"value":"Green Variant","id":"green-variant","depth":3},{"value":"Theme and interactive colors","id":"theme-and-interactive-colors","depth":3},{"value":"Component API","id":"component-api","depth":2},{"value":"Usage Examples","id":"usage-examples","depth":2},{"value":"Basic Usage with Link","id":"basic-usage-with-link","depth":3},{"value":"Square Shape with Click Handler","id":"square-shape-with-click-handler","depth":3},{"value":"Rectangle Shape for Banners","id":"rectangle-shape-for-banners","depth":3},{"value":"Logo Grid with Mixed Variants","id":"logo-grid-with-mixed-variants","depth":3},{"value":"Rectangle Banner Layout","id":"rectangle-banner-layout","depth":3},{"value":"Best Practices","id":"best-practices","depth":2},{"value":"Choosing the Right Shape","id":"choosing-the-right-shape","depth":3},{"value":"Choosing the Right Color Variant","id":"choosing-the-right-color-variant","depth":3},{"value":"Logo Image Guidelines","id":"logo-image-guidelines","depth":3},{"value":"Layout Recommendations","id":"layout-recommendations","depth":3},{"value":"Interaction Patterns","id":"interaction-patterns","depth":3},{"value":"Accessibility Considerations","id":"accessibility-considerations","depth":2},{"value":"Semantic HTML","id":"semantic-html","depth":3},{"value":"Keyboard Navigation","id":"keyboard-navigation","depth":3},{"value":"Screen Readers","id":"screen-readers","depth":3},{"value":"Color Contrast","id":"color-contrast","depth":3},{"value":"Design References","id":"design-references","depth":2},{"value":"Common Patterns","id":"common-patterns","depth":2},{"value":"Partner Showcase Grid","id":"partner-showcase-grid","depth":3},{"value":"Featured Partners Section","id":"featured-partners-section","depth":3},{"value":"Partner Banner List","id":"partner-banner-list","depth":3}],"frontmatter":{"seo":{"title":"TileLogo Component - Usage Guidelines"}},"editPage":{"to":"https://github.com/XRPLF/xrpl-dev-portal/tree/master/shared/components/TileLogo/TileLogo.md"},"lastModified":"2026-04-09T22:46:44.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/ja/shared/components/tilelogo/tilelogo-2","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}