{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"TextCard 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":"textcard-component","__idx":0},"children":["TextCard Component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A card component with a title at the top and description at the bottom. Used within the CardsTwoColumn pattern to display content in a 2×2 grid, but can also be used independently."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"features","__idx":1},"children":["Features"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["6 Color Variants"]},": Green, neutral-light, neutral-dark, lilac, yellow, and blue backgrounds"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Window shade overlay"]},": On ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["desktop (≥992px)"]},", hover animates a bottom-up overlay; ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["active"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":active"]},") shows the pressed overlay color"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Focus"]},": Keyboard ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Tab"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":focus-visible"]},") uses the same card surface as hover for neutral variants; mouse click (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":focus"]}," without ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":focus-visible"]},") keeps the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["default"]}," surface so that after release, ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["hover"]}," still shows the overlay when the pointer is still over the card"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Visited links"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<a>"]}," with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["href"]},"): When a link has been visited, ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["default"]}," card colors and a ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["hidden"]}," overlay apply until hover or active (see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#visited-state"},"children":["Visited state"]},"); rules are scoped to ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["html.light"]}]}," and ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["html.dark"]}]}," so neutrals match each theme"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Tablet & mobile"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<992px"]},"): Overlay ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["transition is off"]},"; hover / focus-visible ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["jump"]}," to the pressed overlay (same idea as TileLogo). ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["neutral-light"]}," uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-400"]},"; ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["neutral-dark"]}," uses ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-500"]}]}," so the two grays stay distinct on tap"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Responsive Design"]},": Adapts height and padding across breakpoints"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Optional Link"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["href"]}," renders an ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<a>"]},"; otherwise an ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<article>"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Flexible Content"]},": Title and description support ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ReactNode"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"usage","__idx":2},"children":["Usage"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"import { TextCard } from 'shared/components/TextCard';\n\n// Basic usage\n<TextCard\n  title=\"Institutions\"\n  description=\"Banks, asset managers, PSPs, and fintechs use XRPL to build financial products.\"\n  color=\"green\"\n/>\n\n// As a clickable card\n<TextCard\n  title=\"Developers\"\n  description=\"Build decentralized applications with comprehensive documentation.\"\n  href=\"/developers\"\n  color=\"lilac\"\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":["title"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ReactNode"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["required"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Card title (heading-lg 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":["ReactNode"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Card description (body-l typography)"]}]},{"$$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":["Optional link URL (renders ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<a>"]}," instead of ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<article>"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TextCardColor"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'neutral-light'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Background color variant"]}]},{"$$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":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether the card is disabled"]}]},{"$$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":"textcardcolor","__idx":4},"children":["TextCardColor"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"type TextCardColor = 'green' | 'neutral-light' | 'neutral-dark' | 'lilac' | 'yellow' | 'blue';\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"responsive-behavior","__idx":5},"children":["Responsive Behavior"]},{"$$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":"Height"},"children":["Height"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Padding"},"children":["Padding"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Desktop (≥992px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["340px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["24px"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Tablet (576–991px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["309px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["20px"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Mobile (<576px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["274px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["16px"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"interaction-model","__idx":6},"children":["Interaction model"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Default"]},": Card background color from the variant; overlay is clipped off (shade “up”)."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Hover"]}," (desktop): Window shade reveals the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["hover"]}," overlay color (see tables below)."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Active"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":active"]},"): Overlay uses the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["pressed"]}," color; shade stays fully revealed while the pointer is down."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Keyboard focus"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":focus-visible"]},"): For ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["neutral-light"]}," and ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["neutral-dark"]},", the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["card"]}," background matches the hover surface token; overlay behavior matches hover. Other variants keep the default card background; outline follows focus rules below."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Mouse focus"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":focus"]}," without ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":focus-visible"]},"): Neutral variants keep the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["default"]}," card background so releasing a click while still hovering does ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["not"]}," paint the whole card as hover-only— the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["overlay"]}," continues to show hover via ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":hover"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Tablet / mobile"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["max-width"]}," below ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lg"]},"): No clip-path animation; hover/focus-visible shows the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["pressed"]}," overlay color immediately. Neutral-dark uses ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-500"]}]}," on tap; neutral-light uses ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-400"]}]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"visited-state","__idx":7},"children":["Visited state"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For linked cards (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["href"]}," set), after the URL is visited:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Light theme"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["html.light"]},"): ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["a"]}," ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["visited"]}," styles reset to the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["light-mode default"]}," background for that variant and ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["hide"]}," the overlay until ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":hover"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":active"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Dark theme"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["html.dark"]},"): Same idea with ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["dark-mode default"]}," surfaces (e.g. neutral-light ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-300"]}]},", neutral-dark ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-400"]}]},")."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Implementation: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TextCard.scss"]}," — visited rules live ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["only"]}," under ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["html.light { … }"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["html.dark { … }"]}," so neutral grays never mix themes."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"color-variants--states","__idx":8},"children":["Color Variants & States"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Colors below refer to the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["card"]}," default background, ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["overlay"]}," fill (hover / focus ring of the shade), and ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["pressed"]}," overlay. The overlay is the animated layer; default column is the base card color."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"light-mode","__idx":9},"children":["Light Mode"]},{"$$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":"Variant"},"children":["Variant"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Default"},"children":["Default"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Hover (overlay)"},"children":["Hover (overlay)"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Focus keyboard (neutral) / overlay others"},"children":["Focus keyboard (neutral) / overlay others"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Pressed (overlay)"},"children":["Pressed (overlay)"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["green"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$green-200"]}," (#70EE97)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$green-300"]}," (#21E46B)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$green-300"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$green-400"]}," (#0DAA3E)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["neutral-light"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-200"]}," (#E6EAF0)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-300"]}," (#CAD4DF)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Card bg ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-300"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-400"]}," (#8A919A)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["neutral-dark"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-300"]}," (#CAD4DF)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-200"]}," (#E6EAF0)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Card bg ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-200"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-400"]}," (#8A919A)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lilac"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$lilac-200"]}," (#D9CAFF)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$lilac-300"]}," (#C0A7FF)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$lilac-300"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$lilac-400"]}," (#7649E3)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["yellow"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$yellow-100"]}," (#F3F1EB)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$yellow-200"]}," (#E6F1A7)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$yellow-200"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$yellow-300"]}," (#DBF15E)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["blue"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$blue-100"]}," (#EDF4FF)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$blue-200"]}," (#93BFF1)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$blue-200"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$blue-300"]}," (#428CFF)"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"dark-mode","__idx":10},"children":["Dark Mode"]},{"$$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":"Variant"},"children":["Variant"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Default"},"children":["Default"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Hover (overlay)"},"children":["Hover (overlay)"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Focus keyboard (neutral) / overlay others"},"children":["Focus keyboard (neutral) / overlay others"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Pressed (overlay)"},"children":["Pressed (overlay)"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["green"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$green-200"]}," (#70EE97)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$green-300"]}," (#21E46B)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$green-300"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$green-400"]}," (#0DAA3E)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["neutral-light"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-300"]}," (#CAD4DF)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-200"]}," (#E6EAF0)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Card bg ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-200"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-400"]}," (#8A919A)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["neutral-dark"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-400"]}," (#8A919A)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-300"]}," (#CAD4DF)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Card bg ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-300"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-500"]}," (#72777E)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lilac"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$lilac-200"]}," (#D9CAFF)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$lilac-300"]}," (#C0A7FF)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$lilac-300"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$lilac-400"]}," (#7649E3)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["yellow"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$yellow-100"]}," (#F3F1EB)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$yellow-200"]}," (#E6F1A7)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$yellow-200"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$yellow-300"]}," (#DBF15E)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["blue"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$blue-100"]}," (#EDF4FF)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$blue-200"]}," (#93BFF1)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$blue-200"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$blue-300"]}," (#428CFF)"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"disabled-state","__idx":11},"children":["Disabled State"]},{"$$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":"Mode"},"children":["Mode"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Background"},"children":["Background"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Text"},"children":["Text"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Light"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-100"]}," (#F0F3F7)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-500"]}," (#72777E)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Dark"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["rgba($gray-500, 0.3)"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Default text color"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"focus-outline","__idx":12},"children":["Focus Outline"]},{"$$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":"Mode"},"children":["Mode"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Focus Outline"},"children":["Focus Outline"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Light Mode"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["2px solid black outline with 2px offset"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Dark Mode"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["2px solid white outline with 2px offset"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"css-classes","__idx":13},"children":["CSS Classes"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":".bds-text-card                    // Base card container\n.bds-text-card--green             // Green variant\n.bds-text-card--neutral-light     // Neutral light variant\n.bds-text-card--neutral-dark      // Neutral dark variant\n.bds-text-card--lilac             // Lilac variant\n.bds-text-card--yellow            // Yellow variant\n.bds-text-card--blue              // Blue variant\n.bds-text-card--disabled         // Disabled modifier\n.bds-text-card__overlay           // Window shade overlay\n.bds-text-card__title             // Title (h3)\n.bds-text-card__description       // Description (p)\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"typography","__idx":14},"children":["Typography"]},{"$$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":["h-lg"]}," class (heading-lg, Tobias Light font)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Desktop: 48px / 52.8px line-height"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Tablet: 42px / 46.2px line-height"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Mobile: 36px / 39.6px line-height"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Description"]},": Uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["body-l"]}," class (Booton Light font)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["All breakpoints: 18px / 26.1px line-height"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Max width: 478px (from Figma)"]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":15},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"all-color-variants","__idx":16},"children":["All Color Variants"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<TextCard title=\"Green\" description=\"$green-200\" color=\"green\" />\n<TextCard title=\"Neutral Light\" description=\"$gray-200\" color=\"neutral-light\" />\n<TextCard title=\"Neutral Dark\" description=\"$gray-300\" color=\"neutral-dark\" />\n<TextCard title=\"Lilac\" description=\"$lilac-200\" color=\"lilac\" />\n<TextCard title=\"Yellow\" description=\"$yellow-100\" color=\"yellow\" />\n<TextCard title=\"Blue\" description=\"$blue-100\" color=\"blue\" />\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"disabled-card","__idx":17},"children":["Disabled Card"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<TextCard\n  title=\"Disabled Card\"\n  description=\"This card is disabled and cannot be interacted with.\"\n  color=\"neutral-light\"\n  disabled\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"within-cardstwocolumn-pattern","__idx":18},"children":["Within CardsTwoColumn Pattern"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"import { CardsTwoColumn } from 'shared/sections/CardsTwoColumn';\n\n<CardsTwoColumn\n  title=\"Section Title\"\n  description=\"Section description text.\"\n  cards={[\n    { title: \"Card 1\", description: \"Description 1\", color: \"lilac\" },\n    { title: \"Card 2\", description: \"Description 2\", color: \"neutral-light\" },\n    { title: \"Card 3\", description: \"Description 3\", color: \"neutral-dark\" },\n    { title: \"Card 4\", description: \"Description 4\", color: \"green\" }\n  ]}\n/>\n","lang":"tsx"},"children":[]},{"$$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":["TextCard.tsx"]}," - Component implementation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TextCard.scss"]}," - Styles (variants, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["html.light"]}," / ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["html.dark"]},", visited, breakpoint behavior)"]},{"$$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":["TextCard.md"]}," - This documentation"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"related-components","__idx":20},"children":["Related Components"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["CardsTwoColumn"]},": Pattern that uses TextCard in a 2×2 grid (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shared/sections/CardsTwoColumn"]},")"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"design-references","__idx":21},"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/MP5gjNp7yPBnKBKleb8LRL/Section-Cards---Two-Column"},"children":["Section Cards - Two Column"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Showcase"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/showcase/cards-two-column"]}," (see ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["showcase/cards-two-column.page.tsx"]},")"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Component Location"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shared/components/TextCard/"]}]}]}]},"headings":[{"value":"TextCard Component","id":"textcard-component","depth":1},{"value":"Features","id":"features","depth":2},{"value":"Usage","id":"usage","depth":2},{"value":"Props","id":"props","depth":2},{"value":"TextCardColor","id":"textcardcolor","depth":3},{"value":"Responsive Behavior","id":"responsive-behavior","depth":2},{"value":"Interaction model","id":"interaction-model","depth":2},{"value":"Visited state","id":"visited-state","depth":2},{"value":"Color Variants & States","id":"color-variants--states","depth":2},{"value":"Light Mode","id":"light-mode","depth":3},{"value":"Dark Mode","id":"dark-mode","depth":3},{"value":"Disabled State","id":"disabled-state","depth":3},{"value":"Focus Outline","id":"focus-outline","depth":3},{"value":"CSS Classes","id":"css-classes","depth":2},{"value":"Typography","id":"typography","depth":2},{"value":"Examples","id":"examples","depth":2},{"value":"All Color Variants","id":"all-color-variants","depth":3},{"value":"Disabled Card","id":"disabled-card","depth":3},{"value":"Within CardsTwoColumn Pattern","id":"within-cardstwocolumn-pattern","depth":3},{"value":"Files","id":"files","depth":2},{"value":"Related Components","id":"related-components","depth":2},{"value":"Design References","id":"design-references","depth":2}],"frontmatter":{"seo":{"title":"TextCard Component"}},"editPage":{"to":"https://github.com/XRPLF/xrpl-dev-portal/tree/master/shared/components/TextCard/TextCard.md"},"lastModified":"2026-04-10T23:33:25.000Z","isTranslationFallback":true,"pagePropGetterError":{"message":"","name":""}},"slug":"/es-es/shared/components/textcard/textcard-2","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}