When you need to link an entire component or card, it can be tempting to wrap it within <a href="..."> and think you're done. This is considered unsemantic and incorrect because the component or card could contain other clickable elements or links (tags, timestamps, buttons).

The LinkOverlay component aims to solve this by overlaying one link on top of the component or card, and then elevating the remaining links on top of it.

Wrap the container within a LinkBox and use the LinkOverlay as a child of it or around the title's content.

Usage

Import

import { LinkBox, LinkOverlay } from '@passfort/castle'
content_copy
Copy

Example

<LinkBox as="article" maxW="sm" p="5" borderWidth="1px" rounded="md">
  <Box as="time" dateTime="2021-01-15 15:30:00 +0000 UTC">
    13 days ago
  </Box>

  <LinkOverlay href="#">
    <Text type="h1">
      {' '}
      New Year, New Beginnings: Smashing Workshops & Audits{' '}
    </Text>
  </LinkOverlay>

  <Text>
    Catch up on what's been cookin' at Smashing and explore some of the most
    popular community resources.
  </Text>
</LinkBox>
<LinkBox as="article" maxW="sm" p="5" borderWidth="1px" rounded="md">
  <Box as="time" dateTime="2021-01-15 15:30:00 +0000 UTC">
    13 days ago
  </Box>

  <LinkOverlay href="#">
    <Text type="h1">
      {' '}
      New Year, New Beginnings: Smashing Workshops & Audits{' '}
    </Text>
  </LinkOverlay>

  <Text>
    Catch up on what's been cookin' at Smashing and explore some of the most
    popular community resources.
  </Text>
</LinkBox>
content_copy
Copy
live example