Bento grid

A bento-style feature grid.

Fast

Blazing performance.

Secure

Encrypted by default.

Simple

Easy to use.

import { BuiBentoGrid, BuiBentoItem } from 'ng-blatui';

<div buiBentoGrid [columns]="3">
  <bui-bento-item title="Fast" description="Blazing speed" [colSpan]="2" />
</div>

Feature grid

Analytics

Real-time dashboards and insights.

Automation

Build powerful workflows.

Collaboration

Work together in real time.

Security

Encrypted, audited, compliant.

<div buiBentoGrid [columns]="3">
  <bui-bento-item title="Analytics" [colSpan]="2" [rowSpan]="2" />
  <bui-bento-item title="Automation" />
  <bui-bento-item title="Security" [colSpan]="2" />
</div>

API reference

[buiBentoGrid]

Inputs

Prop	Type	Default	Description
`columns`	`number`	`3`	Number of columns at the largest breakpoint (2, 3 or 4).

bui-bento-item

Inputs

Prop	Type	Default	Description
`title`	`string`	`''`	Optional heading rendered above the projected content.
`description`	`string`	`''`	Optional muted description rendered below the title.
`colSpan`	`number`	`1`	How many grid columns the cell spans (1-3).
`rowSpan`	`number`	`1`	How many grid rows the cell spans (1-2).

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.