"]},"."," ","Use this when you're placing the card inside your own layout."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Grid column"]}," — when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["gridColSpan"]}," is provided, the card renders as"," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PageGrid.Col as=\"li\""]}," with the modifier class"," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-card-text-icon-card--grid-col"]},". The card ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["is"]}," the grid column, so it must"," ","sit inside a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PageGrid.Row as=\"ul\""]},"."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This is how ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/ja/shared/sections/cardstextgrid/readme"},"children":["CardsTextGrid"]}," and"," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/ja/shared/sections/cardsicongrid/readme"},"children":["CardsIconGrid"]}," consume it — both pass"," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["gridColSpan={{ base: 4, md: 4, lg: 6 }}"]},"."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"
\n \n\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"heading-levels","__idx":10},"children":["Heading levels"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["headingAs"]}," defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'h3'"]},". Because these cards are usually rendered under a"," ","section heading, set it explicitly when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["h3"]}," would skip a level:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"
\n","lang":"tsx"},"children":[]},{"$$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 {icon && ( \n
\n )}\n
{heading}\n
\n
\n {description}\n
\n\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"responsive-sizing","__idx":12},"children":["Responsive Sizing"]},{"$$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":"Icon Size"},"children":["Icon Size"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Padding"},"children":["Padding"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Gap"},"children":["Gap"]}]}]},{"$$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":["32px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["16px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["16px"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["MD (576px - 991px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["36px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["20px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["20px"]}]},{"$$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":["32px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["24px"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"files","__idx":13},"children":["Files"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CardTextIconCard.tsx"]}," - React component with TypeScript"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CardTextIconCard.scss"]}," - Styles 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":"import","__idx":14},"children":["Import"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"import { CardTextIconCard } from 'shared/components/CardTextIcon';\n// or\nimport { CardTextIconCard, type CardTextIconCardProps } from 'shared/components/CardTextIcon';\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"design-system","__idx":15},"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."]}]},"headings":[{"value":"CardTextIconCard Component","id":"cardtexticoncard-component","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"Features","id":"features","depth":2},{"value":"Usage","id":"usage","depth":2},{"value":"Basic Usage","id":"basic-usage","depth":3},{"value":"With Inline Link in Description","id":"with-inline-link-in-description","depth":3},{"value":"With Aspect Ratio","id":"with-aspect-ratio","depth":3},{"value":"Props","id":"props","depth":2},{"value":"CardTextIconCardProps","id":"cardtexticoncardprops","depth":3},{"value":"Grid integration","id":"grid-integration","depth":2},{"value":"Heading levels","id":"heading-levels","depth":3},{"value":"Component Structure","id":"component-structure","depth":2},{"value":"Responsive Sizing","id":"responsive-sizing","depth":2},{"value":"Files","id":"files","depth":2},{"value":"Import","id":"import","depth":2},{"value":"Design System","id":"design-system","depth":2}],"frontmatter":{"seo":{"title":"CardTextIconCard Component"}},"editPage":{"to":"https://github.com/XRPLF/xrpl-dev-portal/tree/master/shared/components/CardTextIcon/README.md"},"lastModified":"2026-08-18T23:49:10.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/ja/shared/components/cardtexticon/readme","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}