{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"LinkTextCard 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":"linktextcard-component","__idx":0},"children":["LinkTextCard Component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A numbered card component displaying a heading, description, and call-to-action buttons."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["LinkTextCard is a pattern component designed for sequential content presentation. Each card displays a numbered label (01, 02, 03...), a heading, description text, and up to 2 action buttons. Perfect for feature lists, step-by-step guides, or numbered content sections."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"features","__idx":2},"children":["Features"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Sequential Numbering"]},": Auto-increments based on index prop with zero-padding (01, 02, 03...)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Minimal HTML Structure"]},": Flat DOM hierarchy for optimal performance"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["ButtonGroup Integration"]},": Supports up to 2 buttons (Primary + Tertiary layout)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Fixed Button Color"]},": Green buttons for brand consistency"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Light/Dark Mode"]},": Full theming support"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Responsive Design"]},": Adaptive spacing and typography across breakpoints"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Top Divider"]},": Border-top styling with theme-aware colors"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"usage","__idx":3},"children":["Usage"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-usage-2-buttons","__idx":4},"children":["Basic Usage (2 Buttons)"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"single-button","__idx":5},"children":["Single Button"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-click-handlers","__idx":6},"children":["With Click Handlers"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":" navigate('/api') },\n { label: \"See Examples\", href: \"/examples\" }\n ]}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"in-a-list","__idx":7},"children":["In a List"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"{features.map((feature, index) => (\n \n))}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"props","__idx":8},"children":["Props"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"linktextcardprops","__idx":9},"children":["LinkTextCardProps"]},{"$$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":["index"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["number"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Required"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Card index for numbering (displays as index + 1)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["heading"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Required"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Main heading text"]}]},{"$$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":["Required"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Description/body text"]}]},{"$$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":["Required"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Array of button configurations (max 2)"]}]},{"$$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-from-buttongroup","__idx":10},"children":["ButtonConfig (from ButtonGroup)"]},{"$$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":["label"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Required"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Button 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":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Link destination (renders as anchor)"]}]},{"$$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":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Click handler (renders as button)"]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Note"]},": Only the first 2 buttons will be rendered."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"component-structure","__idx":11},"children":["Component Structure"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"
  • \n
    \n

    01

    \n
    Fast Settlement and Low Fees
    \n
    \n
    \n

    Settle transactions in 3-5 seconds...

    \n \n
    \n
    • \n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Key Design Decisions:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["List Item Element"]},": Renders as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["
  • "]}," for semantic list markup"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Two-Section Layout"]},": Header (number + heading) and Content (description + buttons)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Border-Top Divider"]},": Applied directly to container (no separate element)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Typography Classes"]},": Uses existing ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["body-l"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sh-lg-l"]}," classes"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Flexbox Gap"]},": Responsive spacing via gap property"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["75% Width at MD+"]},": Content is constrained to 75% width on tablet and desktop"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"responsive-spacing","__idx":12},"children":["Responsive Spacing"]},{"$$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":"Card Gap"},"children":["Card Gap"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Header Gap"},"children":["Header Gap"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Content Gap"},"children":["Content Gap"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Padding Top"},"children":["Padding Top"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Padding Bottom"},"children":["Padding Bottom"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Base (< 576px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["24px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["8px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["16px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["8px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["24px"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["MD (576px - 991px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["32px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["12px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["24px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["12px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["32px"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["LG (≥ 992px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["40px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["16px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["32px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["16px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["40px"]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Card Gap"]},": Space between header and content sections"," ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Header Gap"]},": Space between number and heading"," ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Content Gap"]},": Space between description and ButtonGroup"," ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Padding Top"]},": Space from top border to content"," ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Padding Bottom"]},": Space after content (removed on last card)"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"styling","__idx":13},"children":["Styling"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"css-classes","__idx":14},"children":["CSS Classes"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-link-text-card"]}," - Main list item container with flexbox layout and border-top"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-link-text-card__header"]}," - Header section (number + heading)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-link-text-card__content"]}," - Content section (description + buttons)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Typography utilities: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["body-l"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sh-lg-l"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"color-variables","__idx":15},"children":["Color Variables"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-300"]}," - Border color (light mode)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-500"]}," - Number text color"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$white"]}," - Text color in dark mode (applied to entire card)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"number-formatting","__idx":16},"children":["Number Formatting"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component automatically formats numbers with zero-padding:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"index: 0 → \"01\"\nindex: 1 → \"02\"\nindex: 9 → \"10\"\nindex: 99 → \"100\"\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"button-behavior","__idx":17},"children":["Button Behavior"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"1-2-buttons","__idx":18},"children":["1-2 Buttons"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["1 button"]},": Renders as primary button"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["2 buttons"]},": First as primary, second as tertiary"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"3-buttons","__idx":19},"children":["3+ Buttons"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If more than 2 buttons are passed, only the first 2 will be rendered (automatically sliced)."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"files","__idx":20},"children":["Files"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["LinkTextCard.tsx"]}," - React component with TypeScript"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["LinkTextCard.scss"]}," - Minimal SCSS with BEM naming"]},{"$$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 file"]}]},{"$$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":["ButtonGroup"]},": Used for rendering action buttons"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Button"]},": Atomic button component used by ButtonGroup"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"import","__idx":22},"children":["Import"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"import { LinkTextCard } from 'shared/patterns/LinkTextCard';\n// or\nimport { LinkTextCard, type LinkTextCardProps } from 'shared/patterns/LinkTextCard';\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"design-system","__idx":23},"children":["Design System"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Part of the Brand Design System (BDS) with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-"]}," namespace prefix."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"best-practices","__idx":24},"children":["Best Practices"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Use Sequential Indices"]},": Pass indices 0, 1, 2... for proper numbering"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Limit Buttons"]},": Design works best with 1-2 buttons"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Clear Descriptions"]},": Keep descriptions concise but informative"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Consistent Length"]},": Try to keep similar text lengths across cards in a group"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"accessibility","__idx":25},"children":["Accessibility"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Semantic HTML: Renders as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["
  • "]}," for use within ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["
      "]}," lists"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Heading hierarchy: Uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["
      "]}," for card headings (adjust based on parent context)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Button labels should be descriptive"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Maintains focus order: number → heading → description → buttons"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Note on Heading Semantics"]},": The component uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["
      "]}," inside a list item, which is acceptable when the parent section has appropriate heading hierarchy. The heading level can be adjusted based on your specific use case."]}]},"headings":[{"value":"LinkTextCard Component","id":"linktextcard-component","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"Features","id":"features","depth":2},{"value":"Usage","id":"usage","depth":2},{"value":"Basic Usage (2 Buttons)","id":"basic-usage-2-buttons","depth":3},{"value":"Single Button","id":"single-button","depth":3},{"value":"With Click Handlers","id":"with-click-handlers","depth":3},{"value":"In a List","id":"in-a-list","depth":3},{"value":"Props","id":"props","depth":2},{"value":"LinkTextCardProps","id":"linktextcardprops","depth":3},{"value":"ButtonConfig (from ButtonGroup)","id":"buttonconfig-from-buttongroup","depth":3},{"value":"Component Structure","id":"component-structure","depth":2},{"value":"Responsive Spacing","id":"responsive-spacing","depth":2},{"value":"Styling","id":"styling","depth":2},{"value":"CSS Classes","id":"css-classes","depth":3},{"value":"Color Variables","id":"color-variables","depth":3},{"value":"Number Formatting","id":"number-formatting","depth":2},{"value":"Button Behavior","id":"button-behavior","depth":2},{"value":"1-2 Buttons","id":"1-2-buttons","depth":3},{"value":"3+ Buttons","id":"3-buttons","depth":3},{"value":"Files","id":"files","depth":2},{"value":"Related Components","id":"related-components","depth":2},{"value":"Import","id":"import","depth":2},{"value":"Design System","id":"design-system","depth":2},{"value":"Best Practices","id":"best-practices","depth":2},{"value":"Accessibility","id":"accessibility","depth":2}],"frontmatter":{"seo":{"title":"LinkTextCard Component"}},"editPage":{"to":"https://github.com/XRPLF/xrpl-dev-portal/tree/master/shared/patterns/LinkTextCard/README.md"},"lastModified":"2026-08-25T04:24:09.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/es-es/shared/patterns/linktextcard/readme","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}