2

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>
10

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>
0
3

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();
    }
})
0

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>
0

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>
0

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>
-1

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" } }); }

1
  • 2
    This question is about Lightning Aura Components, rather than Lightning Web Components. Please use the formatting tools in the editor to make sure any code you share is formatted correctly. Thanks!
    – David Reed
    Sep 21 '20 at 21:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.