Any way to make the Title of a Lightning:Card into a hyperlink?

Question

I've got a lightning:card element that has the name of a record as its title and shows some key info of it in the body. I'd like the title to be a link to the record page of the record. I can't just put the tags inside the title, it won't let me. Is there any way to do that or am I out of luck there?

<lightning:card title="{!v.record.name}" iconName="standard:scan_card">
    <!-- record fields go here -->
</lightning:card>

Answer 1

I have not tried this myself, created on the fly from this link, but should work

<lightning:card iconName="standard:scan_card">
    <aura:set attribute="title">
        <a href="http://www.yahoo.com">{!v.myTitleName}</a>
    </aura:set>
    <!-- actions and body markup here -->
</lightning:card>

Answer 2

Note that Anchor Tag: <a> should not use href's according to the documentation (for your specific use case), and you should instead leverage native events such as force:navigateToSObject to redirect users towards record's as follows:

in your component:

<a onclick="{!c.handleClick}">link to record</a></p>

controller.js

({
    handleClick: function (component, event, helper) {
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId": component.get("v.recordId")
        });
        navEvt.fire();
    }
})

Answer 3

You can just add anchor tag before the lightning card tag.

<a href="www.google.com">
     <lightning:card title="{!v.record.name}" iconName="standard:scan_card">
        <!-- record fields go here -->
     </lightning:card>
</a>

Answer 4

Another option is to place your card within a lightning:button tag instead of an < a > tag. This stops all content being underlined when the mouse hovers over it.

<lightning:button variant="base" onclick="{!c.someFunctionName}">
     <lightning:card title="{!v.record.name}" iconName="standard:scan_card">
        <!-- record fields go here -->
     </lightning:card>
</lightning:button>

Answer 5

For LWC:

<lightning-card icon-name="standard:opportunity">
    <!-- this slot shows title as link -->
    <a slot="title" href="https://google.com">Link to Google</a>
</lightning-card>

For Aura:

<lightning:card iconName="standard:opportunity">
    <!-- this set shows title as link -->
    <aura:set attribute="title">
        <a href="http://www.google.com">Link to Google</a>
    </aura:set>
</lightning:card>

Answer 6

In Lightning Web Component i used the slot="title" to give an (anchor tag) such that the case number on the title of the lightning card becomes a hyperlink, which navigates the user, on click, to open that case in new window. {thisCase.CaseNumber}</a >

and in the JS import { LightningElement, api, track, wire } from "lwc"; import { NavigationMixin } from "lightning/navigation";

navigateToDetailPage() { this[NavigationMixin.Navigate]({ type: "standard__recordPage", attributes: { recordId: this.caseDetails.Id, objectApiName: "Case", actionName: "view" } }); }