Support displaying an icon in <LinkCard>

[bugzpodder]

What version of starlight are you using?

latest

What is your idea?

It seems Card supports icon prop but LinkCard doesn't?

Maybe we should combine Card and LinkedCard?

Why is this feature necessary?

I think it's common to have a LinkedCard with an icon?

Do you have examples of this feature in other projects?

https://bugzpodder.github.io/pysandbox/ (I have a LinkedCard but no icon)

would it look good with this green icon?

Participation

• I am willing to submit a pull request for this issue.

[jsparkdev]

The LinkCard component doesn't seem to support icon insertion.

How about using the <a> tag within the Card component instead of LinkCard?

[lschierer]

You can do that, but the link target ends up only being the elements inside the card, whereas with LinkCard, the entire card acts like a button. The user experience is very different.

[AutonomousCat]

+1
I feel like the default arrow icon of a LinkCard sorta symbolizes it goes to a page in the same website (i.e, pointing to somewhere else on the same site). I'd like to replace it with the universal symbol for an external website (you know, the square-ish window one).

[ehakan]

Would like to be able to this as well. I like using LinkCard for links that need to be "in your face", and those usually link to other repositories, external documentation.

[kmalloy24]

I ended up copying the component locally and using type assertions for the icon names I wanted (otherwise you get a TS build error)

index.astro

import IconLinkCard from "../components/IconLinkCard.astro";

 <IconLinkCard
  title="Starlight"
  href="https://starlight.astro.build/"
  target="_blank"
  icon="external"
  iconSize="1.333em"
  />

IconLinkCard.astro

---
import { Icon } from '@astrojs/starlight/components';
import type { HTMLAttributes } from 'astro/types';

interface Props extends Omit<HTMLAttributes<'a'>, 'title'> {
	title: string;
	description?: string;
	icon?: string;
	iconColor?: string;
	iconSize?: string;
}

const { title, description, icon, iconColor, iconSize, ...attributes } = Astro.props;
---

<div class="sl-link-card">
	<span class="sl-flex stack">
		<a {...attributes}>
			<span class="title" set:html={title} />
		</a>
		{description && <span class="description" set:html={description} />}
	</span>
    {icon && <Icon name={icon as "external" | "star" | "rocket"} color={iconColor} size={iconSize} />}
</div>

<style>
	.sl-link-card {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 0.5rem;
		border: 1px solid var(--sl-color-gray-5);
		border-radius: 0.5rem;
		padding: 1rem;
		box-shadow: var(--sl-shadow-sm);
		position: relative;
	}

	a {
		text-decoration: none;
		line-height: var(--sl-line-height-headings);
	}

	/* a11y fix for https://github.com/withastro/starlight/issues/487 */
	a::before {
		content: '';
		position: absolute;
		inset: 0;
	}

	.stack {
		flex-direction: column;
		gap: 0.5rem;
	}

	.title {
		color: var(--sl-color-white);
		font-weight: 600;
		font-size: var(--sl-text-lg);
	}

	.description {
		color: var(--sl-color-gray-3);
		line-height: 1.5;
	}

	.icon {
		color: var(--sl-color-gray-3);
	}

	/* Hover state */
	.sl-link-card:hover {
		background: var(--sl-color-gray-7, var(--sl-color-gray-6));
		border-color: var(--sl-color-gray-2);
	}

	.sl-link-card:hover .icon {
		color: var(--sl-color-white);
	}
</style>