{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"SmallTilesSection 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":"smalltilessection-component","__idx":0},"children":["SmallTilesSection Component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A section component that displays multiple CardIcon components in a responsive grid layout. This component is tightly coupled to CardIcon and creates a grouping of card icons with consistent styling and behavior."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The SmallTilesSection component provides:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Responsive grid layout (1 column mobile, 2 tablet, 3 desktop)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Automatic spacer optimization for small card sets (≤8 cards)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Consistent variant application across all cards"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Semantic HTML structure with proper accessibility"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"basic-usage","__idx":2},"children":["Basic Usage"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"import { SmallTilesSection } from \"@/shared/components/SmallTilesSection/SmallTilesSection\";\n\nfunction MyComponent() {\n  const cards = [\n    {\n      icon: \"/icons/javascript.svg\",\n      iconAlt: \"JavaScript\",\n      label: \"JavaScript\",\n      href: \"/docs/javascript\",\n    },\n    {\n      icon: \"/icons/python.svg\",\n      iconAlt: \"Python\",\n      label: \"Python\",\n      href: \"/docs/python\",\n    },\n  ];\n\n  return (\n    <SmallTilesSection\n      headline=\"Language Tutorials\"\n      subtitle=\"Choose a language to get started\"\n      cardVariant=\"neutral\"\n      cards={cards}\n    />\n  );\n}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"props","__idx":3},"children":["Props"]},{"$$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":"Prop"},"children":["Prop"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Required"},"children":["Required"]},{"$$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":["headline"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["React.ReactNode"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Yes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Section headline displayed as h2"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["subtitle"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["React.ReactNode"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Optional subtitle text displayed below headline"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardVariant"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'neutral' | 'green'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Yes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Color variant applied to all cards in the section"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cards"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CardIconProps[]"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Yes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Array of card configurations (without variant prop)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["className"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Additional CSS classes for the section element"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["...rest"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["HTMLSectionElement attributes"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Any other HTML section element attributes"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"card-props","__idx":4},"children":["Card Props"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Each item in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cards"]}," array accepts all CardIcon props except ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["variant"]}," (which is controlled by ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardVariant"]},"):"]},{"$$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":"Prop"},"children":["Prop"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Required"},"children":["Required"]},{"$$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":["icon"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Yes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Icon image source (URL or path)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iconAlt"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Alt text for the icon image"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["label"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Yes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Card label text"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["href"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Link destination (renders as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<a>"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onClick"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["() => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Click handler (renders as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<button>"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["disabled"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Disabled state"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["className"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Additional CSS classes"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":5},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-usage-with-links","__idx":6},"children":["Basic Usage with Links"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<SmallTilesSection\n  headline=\"Development Tools\"\n  subtitle=\"Explore our available tools\"\n  cardVariant=\"neutral\"\n  cards={[\n    { icon: \"/icons/js.svg\", label: \"xrpl.js\", href: \"/docs/xrpl-js\" },\n    { icon: \"/icons/py.svg\", label: \"xrpl-py\", href: \"/docs/xrpl-py\" },\n    { icon: \"/icons/go.svg\", label: \"xrpl-go\", href: \"/docs/xrpl-go\" },\n  ]}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"without-subtitle","__idx":7},"children":["Without Subtitle"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<SmallTilesSection headline=\"Quick Links\" cardVariant=\"neutral\" cards={cards} />\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"green-variant","__idx":8},"children":["Green Variant"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<SmallTilesSection\n  headline=\"Featured Topics\"\n  subtitle=\"Recommended content to help you get started\"\n  cardVariant=\"green\"\n  cards={featuredCards}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"mixed-card-states","__idx":9},"children":["Mixed Card States"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Cards can have different interaction types within the same section:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<SmallTilesSection\n  headline=\"Mixed States Example\"\n  cardVariant=\"neutral\"\n  cards={[\n    { icon: \"/icon.svg\", label: \"Link Card\", href: \"/link\" },\n    { icon: \"/icon.svg\", label: \"Button Card\", onClick: () => handleClick() },\n    { icon: \"/icon.svg\", label: \"Disabled Card\", disabled: true },\n  ]}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"large-card-set-spacer-feature","__idx":10},"children":["Large Card Set (Spacer Feature)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When a section contains more than 8 cards, the component automatically adjusts the layout:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<SmallTilesSection\n  headline=\"All Topics\"\n  subtitle={`${largeCardSet.length} topics available`}\n  cardVariant=\"neutral\"\n  cards={largeCardSet} // 9+ cards\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"responsive-behavior","__idx":11},"children":["Responsive Behavior"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The grid automatically adjusts 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":"Layout"},"children":["Layout"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Mobile (< 576px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["1"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Single column stack"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Tablet (576px - 991px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["2"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Two column grid"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Desktop (≥ 992px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["3"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Three column grid"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"spacer-feature","__idx":12},"children":["Spacer Feature"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When card count is ≤8, the component uses a centered 2-column layout on large screens with automatic spacing. This ensures optimal visual alignment for smaller card sets."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"typescript-types","__idx":13},"children":["TypeScript Types"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"interface SmallTilesSectionProps\n  extends React.ComponentPropsWithoutRef<\"section\"> {\n  headline: React.ReactNode;\n  subtitle?: React.ReactNode;\n  cardVariant: \"neutral\" | \"green\";\n  cards: readonly Omit<CardIconProps, \"variant\">[];\n}\n\n// CardIconProps (without variant)\ninterface ConstrainedCardIconProps {\n  icon: string;\n  iconAlt?: string;\n  label: string;\n  href?: string;\n  onClick?: () => void;\n  disabled?: boolean;\n  className?: string;\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"best-practices","__idx":14},"children":["Best Practices"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Consistent Variants"]},": Use the same ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardVariant"]}," for all cards in a section to maintain visual consistency"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Stable Keys"]},": Cards with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["href"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["label"]}," properties will generate stable keys automatically"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Empty Arrays"]},": Component returns ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]}," if cards array is empty - no need to conditionally render"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Accessibility"]},": Ensure ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iconAlt"]}," is provided for meaningful icons to improve screen reader support"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Semantic Structure"]},": The component uses semantic HTML (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<section>"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<h2>"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<ul>"]},") for proper document structure"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"notes","__idx":15},"children":["Notes"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The component is tightly coupled to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CardIcon"]}," - all cards must use CardIcon props"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["All cards in a section share the same ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["variant"]}," for visual consistency"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The spacer feature (≤8 cards) only affects large screen layouts"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Component forwards refs, allowing you to attach refs to the section element"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Cards are memoized individually to optimize re-render performance"]}]}]},"headings":[{"value":"SmallTilesSection Component","id":"smalltilessection-component","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"Basic Usage","id":"basic-usage","depth":2},{"value":"Props","id":"props","depth":2},{"value":"Card Props","id":"card-props","depth":2},{"value":"Examples","id":"examples","depth":2},{"value":"Basic Usage with Links","id":"basic-usage-with-links","depth":3},{"value":"Without Subtitle","id":"without-subtitle","depth":3},{"value":"Green Variant","id":"green-variant","depth":3},{"value":"Mixed Card States","id":"mixed-card-states","depth":3},{"value":"Large Card Set (Spacer Feature)","id":"large-card-set-spacer-feature","depth":3},{"value":"Responsive Behavior","id":"responsive-behavior","depth":2},{"value":"Spacer Feature","id":"spacer-feature","depth":3},{"value":"TypeScript Types","id":"typescript-types","depth":2},{"value":"Best Practices","id":"best-practices","depth":2},{"value":"Notes","id":"notes","depth":2}],"frontmatter":{"seo":{"title":"SmallTilesSection Component"}},"editPage":{"to":"https://github.com/XRPLF/xrpl-dev-portal/tree/master/shared/sections/SmallTilesSection/SmallTilesSection.md"},"lastModified":"2026-02-23T23:00:18.000Z","isTranslationFallback":true,"pagePropGetterError":{"message":"","name":""}},"slug":"/es-es/shared/sections/smalltilessection/smalltilessection-1","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}