Link Overlay

A component that makes an entire container clickable while allowing nested interactive elements.

Anatomy 

<script>
  import { LinkBox, LinkOverlay } from "@saas-ui/svelte/components/link-overlay";
</script>

<LinkBox as="article">
  <h2>
    <LinkOverlay href="/post/1">
      Article Title
    </LinkOverlay>
  </h2>
  <p>Article description...</p>
  <a href="/author">Author Name</a>
</LinkBox>

Examples

Article Accessibility

LinkBox as an article element with a nested inner link.

Basic Accessibility

Basic LinkOverlay component that makes the entire container clickable.

Card Accessibility

LinkBox styled as a card component.

Props

Prop Type Default Description
as div | article | section | aside | figure div The HTML element to render.
class text - Additional CSS classes to apply.