fix(content): distinguish prose links from CTA buttons
- add reusable Link and Button MDX components - convert source-verified page CTAs to explicit buttons - match live-site prose link styling and CTA destinations - document link, button, and extraction authoring rules
This commit is contained in:
@@ -0,0 +1,42 @@
|
||||
---
|
||||
interface Props {
|
||||
href: string;
|
||||
variant?: 'default' | 'strong';
|
||||
target?: '_blank' | '_self';
|
||||
rel?: string;
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
href,
|
||||
variant = 'default',
|
||||
target,
|
||||
rel = target === '_blank' ? 'noopener noreferrer' : undefined,
|
||||
class: className
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<a
|
||||
class:list={['content-link', { 'content-link--strong': variant === 'strong' }, className]}
|
||||
href={href}
|
||||
target={target}
|
||||
rel={rel}
|
||||
>
|
||||
<slot />
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.content-link {
|
||||
color: var(--color-accent-strong);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.content-link:hover,
|
||||
.content-link:focus-visible {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.content-link--strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user