BoxLink (is--boxLink)

is--boxLink is a class that makes an entire box clickable.

CSS

@use '../../_mixin' as mixin;

.is--boxLink {
  position: relative;
  display: block;
  color: inherit;
  pointer-events: auto;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate; // 内部のz-index順位と外部のz-indexを混同させない。
}

// リンクをクリック可能にするためにz-indexあげる
.is--boxLink a {
  position: relative;
  z-index: 2; // .is--coverLink::before + 1
}

/* これをしてしまうと z-index 関係がややこしくなる。リンク以外のz-indexはデフォのままにする。 */
// .is--boxLink > * {
// 	z-index: 0;
// }

Using with Lism Components

A <BoxLink> component is available as an alias for <Lism isBoxLink>.

Import

import { BoxLink } from 'lism-css/react';

Props

Prop	Description
`href`	Specifies the link destination. When `href` is provided, the element renders as an `<a>` tag; otherwise it renders as a `<div>`.

Usage

<BoxLink> (.is--boxLink) can be used in two main ways:

Render <BoxLink> (.is--boxLink) as an <a> tag to use it directly as a link.
Render <BoxLink> (.is--boxLink) as a <div> and place an a.is--coverLink inside it.

To include additional links inside a BoxLink, use approach 2.

1. Using `<BoxLink>` as an `<a>` tag

When href is provided to <BoxLink>, the component itself renders as an <a> tag.

↓

Example

Heading text

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

<BoxLink href="#boxlink-demo01" p="30" bgc="base" bd bdrs="30" hov="o">
  <Group fz="xl" fw="bold">
    Heading text
  </Group>
  <Text lh="s" my-s="15">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident.
  </Text>
  <Group fz="s" c="text-2" ta="right" lh="1" my-s="10">
    MORE →
  </Group>
</BoxLink>

<a class="is--boxLink -hov:o -p:30 -bgc:base -bd -bdrs:30" href="#boxlink-demo01">
  <p class="-fz:xl -fw:bold">Heading text</p>
  <p class="-c:text-2 -lh:s -my-s:15">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident.
  </p>
  <p class="-fz:s -c:text-2 -ta:right -lh:1 -my-s:10">MORE →</p>
</a>

2. Placing `is--coverLink` inside

You can also make the entire box clickable by using .is--coverLink on an anchor element inside the BoxLink.

This approach also allows you to place additional links inside the BoxLink.

↓

Example

Heading link text

Inner Link

<BoxLink p="30" bgc="base" bd bdrs="30" set="transition" hov="bxsh">
  <Group fz="xl" fw="bold">
    <Link isCoverLink href="#boxlink-demo02">
      Heading link text
    </Link>
  </Group>
  <Text c="text-2" lh="s" my-s="15">
    Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut.
  </Text>
  <Group id="inner-link02" my-s="10">
    <a href="#inner-link02" className="-hov:o">
      Inner Link
    </a>
  </Group>
</BoxLink>

<div class="is--boxLink set--transition -p:30 -bgc:base -bd -bdrs:30 -hov:bxsh">
  <div class="-fz:xl -fw:bold">
    <a class="is--coverLink" href="#boxlink-demo02">
      Heading Link
    </a>
  </div>
  <p class="-c:text-2 -lh:s -my-s:15">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident.
  </p>
  <div id="inner-link02" class="-my-s:10">
    <a href="#inner-link02" class="-hov:o">
      Inner Link
    </a>
  </div>
</div>

Opt-in

Extending the focus outline to the entire BoxLink on Tab key focus

When a link is placed using is--coverLink, pressing the Tab key to focus will show the outline only around the link text, not the entire box.

If you want to extend the outline to cover the entire box, add the following CSS.

@supports selector(:has(*)) {
  .is--boxLink:has(.is--coverLink:focus-visible) {
    outline: auto 1px;
    outline: auto 1px -webkit-focus-ring-color;
  }
  .is--coverLink:focus {
    outline: 0;
  }
}