diff --git a/components/cards.mdx b/components/cards.mdx index 1c7c2a679..10dbb84be 100644 --- a/components/cards.mdx +++ b/components/cards.mdx @@ -74,6 +74,22 @@ You can customize the call-to-action text and control whether an arrow appears. ``` +### Cards with nested links + +Cards with an `href` can contain links in their content. Clicking a nested link navigates to that link's destination, while clicking anywhere else on the card navigates to the card's `href`. Text inside cards is selectable. + + + Learn more in the [Columns documentation](/components/columns). Clicking this link navigates + directly, while clicking elsewhere on the card also navigates to the Columns page. + + +```mdx Card with nested link + + Learn more in the [Columns documentation](/components/columns). Clicking this link navigates + directly, while clicking elsewhere on the card also navigates to the Columns page. + +``` + ## Group cards Use the [Columns component](/components/columns) to organize multiple cards side by side. The Columns component supports one to four columns and automatically adjusts for smaller screens. @@ -111,7 +127,7 @@ Use the [Columns component](/components/columns) to organize multiple cards side - URL to navigate to when the card is clicked. + URL to navigate to when the card is clicked. Links inside the card's content navigate independently—clicking a nested link goes to that link's destination, while clicking elsewhere on the card navigates to this URL.