{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"FeatureSingleTopic Pattern","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":"featuresingletopic-pattern","__idx":0},"children":["FeatureSingleTopic Pattern"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A feature section pattern that pairs a title/description with a media element in a two-column layout. Supports two variants (default, accentSurface) and two orientations (left, right)."]},{"$$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":["Responsive two-column layout (image + content) that stacks on smaller screens"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Two background variants: default (no background) and accentSurface (gray title background)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Two orientations: left (image left) and right (image right)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Flexible button layout supporting 1-5 links with automatic variant assignment"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Responsive image aspect ratios per Figma design"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Full dark mode support"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Uses PageGrid for consistent spacing"]}]},{"$$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 { FeatureSingleTopic } from 'shared/sections/FeatureSingleTopic';\n\n<FeatureSingleTopic\n  variant=\"default\"\n  orientation=\"left\"\n  title=\"Developer Spotlight\"\n  description=\"Are you building a peer-to-peer payments solution?\"\n  media={{\n    src: \"/img/feature-image.png\",\n    alt: \"Feature image\"\n  }}\n  links={[\n    { label: \"Get Started\", href: \"/start\" },\n    { label: \"Learn More\", href: \"/learn\" }\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":"Default"},"children":["Default"]},{"$$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":["variant"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'default' | 'accentSurface'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'default'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Background variant for title section"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["orientation"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'left' | 'right'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'left'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Image position relative to content"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["title"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["required"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Feature title (heading-md typography)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["description"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Feature description (label-l typography)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buttons"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ButtonConfig[]"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["[]"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Array of button configurations (1-5 supported)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["singleButtonEmphasis"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'strong' | 'standard'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'strong'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Emphasis for a lone button"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["media"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{ src: string; alt: string }"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["required"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Image configuration"]}]},{"$$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":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Additional CSS classes"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"buttonconfig","__idx":4},"children":["ButtonConfig"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"interface ButtonConfig {\n  label: string;\n  href?: string;\n  onClick?: () => void;\n}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Note:"]}," Button configurations are handled by the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ButtonGroup"]}," component. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/es-es/shared/patterns/buttongroup/readme"},"children":["ButtonGroup documentation"]}," for more details."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"button-behavior","__idx":5},"children":["Button Behavior"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Emphasis follows the button count:"]},{"$$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":"Count"},"children":["Count"]},{"$$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":["1 button"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["singleButtonEmphasis"]}," (default ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["strong"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["2 buttons"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["strong"]}," + ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["subtle"]},", side by side"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["3-5 buttons"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["all ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["subtle"]},", stacked"]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Note:"]}," The component supports a maximum of 5 buttons. Additional buttons beyond 5 will trigger a validation warning in development mode and will be ignored. On mobile, the first two buttons (Primary + Tertiary) remain side by side."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"variants","__idx":6},"children":["Variants"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"default","__idx":7},"children":["Default"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["No background on the title section. Clean, minimal look."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<FeatureSingleTopic variant=\"default\" ... />\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"accentsurface","__idx":8},"children":["AccentSurface"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Gray background (#E6EAF0 light / #CAD4DF dark) on the title section."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<FeatureSingleTopic variant=\"accentSurface\" ... />\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"orientation","__idx":9},"children":["Orientation"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"left-default","__idx":10},"children":["Left (default)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Image on left, content on right on desktop."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"right","__idx":11},"children":["Right"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Image on right, content on left on desktop."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Note:"]}," On mobile/tablet, content always appears above image regardless of orientation."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"responsive-behavior","__idx":12},"children":["Responsive Behavior"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"desktop-992px","__idx":13},"children":["Desktop (≥992px)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Side-by-side layout: 7-column image, 5-column content"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Fixed height: 565px"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Image aspect ratio: 701/561"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"tablet-768px---991px","__idx":14},"children":["Tablet (768px - 991px)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Stacked layout with 32px gap between sections"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Image aspect ratio: 16/9"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Content min-height: 320px"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"mobile-768px","__idx":15},"children":["Mobile (<768px)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Stacked layout with 24px gap between sections"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Image aspect ratio: 343/193"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Content min-height: 280px"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"css-classes","__idx":16},"children":["CSS Classes"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":".bds-feature-single-topic                    // Section container\n.bds-feature-single-topic--default           // Default variant modifier\n.bds-feature-single-topic--accentSurface     // AccentSurface variant modifier\n.bds-feature-single-topic__container         // PageGrid container\n.bds-feature-single-topic__row               // PageGrid row (uses flex-column-reverse flex-lg-row)\n.bds-feature-single-topic__media-col         // Media column (uses order-lg-1 or order-lg-2)\n.bds-feature-single-topic__content-col       // Content column (uses order-lg-1 or order-lg-2)\n.bds-feature-single-topic__media             // Media wrapper\n.bds-feature-single-topic__media-img         // Image element\n.bds-feature-single-topic__content           // Content wrapper\n.bds-feature-single-topic__title-section     // Title section\n.bds-feature-single-topic__title             // Title element\n.bds-feature-single-topic__description-section // Description + buttons wrapper\n.bds-feature-single-topic__description       // Description element\n"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Note:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Orientation logic is handled via Bootstrap utility classes (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["order-lg-1"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["order-lg-2"]},") applied dynamically in TSX"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Buttons are rendered by the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ButtonGroup"]}," component with its own class structure"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Mobile/tablet layout uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["flex-column-reverse"]}," to show content above image"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Desktop layout uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["flex-lg-row"]}," for side-by-side display"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"typography-tokens","__idx":17},"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":["Title"]},": 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":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Description"]},": Uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["label-l"]}," type token (Booton Light font)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Desktop: 16px / 23.2px line-height"]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"dark-mode","__idx":18},"children":["Dark Mode"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Full dark mode support with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["html.dark"]}," selector:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Section background"]},": #141414 (black)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Title (default variant)"]},": #FFFFFF (white)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Title (accentSurface)"]},": #141414 (black) on #CAD4DF background"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Description"]},": #FFFFFF (white)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"files","__idx":19},"children":["Files"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["FeatureSingleTopic.tsx"]}," - Main pattern component"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["FeatureSingleTopic.scss"]}," - Styles with 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":"design-references","__idx":20},"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/sg6T5EptbN0V2olfCSHzcx/Section-Feature---Single-Topic?node-id=18030-2250&m=dev"},"children":["Section Feature - Single Topic"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Showcase Page"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/about/feature-single-topic-showcase"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Component Location"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shared/sections/FeatureSingleTopic/"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"related-components","__idx":21},"children":["Related Components"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Button"]},": Used for CTA buttons"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["PageGrid"]},": Used for responsive grid layout"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"version-history","__idx":22},"children":["Version History"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["February 2026"]},": Initial implementation",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Two variants (default, accentSurface)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Two orientations (left, right)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Responsive image aspect ratios"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["1-5 link support with automatic button variant assignment"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Full dark mode support"]}]}]}]}]},"headings":[{"value":"FeatureSingleTopic Pattern","id":"featuresingletopic-pattern","depth":1},{"value":"Features","id":"features","depth":2},{"value":"Basic Usage","id":"basic-usage","depth":2},{"value":"Props","id":"props","depth":2},{"value":"ButtonConfig","id":"buttonconfig","depth":3},{"value":"Button Behavior","id":"button-behavior","depth":2},{"value":"Variants","id":"variants","depth":2},{"value":"Default","id":"default","depth":3},{"value":"AccentSurface","id":"accentsurface","depth":3},{"value":"Orientation","id":"orientation","depth":2},{"value":"Left (default)","id":"left-default","depth":3},{"value":"Right","id":"right","depth":3},{"value":"Responsive Behavior","id":"responsive-behavior","depth":2},{"value":"Desktop (≥992px)","id":"desktop-992px","depth":3},{"value":"Tablet (768px - 991px)","id":"tablet-768px---991px","depth":3},{"value":"Mobile (<768px)","id":"mobile-768px","depth":3},{"value":"CSS Classes","id":"css-classes","depth":2},{"value":"Typography Tokens","id":"typography-tokens","depth":2},{"value":"Dark Mode","id":"dark-mode","depth":2},{"value":"Files","id":"files","depth":2},{"value":"Design References","id":"design-references","depth":2},{"value":"Related Components","id":"related-components","depth":2},{"value":"Version History","id":"version-history","depth":2}],"frontmatter":{"seo":{"title":"FeatureSingleTopic Pattern"}},"editPage":{"to":"https://github.com/XRPLF/xrpl-dev-portal/tree/master/shared/sections/FeatureSingleTopic/README.md"},"lastModified":"2026-08-28T16:32:06.000Z","isTranslationFallback":true,"pagePropGetterError":{"message":"","name":""}},"slug":"/es-es/shared/sections/featuresingletopic/readme","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}