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あげる
// :where() で詳細度を 0 にし、no_layer ビルドでもユーティリティ等で上書きしやすくする。
.is--boxLink :where(a:not(.is--coverLink)) {
  position: relative;
  z-index: 2; // .is--coverLink::before + 1
}

// .is--boxLink > * には z-index を付けない（リンク以外の z-index を既定のままにし、重なり順を単純に保つ）。

Using with Lism Components

It can be applied via the isBoxLink prop on any component.

Prop	Output
`isBoxLink`	`is--boxLink`

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

Import

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

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

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 hl="s" mbs="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 fz="s" c="text-2" ta="right" hl="0" mbs="10">
    MORE →
  </Group>
</BoxLink>

<a class="is--boxLink -hov:-o -p:30 -bgc:base -bd -bdrs:30" href="#boxlink-demo01">
  <div class="-fz:xl -fw:bold">Heading text</div>
  <p class="-hl:s -mbs: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.
  </p>
  <div class="-fz:s -c:text-2 -ta:right -hl:0 -mbs:10">MORE →</div>
</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" hasTransition hov="-bxsh">
  <Group fz="xl" fw="bold">
    <Link isCoverLink href="#boxlink-demo02">
      Heading link text
    </Link>
  </Group>
  <Text c="text-2" hl="s" mbs="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" mbs="10">
    <a href="#inner-link02" className="-hov:-o">
      Inner Link
    </a>
  </Group>
</BoxLink>

<div class="is--boxLink has--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 text
    </a>
  </div>
  <p class="-c:text-2 -hl:s -mbs: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.
  </p>
  <div id="inner-link02" class="-mbs: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;
  }
}