BentoTile

Server component, no client JSUnstable

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { BentoTile } from '@nizivo/react/unstable/bento-tile';

export function BentoTileExample(): JSX.Element {
  return (
    <div
      style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24, inlineSize: 960 }}
    >
      <BentoTile
        size="wide"
        title="Light and Dark"
        description="One mode switch, every colour follows."
      />
      <BentoTile size="tall" title="Accessible" description="Every pair passes AA." />
      <BentoTile size="square" title="Tokens" description="One set, every surface." />
      <BentoTile size="square" title="Motion" description="Calm by default." />
    </div>
  );
}

ImportCopy Anchor Link

import { BentoTile } from '@nizivo/react/unstable/bento-tile';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/bento-tile.css';

Static or interactiveCopy Anchor Link

Server. No client JavaScript. How to choose.

UseCopy Anchor Link

title (h3 by default) and description sit on the frosted caption card, never on the background. size spans the tile in a 12-column grid: wide 8 columns, square 4, tall 4 by 2 rows. background takes a screenshot or a photo, or the design's shader (ShaderSurface): <ShaderSurface /> (Aurora) on a wide tile, variant="glow-orb" on a square one and variant="contour" on a tall one; without one, CSS gradients stand in. Without backdrop blur, or with reduced transparency, the card is opaque.

PropsCopy Anchor Link

Other exportsCopy Anchor Link

BentoTileProps type

import type { BentoTileProps } from '@nizivo/react/unstable/bento-tile'

The props of BentoTile, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

This stylesheet reads no public hook.

Layers: nz.components. Classes: .nz-bento-tile, .nz-bento-tile-background, .nz-bento-tile-caption, .nz-bento-tile-description, .nz-bento-tile-title, .nz-shader-surface.

AccessibilityCopy Anchor Link

Nothing in this component takes focus or keyboard input.

KeyboardCopy Anchor Link

None.