Get Started
Components
Styling
Theming

Link Overlay

Used to create an overlay that can be used as a link.

import { Box, LinkOverlay } from 'styled-system/jsx'


function App() {
  return (
    <Box pos="relative">
      <img src="https://via.placeholder.com/150" alt="placeholder" />
      <LinkOverlay href="#">
        View more
      </LinkOverlay>
    </Box>
  )
}

Usage

import { LinkOverlay } from "styled-system/jsx";
<LinkOverlay href="https://example.com">
  Click here
</LinkOverlay>

Examples

import { Box, LinkOverlay } from 'styled-system/jsx'
function App() {
  return (
    <Box pos="relative">
      <img src="https://via.placeholder.com/150" alt="placeholder" />
      <LinkOverlay href="https://example.com">
        View more
      </LinkOverlay>
    </Box>
  )
}

Props

LinkOverlay accepts all CSS properties.

On this page