Card Link — Reference

Look up the controls for Card Link and understand the markup, values and visual behavior they configure.

Card Link

Bootstrap 5 component. Add the component and configure its properties in the Inspector.

Card Link Properties

Name	Description
ID	Sets this element’s unique page identifier. Use a stable name such as projectSummary when another control, label or anchor must target it. Do not duplicate a static ID inside repeated markup; a component binding name and a form field’s submitted Name serve different purposes.
Class	Edits the element’s space-separated CSS class list. For example, add a project-defined class such as project-summary only when your stylesheet defines it. Preserve classes required by the component. A class name alone does not create CSS, load an extension or implement an event handler.
Link	Sets the anchor destination in href. Choose a real route/file or URL; a # placeholder does not create a page. For a link to a section, use # plus that element’s unique ID. Route selection and the optional Internal navigation behavior are separate decisions.
Internal	Marks the anchor for App Connect Routing navigation in the current page/view. It still uses href, and it requires a configured route/view to show the destination. It does not create a route or keep links synchronized after renaming files. Leave it off for external destinations and normal full-page navigation.
Target	Chooses the browser browsing context: _self uses the current context, _blank requests a new one, and _top targets the top-level context. Default leaves the attribute unset. Do not combine a new-context expectation with Internal routing: the installed routing click handler can intercept the link without checking target. Choices: Default, _blank (`_blank`), _top (`_top`), _self (`_self`).
Color	Options: Primary (text-primary), Primary Emphasis (text-primary-emphasis), Secondary (text-secondary), Secondary Emphasis (text-secondary-emphasis), Success (text-success), Success Emphasis (text-success-emphasis), Danger (text-danger), Danger Emphasis (text-danger-emphasis), Warning (text-warning), Warning Emphasis (text-warning-emphasis), Info (text-info), Info Emphasis (text-info-emphasis), Light (text-light), Light Emphasis (text-light-emphasis), Dark (text-dark), Dark Emphasis (text-dark-emphasis), Body (text-body), Body Emphasis (text-body-emphasis), Body Secondary (text-body-secondary), Body Tertiary (text-body-tertiary), Black (text-black), White (text-white), Black 50 (text-black-50), White 50 (text-white-50), Muted (deprecated) (text-muted) Default: "".
Action Toggle	Chooses the Bootstrap interaction started by this control. Button toggles its pressed/active presentation; Dropdown opens its associated menu. Collapse, Tab, List, Modal and Offcanvas need an existing target component. This does not create that target, submit a form or run a Server Connect action. Load Bootstrap 5 JavaScript and test the specific interaction. Choices: None, Button (`button`), Dropdown (`dropdown`), Collapse (`collapse`), Tab (`tab`), List (`list`), Modal (`modal`), Offcanvas (`offcanvas`).
Collapse	Selects the existing collapse target by its ID. The choices come from matching page elements (.collapse), not a fixed enum containing only None. Give the target a unique ID first; the editor writes # followed by that ID. For example, a modal named editDialog produces data-bs-target="#editDialog". This setting does not create the target or fill it with data.
Tab	Selects the existing tab target by its ID. The choices come from matching page elements (.tab-pane), not a fixed enum containing only None. Give the target a unique ID first; the editor writes # followed by that ID. For example, a modal named editDialog produces data-bs-target="#editDialog". This setting does not create the target or fill it with data.
List	Selects the existing list target by its ID. The choices come from matching page elements (.tab-pane), not a fixed enum containing only None. Give the target a unique ID first; the editor writes # followed by that ID. For example, a modal named editDialog produces data-bs-target="#editDialog". This setting does not create the target or fill it with data.
Modal	Selects the existing modal target by its ID. The choices come from matching page elements (.modal), not a fixed enum containing only None. Give the target a unique ID first; the editor writes # followed by that ID. For example, a modal named editDialog produces data-bs-target="#editDialog". This setting does not create the target or fill it with data.
Offcanvas	Selects the existing offcanvas target by its ID. The choices come from matching page elements (.offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm), not a fixed enum containing only None. Give the target a unique ID first; the editor writes # followed by that ID. For example, a modal named editDialog produces data-bs-target="#editDialog". This setting does not create the target or fill it with data.

Display

Name	Description
Hide on	Hides the element at selected viewport ranges by adding responsive display utilities. For example, hiding below MD produces d-none with a restoring display class at MD. The control uses the component’s normal display type when restoring it. This hides layout and content visually; it does not protect private data or stop a server endpoint being called. Options: Hide on mobile (xs), Hide on landscape mobile (sm), Hide on tablet (md), Hide on laptop (lg), Hide on desktop (xl), Hide on extra wide (xxl).
Print	Controls whether this element appears in printed output. Hide writes d-print-none. Show restores the component’s display type for print, such as d-print-block or d-print-table-row. For example, hide a navigation bar when printing a report. Check browser print preview because screen layout alone does not show this setting. Options: Show (d-print-block), Hide (d-print-none).
Visually Hidden	Adds visually-hidden: content remains available to assistive technologies while it is visually clipped. Use it for an accessible label that should not appear on screen, not for hiding private data. It is different from display:none, which also removes the element from layout and generally from the accessibility tree. Default: off.
Focusable	Adds visually-hidden-focusable, which hides the element until it or a descendant receives focus. A skip link is a typical example. The element must already be focusable, such as an anchor with href; this class does not add keyboard focusability. Do not combine it with an unconditional visually-hidden class, which would keep it hidden even when focused. Default: off.

Check your result

You can select a setting, apply its documented value and check the relevant effect on the page.