> ## Documentation Index
> Fetch the complete documentation index at: https://varaahi.vritservicespro.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Bento features

> A flexible feature grid with a bento layout, animated hover states, and an optional Sonic Void callout card.

# Bento features

Bento Features is the flexible grid you reach for when a page needs to communicate a
list of capabilities without a rigid grid. Cards can span different column widths,
and the layout responds to a handful of layout modes.

![Bento features section](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro-c6bfa2fc/images/placeholder/section-bento-features.png)

Bento feature grid with varied card sizes

***

## Layouts

| Layout | Best for |
| - | - |
| **Grid** | Equal-weight features — three or four capabilities of the same importance |
| **List** | Features that need more text each |
| **Bento** | Mixed importance — one hero card plus supporting cards |

> [!NOTE]
>
> The layout mode is set in the section's **Style** tab. Changing it never changes your
> content — the same cards re-flow.

***

## The Sonic Void card

A distinctive full-width callout card with its own gradient treatment, used to break
up the grid and create visual rhythm. It has its own settings — heading, body, an
optional image and a link.

> [!WARNING]
>
> Sonic Void is a **supporting** card. If you use it, keep it to one per section. Two
> competing gradient cards in the same viewport cancel each other out and the page
> stops having a focal point.

***

## Card behaviour

| Behaviour | Detail |
| - | - |
| Hover lift | The card rises slightly and its border brightens to the primary colour |
| Glow | A soft primary-colour glow appears around the card on hover |
| Icon tile | The leading icon sits in a rounded tile with a tinted background |
| Reveal on scroll | Cards stagger in as the section enters the viewport |

> [!NOTE]
>
> The hover treatment is **desktop only**. On touch devices there is no hover state,
> so the card is static — which is correct, since a hover that can never be triggered
> is wasted CSS.

***

## Writing good feature cards

A feature card answers one question: **"Why is this better than the alternative?"**

```text Good theme={"system"}
⚡  40-Hour Rapid-Charge Battery
    USB-C fast charge — 10 minutes adds three hours of playback.
```

```text Bad theme={"system"}
⚡  Long Battery Life
    Our battery lasts a long time and charges quickly.
```

The good version is specific, quantified, and says what the shopper can *do* with it.
The bad version could describe any product on the shelf.

***

## When to use this section

> **Use it for**
>
> Feature parity lists, capability overviews, "what's in the box" style breakdowns,
> and the section between the hero and a deep-dive section.

> **Don't use it for**
>
> Reviews (use Product Reviews), spec comparisons (use Comparison Table), and
> long-form storytelling (use Rich Text or Image with Text).

***

> **[Product reviews](https://varaahi.vritservicespro.com/sections/product-reviews.md)**
>
> Social proof, laid out cinematically.

> **[Content sections](https://varaahi.vritservicespro.com/sections/content-sections.md)**
>
> FAQ, rich text, image with text, video and more.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.