LinkBox

A <Lism> component that outputs the is--linkBox class, which makes an entire box clickable as a link.

By default, it is an alias for <Lism isLinkBox> with additional handling tailored to its props.

Import

import { LinkBox, Link } 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

<LinkBox> (.is--linkBox) can be used in two main ways:

Render <LinkBox> (.is--linkBox) as an <a> tag to use it directly as a link.
Render <LinkBox> (.is--linkBox) as a <div> and place an a.u--expandedLink inside it.

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

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

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

<LinkBox href='#linkbox-demo01' p='30' bgc='base' bd bdrs='30' hov='o'>
  <HTML.div fz='xl' fw='bold'>Heading text</HTML.div>
  <HTML.p 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.
  </HTML.p>
  <HTML.div fz='s' c='text-2' ta='right' lh='1' my-s='10'>MORE →</HTML.div>
</LinkBox>

<a class="is--linkBox -hov:o -p:30 -bgc:base -bd -bdrs:30" href="#linkbox-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 `u--expandedLink` inside

You can also make the entire box clickable by using .u--expandedLink on an anchor element inside the LinkBox.

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

<LinkBox p='30' bgc='base' bd bdrs='30' setTransition hov='bxsh'>
  <HTML.div fz='xl' fw='bold'>
    <HTML.a className='u--expandedLink' href='#linkbox-demo02'>Heading link text</HTML.a>
  </HTML.div>
  <Dummy c='text-2' lh='s' my-s='15' />
  <HTML.div id='inner-link02' my-s='10'>
    <a href='#inner-link02' className='-hov:o'>Inner Link</a>
  </HTML.div>
</LinkBox>

<div class="is--linkBox -hov:bxsh -p:30 -bgc:base -bd -bdrs:30 set--transition">
  <div class="-fz:xl -fw:bold">
    <a class="u--expandedLink" href="#linkbox-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

When a link is placed using u--expandedLink, 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--linkBox:has(.u--expandedLink:focus-visible) {
    outline: auto 1px;
    outline: auto 1px -webkit-focus-ring-color;
  }
  .u--expandedLink:focus {
    outline: 0;
  }
}